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';

          }

‘’‘