<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>js新增选择器</title>
</head>
<body>
<h3>标题2</h3>
<h2>标题1</h2>
<ul id="u1">
<li >列表项1</li>
<li class="ll">列表项</li>
<li class="bb">列表项</li>
<li class="ll">列表项</li>
<li class="ll">
<p>u1里面的段落</p>
</li>
</ul>
<ul id="u2">
<li>列表项1</li>
<li class="bb">列表项2</li>
<li class="bb">列表项3</li>
<li class="bb">列表项4</li>
<li >列表项ls</li>
</ul>
<script>
function myfun1(){
// document.querySelector("li").style.backgroundColor="red";
// document.querySelector("#u2").style.backgroundColor="red";
document.querySelector(".ll").style.backgroundColor="blue";
document.querySelector(".bb").style.backgroundColor="red";
}
function myfun2(){
document.querySelector("#u2>li+li+li").style.backgroundColor="green";
document.querySelector("#u1 li p").style.backgroundColor="green";
}
function myfun3(){
document.querySelector("h2,h3").style.backgroundColor="green";
}
function myfun4(){
var x=document.querySelectorAll("#u2 .bb");
x[1].style.backgroundColor="orange";
// alert(x.length);
for (var i = 0; i < x.length; i++) {
x[i].style.backgroundColor="green";
}
}
function myfun5(){
var u1=document.getElementById('u1');
// var arr=document.querySelectorAll("#u1>li");
var arr=u1.getElementsByTagName('li');
alert(arr.length);
var newli=document.createElement("li");
u1.appendChild(newli);
newli.innerHTML="新增加的项目";
alert(arr.length);
}
function myfun6(){
var x=document.getElementsByClassName("bb");
for (var i = 0; i < x.length; i++) {
x[i].style.backgroundColor="green";
}
}
myfun6();
</script>
</body>
</html>