javaScriptDOM

 Dom:

Document Object Model文档对象模型  

专门操作网页内容的API

1.Dom可进行的操作：

查找修改添加删除

1）查找

A.元素间关系查找   案例见demo01

父子关系:

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

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

firstElementChild;查找第一个孩子

lastElementChild;查找最后一个孩子

兄弟关系:

previousElementSibling前一个兄弟元素

nextElementSibling下一个兄弟元素

B.使用HTML元素查找    案例见demo02

1.按id查找：

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

特点：只能找到一个

如果没找到返回null

2.按class查找:

                                    var ele=document.getElementsByClassName('class');

可以找到多个，返回一个动态集合

如果没找到，返回空集合

3.按标签名查找：

var ele=document.getElementByTagName('标签名');

可以找到多个，返回一个动态集合

如果没找到，返回空集合

4.按name属性查找

                                    var ele=document.getElementByName('name');

C.使用选择器查找

1.var ele=document.querySelector('选择器');

特点:只能找到一个,如果找不到，返回null

2.var ele=document.querySelectorAll('选择器');

特点：查找多个符合选择器要求的函数，如果没找到，返回[]集合

        Argentina

    Brazil

    Canada

    Chile

    China

    Cuba

    Denmark

    Egypt

    France

    Greece

    Spain

利用元素间关系查找元素

电子设备

母婴用品

个人护理

//使用id找

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

   tree.style.color='red';

//使用class查找  返回一个动态集合

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

                   for(var i=0;i

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

                   }

//使用标签名查找

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

                   for(var i=0;i

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

                   }

//使用name属性查找 只针对于表单元素

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

                  for(var i=0;i

                   input[i].style.color='green';

                  }

利用元素间关系查找元素

电子设备

   

   

手机

   

电视

   

电脑

母婴用品

   

   

奶粉

   

玩具

   

尿不湿

个人护理

   

   

面膜

   

爽肤水

   

BB霜

//按选择器找，只能找到一个

var li=document.querySelector('#tree>li:first-child>ul>li:nth-child(2)');

li.style.color='red';

//按选择器找，可以找到多个

var lis=document.querySelectorAll('#tree>li');

console.log(lis);

for(var i=0;i

lis[i].style.color='red';

}