摘要：<!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>跑馬燈效果</title> </head> &
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>跑馬燈效果</title>
</head>
<body>
<ul id="ul">
<li>列表01</li>
<li>列表02</li>
<li>列表03</li>
<li>列表04</li>
<li>列表05</li>
</ul>
<script type="text/javascript">
console.log(document.title);
setInterval(function(){
var charArray = document.title.split("")//字符串轉(zhuǎn)換成數(shù)組
//得到最后一個(gè)數(shù)組元素
var lastChar = charArray.pop()
//把最后一個(gè)數(shù)組元素前置添加到數(shù)組中
charArray.unshift(lastChar)
//將數(shù)組轉(zhuǎn)換成字符串
var newTitle = charArray.join("")
//將字符串寫入瀏覽器標(biāo)題中
document.title = newTitle
},500)
//根據(jù)ID來獲取元素
let ul = document.getElementById('ul')
console.log(ul);
//根據(jù)class獲取元素
let list=document.getElementsByClassName('list1')
//控制臺(tái)輸出list
console.log(list)
//標(biāo)簽選擇器querySelector第一個(gè)元素
let query = document.querySelector('li')
let id = document.querySelector('#ul')
console.log(id);
console.log(query);
//標(biāo)簽選擇器querySelectorAll所有的元素
let queryAll = document.querySelectorAll('li')
console.log(queryAll);
for (i = 0 ; i < queryAll.length ; i++){
if(i%2==0){
queryAll[i].style.backgroundColor = 'pink';
queryAll[i].style.fontSize = '20px';
}else{
queryAll[i].style.backgroundColor = 'lightblue';
queryAll[i].style.fontSize = '20px';
}
}
</script>
</body>
</html>
批改老師：韋小寶批改時(shí)間：2018-12-19 15:15:36
老師總結(jié)：寫的很不錯(cuò)哦！關(guān)于dom的知識(shí)課后一定要多練習(xí)哦！