2018-07-19

2018-07-19  本文已影响0人  wlki

###Dom查:```js

电影

后来的我们

复仇者联盟

死侍

电视剧

乡村爱情

杨光的快乐生活

亮剑

家有儿女

综艺

跑男

跨界歌王

创造101

向往的生活

动漫

果宝特攻

花园宝宝

大头儿子

天线宝宝

```1.通过元素间的关系**1)父子关系**```jsparentElement  查找一个元素的父元素children  查找父元素下的所有子元素  找到多个firstElementChild  找到父元素下的第一个子元素lastElementChild  找到父元素下的最后一个子元素``````jsconsole.log(wlki.lastElementChild.children[0].lastElementChild);var li=wlki.lastElementChild.children[0].lastElementChild;li.style.backgroundColor='blue';li.style.color='white';li.style.fontSize='30px';console.log(wlki.children[1].firstElementChild.lastElementChild);var sencondLi=wlki.children[1].firstElementChild.lastElementChild;sencondLi.style.backgroundColor='red';sencondLi.style.color='white';sencondLi.style.fontSize='50px';```**2)兄弟关系**```jspreviousElementSibling  前一个兄弟nextElementSibling    下一个兄弟``````js花园宝宝:console.log(wlki.children[2].nextElementSibling.children[0].firstElementChild.nextElementSibling);``````js亮剑:nextElementSilingconsole.log(wlki.children[0].nextElementSibling.children[0].firstElementChild.nextElementSibling.nextElementSibling);``````js杨光的快乐生活:console.log(wlki.children[0].nextElementSibling.children[0].firstElementChild.nextElementSibling);``````js亮剑:previousElementSiblingconsole.log(wlki.children[2].previousElementSibling.children[0].lastElementChild.previousElementSibling);```**2.通过HTML查找**1)通过idvar ele=document.getElementById('id号');只能找到一个```jsvar ul=document.getElementById('wlki');console.log(ul);ul.style.backgroundColor='yellow';var suv=document.getElementsByClassName('suv');console.log(suv);suv[0].style.background='pink';```*因为只有一个元素,所以直接下标,多的话用遍历。*2)通过class查找 var ele=document.getElementsByClassName('class名'); 特点:可以找到多个  并且返回一个动态集合(数组)```jsvar list=document.getElementsByClassName('list') ;console.log(list);//['list']list[0].style.color='red';```3)通过标签名var ele=document.getElementsByTagName('标签名');特点:可以找到多个  返回动态集合 (数组)```jsvar li=document.getElementsByTagName('li');console.log(li);for(i=0;ili:nth-child(2)>ul>li:last-child')

console.log(late);

//查找全部 返回动态结合(数组)

//电影

var allLi=document.querySelectorAll('#wlki>li:nth-child(3)>ul>li');

console.log(allLi);

for(var i=0;i

上一篇下一篇

猜你喜欢

热点阅读