节点树
每个html页面载入浏览器的时候,浏览器都会生成一个树形结构,这个树形结构由节点组成,我们称之为节点树或文档树;
每个HTML标签都是元素节点
每个标签的属性都是属性节点
每个标签的文本内容都是文本节点
节点分为: 元素节点 属性节点 文本节点 注释节点
nodeType 获取节点的类型
nodeName 获取节点的名称
nodeValue 获取节点的值
| 节点 | nodeType | nodeName | nodeValue |
| 元素节点 | 标签名 | 1 | null |
| 属性节点 | 属性名 | 2 | 属性值 |
| 文本节点 | #text | 3 | 文本内容 |
| 注释节点 | #comment | 8 | 注释内容 |
|
操作 |
作用 | 返回值 |
|
document.getElementById(id值) |
根据id获取页面指定元素 | 获取到的是一个元素节点 |
|
doument.getElementsByName(name属性值) |
据name名称获取页面的指定元素 | NodeList,获取到的是一个节点列表, |
|
document.getElementsByClassName(类名) |
根据class类名来获取页面的指定元素 | NodeList,节点列表 |
|
document.getElementsByTagName(标签名) |
获取页面中指定的标签元素 | NodeList,节点列表 |
|
document.getElementsByTagNameNS() |
根据命名空间获取指定的元素; | |
| innerHTML | 获取或设置标签的内容 | |
| innerText | 获取或设置标签的文本 | |
| tagName | 用来获取元素的标签名 | |
| Element.getAttribute(字符串参数属性名) | 根据指定属性名获取指定属性的值 | 字符串 |
|
Element.setAttribute (字符串参数属性名,字符串参数属性值) |
给指定属性设置指定的值; |
|
| Element.removeAttribute(字符串参数属性名) | 删除元素指定属性 | |
| element.childNodes | 获取某个元素节点的所有子节点 | 返回值是NodeList |
| element.attributes | 获取某个元素节点的所有属性节点 | 返回值是NodeList |
innerHTML和innerText的区别?
获取标签内容: innerHTML可以获取到标签内部的所有内容,包括文本,标签，属性等;innerText只能获取到标签里面的文本内容;
设置标签内容: innerHTML设置的带标签内容,可以被浏览器解析;innerText设置的带标签内容,只会被认为是单纯的文本;
基于element元素节点的属性
| childNodes | 获取指定元素的所有子节点,包含空白,文本,元素(NodeList) |
| chidren | 获取指定元素的所有元素子节点;(NodeList) |
| firstChild | 获取指定元素的第一个子节点;(Node) |
| firstElementChild | 获取指定元素的第一个元素子节点;(Element) |
| lastChild | 获取指定元素的最后一个子节点;(Node) |
| lastElementChild | 获取指定元素的最后一个元子节点;(Element) |
| parentNode | 获取当前节点的父节点;(Node) |
| ownerDocument | 获取到页面的document节点,一个用浏览器打开的页面就是一个document对象,这个对象也成为document节点 |
| previousSibling | 获取当前节点的前一个兄弟节点;(Node) |
| previousElementSibling | 获取当前节点的前一个兄弟元素节点;(Element) |
| nextSibling | 获取当前节点的下一个兄弟节点 |
| nextElementSibling | 获取当前节点的下一个兄弟元素节点 |
| attributes | 获取当前节点的所有属性节点 |
| childElementCount | 获取当前节点的元素节点的个数 |
时间： 2024-08-01 22:08:55