js DOM（一）一些属性及获取方法

2017-06-06 本文已影响0人帅气的刘小二

DOM(Document Object Model)文档对象模型，它提供了操作和访问DOM的方法和接口，也就是说定义了关于创建、插入、修改、删除页面的标准。

我们的页面内容都是字符串，js会把字符串都转换成dom树，dom对再把字符串转换成节点，我们对dom的操作就是对dom节点的操作。

节点（node）：在文档中的所有东西都是节点。

元素节点：html标签，如div,p,span...

文本节点：文字。

注释节点：注释的内容。

属性节点、document也是一个节点......

nodeName:节点名称。

nodeType:节点类型。

nodeValue：节点值。

节点 nodeName nodeType nodeValue

元素节点大写的标签名 1 undefined或null

属性节点属性名 2 属性值

文本节点 #text 3 文本本身

注释节点 #comment 8 注释内容

文档节点 #document 9 null

....... ....... ... ...

一、获取节点

A: 通过document获取节点

1、getElementById（“id名称”）//通过id名获取元素

2、getElementByClassName('类名')//通过类名获取元素，返回nodeList。非标准浏览器不支持

3、getElementByTagName（‘标签名’）//通过标签名获取元素，返回nodeList。非标准浏览器不支持

4、getElementByName（‘name’）//通过元素的name获取元素，返回nodeList

5、querySelector（‘选择器’）//通过选择器获得一个DOM元素，若选择器选中多个，默认只返回第一个。非标准浏览器不支持

6、querySelectorAll（‘选择器’）//通过选择器获得一组DOM元素，非标准浏览器不支持。

B:通过节点指针获取节点

1、childNodes:子节点，包括文本、注释节点....

2、children：元素子节点，ie提出的非标准属性，部分浏览器不支持。

3、parentNode：父节点，document 节点没有父节点。

4、previousSibling:上一个兄弟节点。

5、nextSibling：下一个兄弟节点。

6、firstChild：第一个子节点。

7、lastChild:最的一个子节点

8、previousElemnetSibling:上一个兄弟元素节点。非标准浏览器不支持。

9、nextElementSibling:下一个兄弟元素节点。非标准浏览器不支持。

10、firstElementChild:第一个元素子节点。非标准浏览器不支持。

11、lastElementChild:最后一个元素子节点。非标准浏览器不支持。