js--5.dom对象-2.dom查询

1      获取document下的元素节点

后面三个会给我们返回一个类数组对象，所有查询到的元素都会封装到对象中，即使查询到的元素只有一个，也会封装到数组中返回

 

1.1  id属性

该方法为 document 对象的方法

         var bjNode =document.getElementById("bj");

1.2  标签名

getElementsByTagName()可以根据标签名来获取一组元素节点对象

         var liNodes =document.getElementsByTagName("li");

1.3  name属性

getElementsByName()可以根据name来获取一组元素节点对象

var inputs =document.getElementsByName("gender");

 

1.4  class

1.4.1  getElementsByClassName

根据元素的class属性值查询一组元素节点对象

    getElementsByClassName()可以根据class属性值获取一组元素节点对象，

   

1.4.2  使用CSS选择器进行查询-- querySelector()

需要一个选择器的字符串作为参数，可以根据一个CSS选择器来查询一个元素节点对象

    使用该方法总会返回唯一的一个元素，如果满足条件的元素有多个，那么它只会返回第一个

1.4.3  使用CSS选择器进行查询-- querySelectorAll()

该方法和querySelector()用法类似，不同的是它会将符合条件的元素封装到一个数组中返回

 

2      获取元素节点下

通过具体的元素节点调用

2.1  子节点（元素、文本）

2.1.1  标签名

getElementsByTagName()

–方法，返回当前节点的指定标签名后代节点

 

2.1.2  所有

所有子节点childNodes

属性，表示当前节点的所有子节点（元素节点，文本节点），根据DOM标签间空白也会当成文本节点

 

所有子元素children

属性，可以获取当前元素的所有子元素（元素节点）

 

2.1.3  第一个

第一个子节点firstChild

属性，表示当前节点的第一个子节点

 

第一个子元素firstElementChild

属性，获取当前元素的第一个子元素

 

2.1.4  最后一个

最后一个子节点lastChild

属性，表示当前节点的最后一个子节点

 

最后一个子元素lastElementChild

属性，获取最后一个子元素

 

2.2  父节点

父节点parentNode

属性，表示当前节点的父节点

 

2.3  兄弟节点

2.3.1  前一个

前一个兄弟节点previousSibling

属性，表示当前节点的前一个兄弟节点

 

获取前一个兄弟元素previousElementSibling

属性，表示当前节点的前一个兄弟元素节点

 

2.3.2  后一个

后一个兄弟节点nextSibling

属性，表示当前节点的后一个兄弟节点

 

后一个兄弟节点nextElementSibling

属性，表示当前节点的后一个兄弟元素节点

 

3      dom查询剩余方法

3.1  获取body标签

在document中有一个属性body，它保存的是body的引用

              varbody = document.body;

             

3.2  获取html标签

document.documentElement保存的是html根标签

              varhtml = document.documentElement;

             

3.3  获取所有的元素

document.all代表页面中所有的元素

              varall = document.all;