25

1.元素间关系查找

1)父子关系

parentElement; 查找一个元素的父元素

children;查找一个元素的所有孩子

firstElementChild;查找第一个孩子

lastElementChild;查找最后一个孩子

2)兄弟关系

previousElementSibling  前一个兄弟元素

nextElementSibling      下一个兄弟元素

案例：

   

• 
  

          电子设备
  

         

  
  

             

  • 手机
  
  

             

  • 电视
  
  

             

  • 电脑
  
  

         

  
  

     




   

• 
  

          母婴用品
  

         

  
  

             

  • 奶粉
  
  

             

  • 玩具
  
  

             

  • 尿不湿
  
  

         

  
  

     




   

• 
  

          个人护理
  

         

  
  

             

  • 面膜
  
  

             

  • 爽肤水
  
  

             

  • BB霜
  
  

         

  
  

     

2.使用HTML元素查找

   

• 电子设备



   

• 母婴用品



   

• 个人护理

1)按id查找

var ul=document.getElementById('king');

king.style.color='red';

2)按class查找 返回一个动态集合

var list=document.getElementsByClassName('list');

for(var i=0;i

    list[i].style.background='yellow';

}

3)按标签名查找

var li=document.getElementsByTagName('li');

for(var i=0;i

    li[i].style.fontSize='30px';

}

4)按name属性查找 只针对于表单元素

var input=document.getElementsByName('uname');

    for(var i=0;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[i].style.color='red';

}