美文网首页
2018-07-19

2018-07-19

作者: wlki | 来源:发表于2018-07-19 09:57 被阅读0次

    ###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

    相关文章

      网友评论

          本文标题:2018-07-19

          本文链接:https://www.haomeiwen.com/subject/vlvzpftx.html