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:最后一个元素子节点。非标准浏览器不支持。