Dom中的查找

‘’‘js

Dom: 操作页面元素(增删改查)

1.查找：

    一.通过元素间的关系查找

      1)父子关系

      parentElement  查找一个元素的父元素

          console.log(ceshi.parentElement) //查找id为ceshi的父元素

      ceshi.parentElement.style.backgroundColor='#ccf'; //设置ceshi父元素的背景色

      children  查找一个元素的所有子元素(输出为数组形式)

    console.log(ceshi.children); //查找id为ceshi的所有子元素(!结果为数组形式!)

    ceshi.children[2].style.color='#f00';//给ceshi的子元素中下标为2的设字体颜色

          var a=ceshi.children;        //给ceshi的所有子元素的设置字体颜色

    for(var i=0;i

    ceshi.children[i].style.backgroundColor='#0f0';

}

          console.log(ceshi.children[2].children[0].children[2])

          var b=ceshi.children[2].children[0].children[2];

          b.style.color='#50f';

      firstElementChild  查找一个元素的第一个子元素(输出为原来的形式)

      lastElementChild  查找一个元素的最后一个子元素(输出为原来的形式)

          // console.log(ceshi.firstElementChild.)

      2）兄弟关系

      previousElementSibling  前一个兄弟

      nextElementSibling    下一个兄弟

          找 阳光的快乐生活

          var c=ceshi.firstElementChild.nextElementSibling.children[0].firstElementChild.nextElementSibling;

          console.log(c);

          c.style.backgroundColor='#00f';

          找 回村的诱惑

          var d=ceshi.children[2].previousElementSibling.firstElementChild.lastElementChild;

          console.log(d);

          d.style.color='#ff0';

          找 儿子去哪儿

          var e=ceshi.firstElementChild.nextElementSibling.nextElementSibling.firstElementChild.lastElementChild

          console.log(e);

          e.style.backgroundColor='#0ff';

    二.通过HTML查找

      1）通过id查找

        var ele=document.getElementById('id号'); //只能找到一个

          var id=document.getElementById('ceshi');

          console.log(id);

          id.style.backgroundColor='#f0f';

      2)通过class查找

        var ele=document.getElementsByClassName('class名'); //可以找到多个  并且返回一个动态集合(数组)

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

          console.log(main);

          main[0].style.backgroundColor='#ff0';

      3)通过标签名查找

        var ele=document.getElementsByTagName('标签名') //可以找到多个  并且返回一个动态集合(数组)

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

          console.log(li);

          for(var i=0;i

              li[i].style.color='#c2c';

          };

      4)通过name属性查找   

        var  ele=document.getElementsByName('name'); //可以找到多个  返回动态集合 (数组)

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

          console.log(uname)

    三.通过选择器查找

      1) var ele=document.querySelector('选择器');  //只能找到一个

              var lia=document.querySelector('#ceshi>li>ul>li:last-child');

              console.log(lia);

              lia.style.color='#f0f';

      2) var ele=document.querySelectorAll('选择器'); 查找所有  返回动态集合 (数组)

              var liall=document.querySelectorAll('.main>li');

              console.log(liall);

              for(var i=0;i

                  liall[i].style.backgroundColor='#cf0';

              }

‘’‘