1.元素间关系查找
1)父子关系
parentElement; 查找一个元素的父元素
children;查找一个元素的所有孩子
firstElementChild;查找第一个孩子
lastElementChild;查找最后一个孩子
2)兄弟关系
previousElementSibling 前一个兄弟元素
nextElementSibling 下一个兄弟元素
案例：
<ul id='king'>
<li>
电子设备
<ul>
<li>手机</li>
<li>电视</li>
<li>电脑</li>
</ul>
</li>
<li>
母婴用品
<ul>
<li>奶粉</li>
<li>玩具</li>
<li>尿不湿</li>
</ul>
</li>
<li>
个人护理
<ul>
<li>面膜</li>
<li>爽肤水</li>
<li>BB霜</li>
</ul>
</li>
</ul>
<script>
//查找tree的父元素
console.log(king.parentElement);
//查找tree的子元素
console.log(king.children);
//从tree找到奶粉尿不湿
console.log(king.children[1].firstElementChild.children[0]);
</script>
2.使用HTML元素查找
<ul id='king'>
<li class='list'>电子设备</li>
<li class='list'>母婴用品</li>
<li class='list'>个人护理</li>
</ul>
<input type="" name="uname">
1)按id查找
var ul=document.getElementById('king');
king.style.color='red';
2)按class查找 返回一个动态集合
var list=document.getElementsByClassName('list');
for(var i=0;i<list.length;i++){
list[i].style.background='yellow';
}
3)按标签名查找
var li=document.getElementsByTagName('li');
for(var i=0;i<li.length;i++){
li[i].style.fontSize='30px';
}
4)按name属性查找 只针对于表单元素
var input=document.getElementsByName('uname');
for(var i=0;i<input.length;i++){
input[i].style.color='green';
}
3.使用选择器查找
1)按选择器找，只能找到一个
var li=document.querySelector('#king>li:first-child>ul>li:nth-child(2)');
li.style.color='red';
2)按选择器找，可以找到多个
var lis=document.querySelectorAll('#king>li');
console.log(lis);
for(var i=0;i<lis.length;i++){
lis[i].style.color='red';
}
