abstract：<!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("")//字符串转换成数组
//得到最后一个数组元素
var lastChar = charArray.pop()
//把最后一个数组元素前置添加到数组中
charArray.unshift(lastChar)
//将数组转换成字符串
var newTitle = charArray.join("")
//将字符串写入浏览器标题中
document.title = newTitle
},500)
//根据ID来获取元素
let ul = document.getElementById('ul')
console.log(ul);
//根据class获取元素
let list=document.getElementsByClassName('list1')
//控制台输出list
console.log(list)
//标签选择器querySelector第一个元素
let query = document.querySelector('li')
let id = document.querySelector('#ul')
console.log(id);
console.log(query);
//标签选择器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>
Correcting teacher：韦小宝Correction time：2018-12-19 15:15:36
Teacher's summary：写的很不错哦！关于dom的知识课后一定要多练习哦！