====节点====
12种 元素节点 文本节点 注释节点 根节点 属性节点
需要掌握的四种是哪四种？
元素节点 文本节点 注释节点 根节点
| 节点名 | nodeType | nodeName | nodeValue |
|---|---|---|---|
| 元素节点 | 1 | 标签名称（全大写） | null |
| 文本节点 | 3 | #text | 文本内容 |
| 注释节点 | 8 | #comment | 注释内容 |
| 根节点 | 9 | #document | null |
查找节点
| 方法 | 功能 | 返回值 |
|---|---|---|
| parentNode | 子选父节点 | 返回父元素节点 |
| children | 父选子元素节点(数组) | 返回所有子元素节点，数组 |
| childNodes | 所有子节点返回所有子节点，(数组，包含文本，注释) | |
| nextElementSibling | 下一个子元素节点 | 返回下一个子元素节点 |
| nextSibling | 下一个子节点(包含空白，注释) | 返回下一个节点 |
| previousElementSibling | 上一个子元素节点 | 返回上一个元素节点 |
| previousSibling | 上一个子节点(包含空白，注释) | 返回上一个节点 |
| firstElementChild | 第一个子元素节点 | 返回第一个元素节点 |
| firstChild | 第一个子节点 | 返回第一个节点 |
| lastElementChild | 最后一个子元素节点 | 返回最后一个元素节点 |
| lastChild | 最后一个子节点 | 返回最后一个节点 |
创建节点
| 方法 | 功能 | 返回值 |
|---|---|---|
| document.createElement(); | 创建元素节点 有参数参数为标签 | undefined |
| document.createTextNode(); | 创建文本节点 有参数参数为文本内容 | undefined |
| document.createComment() | 创建注释节点 有参数参数为注释内容 | undefined |
| document.createDocumentFragment(); | 创建文档碎片 有参数参数为标签 | undefined |
移动节点
| 方法 | 功能 | 返回值 |
|---|---|---|
| ele.appendChild(newEle) | ele添加子节点newEle | 返回添加子节点newEle |
| ele.insertBefore(newEle, oldEle) | ele添加子节点newEle在oldEle前 | 返回添加子节点newEle |
| ele.remove() | 删除节点 | 返回undefined |
| ele.removeChild(oldEle) | 删除子节点oldEle | 返回删除的子节点 |
| ele.replaceChild(newEle, oldEle) | 子节点newEle替换成oldEle | 返回被替换的子节点 |
| ele.cloneNode(bool) | 方法将复制并返回调用它的节点的副本。如果传递给它的参数是 true，它还将递归复制当前节点的所有子孙节点。否则，它只复制当前节点 | 返回拷贝的节点 |
属性节点
getAttribute,setAttribute,remove
-
选择器
- 元素：id,className,name,tagName,querySelector,querySelectorAll
- 父选子元素，子选父，第一个子元素，最后一个子元素，下一个兄弟元素，上一个兄弟元素
- children:父选子元素(数组)
- parentNode：子选父(元素)
- firstElementChild:第一个一个子元素：
- lastElementChild最后一个子元素;
- nextElementSibling:下一个兄弟元素
- previousElementSibling:上一个兄弟元素
-
节点：DOM每一个成分都叫节点，元素节点，文本节点，注释节点
- 节点选择器：
- childNodes:父选子
- firstChild:第一个子
- lastChild:最后一个子
- previousSibling:上一个兄弟
- netxSibling:下一个兄弟
- 节点的操作
- nodeType:节点的类型
- nodeName:节点名字（元素为标签名）
- nodeValue:节点的值（元素的的值为null）
- 节点选择器：
-
属性
-
元素节点的操作属性
-
内置
- 可见(点语法)：className,id,alt,href,type,value,name
- attribute系列
- 不可见
inerHTML,innetText,TagName....
- 可见(点语法)：className,id,alt,href,type,value,name
- 自定义属性
- 可见
- Attribute系列(getAttribute,setAttribuute,removeAttribute)
- 不可见
- 将元素作为对象操作，操作对象的方法 oDiv.dateid = "1002"
- 可见
-
内置
-
属性节点的操作
- 节点：attributes
- 每个节点的类型是对象
- nodeType,nodeName,nodeValue
- 节点：attributes
-
DOM元素的操作
- 创建，插入
