1.元素間關(guān)系查找
1)父子關(guān)系
parentElement; 查找一個(gè)元素的父元素
children;查找一個(gè)元素的所有孩子
firstElementChild;查找第一個(gè)孩子
lastElementChild;查找最后一個(gè)孩子
2)兄弟關(guān)系
previousElementSibling? 前一個(gè)兄弟元素
nextElementSibling? ? ? 下一個(gè)兄弟元素
案例：
<ul id='king'>
? ? <li>
? ? ? ? 電子設(shè)備
? ? ? ? <ul>
? ? ? ? ? ? <li>手機(jī)</li>
? ? ? ? ? ? <li>電視</li>
? ? ? ? ? ? <li>電腦</li>
? ? ? ? </ul>
? ? </li>
? ? <li>
? ? ? ? 母嬰用品
? ? ? ? <ul>
? ? ? ? ? ? <li>奶粉</li>
? ? ? ? ? ? <li>玩具</li>
? ? ? ? ? ? <li>尿不濕</li>
? ? ? ? </ul>
? ? </li>
? ? <li>
? ? ? ? 個(gè)人護(hù)理
? ? ? ? <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'>電子設(shè)備</li>
? ? <li class='list'>母嬰用品</li>
? ? <li class='list'>個(gè)人護(hù)理</li>
</ul>
<input type="" name="uname">
1)按id查找
var ul=document.getElementById('king');
king.style.color='red';
2)按class查找 返回一個(gè)動(dòng)態(tài)集合
var list=document.getElementsByClassName('list');
for(var i=0;i<list.length;i++){
? ? list[i].style.background='yellow';
}
3)按標(biāo)簽名查找
var li=document.getElementsByTagName('li');
for(var i=0;i<li.length;i++){
? ? li[i].style.fontSize='30px';
}
4)按name屬性查找 只針對(duì)于表單元素
var input=document.getElementsByName('uname');
? ? for(var i=0;i<input.length;i++){
? ? ? ? input[i].style.color='green';
? ? }
3.使用選擇器查找
1)按選擇器找，只能找到一個(gè)
var li=document.querySelector('#king>li:first-child>ul>li:nth-child(2)');
li.style.color='red';
2)按選擇器找，可以找到多個(gè)
var lis=document.querySelectorAll('#king>li');
console.log(lis);
for(var i=0;i<lis.length;i++){
? ? lis[i].style.color='red';
}
