DOM--（Node）

最新推荐文章于 2022-06-29 13:06:09 发布

kalinara

最新推荐文章于 2022-06-29 13:06:09 发布

阅读量216

点赞数

分类专栏： JavaScript 文章标签： node 节点树 DOM

本文链接：https://blog.csdn.net/kalinara/article/details/74553861

版权

JavaScript 专栏收录该内容

45 篇文章 0 订阅

订阅专栏

DOM（文档对象模型）是针对HTML和XML文档的一个API（应用程序编程接口），它描绘了一个层次化的节点树。

Node类型

1. Node.ELEMENT_NODE 元素节点
2. Node.ATTRIBUTE_NODE 属性节点
3. Node.TEXT_NODE 文本节点
4. Node.CDATA_SECTION_NODE    CDATA节点（只针对XML文档，表示CDATA区域）
5. Node.ENTITY_REFERENCE_NODE  实体引用名称节点
6. Node.ENTITY_NODE  实体名称节点
7. Node.PROCESSING_INSTRUCTION_NODE  处理指令节点
8. Node.COMMENT_NODE  注释节点
9. Node.DOCUMENT_NODE  文档节点
10. Node.DOCUMENT_TYPE_NODE  文档类型节点
11. Node.DOCUMENT_FRAGMENT_NODE  文档片段节点
12. Node.NOTATION_NODE     DTD声明节点

【属性】

• nodeType   与数值（1-12）比较

• nodeName  返回元素的标签名

• nodeValue 

• childList   （firefox3.6+ & chrome）
   操作类名的方法

    - X.childList.add(类名)
    - X.childList.contains(类名)
    - X.childList.remove(类名)
    - X.childList.toggle(类名) 如果存在，删除；如果不存在，添加

• childElementCount 返回子元素个数（不包含文本节点和注释节点）

• firstElementChild 返回第一个元素（firstChild元素版）

• lastElementChild  返回最后一个元素（lastChild元素版）

• previousElementSibilng 返回前辈元素（previousSibling元素版）

• nextElementSibling 返回后辈元素  （nextSibling元素版）

• 自定义属性 (加上前缀data,比如data-xx，使用时dataset.xx)  （firefox6+ & chrome）

• innerHTML （写入时会改变DOM子树）
读取时返回or替换所有子节点，写入后会替换原来所以子节点
(不支持inner HTML的元素：col、colgroup、frameset、head、html、style、table、tbody、thead、tfoot、tr)

• innerText（写入时会改变DOM子树，永远只会生成当前元素的一个子文本节点）
读取时，将文档树的所有文本拼接起来；写入时，删除元素的所有子节点，插入文本
不支持innerText属性的浏览器可以使用textContent属性。
textContent还会返回行内样式和行内脚本代码，innerText则会忽略行内样式和行内脚本。

• outerHTML （写入时会改变DOM子树）
读取时返回or替换调用它的元素及其所有子节点，写入后替换元素x的整个DOM树

• outerText （不常用)
读取时，与innerText结果一样；写入时，新的文本节点会完全替换整个元素

• insertAdjacentHTML(插入位置，要插入的HTML文本)
    插入位置四种值
    - beforebegin 在当前元素前插入同胞元素
    - afterbegin 在当前元素下插入新的子元素/在第一个子元素前插入新的子元素
    - beforeend 在当前元素下插入新的子元素/在最后一个子元素后插入新的子元素
    - afterend 在当前元素后插入同胞元素

！使用innerHTML、outerHTML、insertAdjacentHTML前，要手工删除被替换元素的所有事件处理程序和js对象属性，不然会导致内存占用问题。当插入大量新HTML标记，使用这三个方法比多次使用DOM操作先创建节点再指定关系相比，效率要高得多。使用时，先单独构建字符串，最后再一次性把结果字符串赋给innerHTML

【关系】

每个节点都有一个childNodes属性，其中保留着一个NodeList对象（类数组，保存一组有序的节点，它基于DOM结构动
态变化，可用方括号或item()访问其中的节点）
x.children 元素只包含元素子节点  
x.childNodes可能还包含空白符

每个节点都有一个parentNode属性，指向文档树的父节点。包含在childNodes列表中的所有节点有相同的父节点。

X.parentNode

包含在childNodes列表中的每个节点，相互间为同胞节点

X.previousSibling  (第一个节点的previousSibling为null)
X.nextSibling （最后一个节点的nextSibling为null）

其他关系

X.firstChild
X.lastChild
X.ownerDocument  指向表示整个文档的文档节点

【方法】

• 判断是否有子节点    
x.hasChildNodes() //返回true/false

• 在childNodes列表最后增加新节点
x.appendChild(新节点) //返回新节点

• 在childNodes列表中，在参照节点前，插入新节点 x.insertBefore(新节点，参照节点)  //返回新节点

• 在childNodes列表中替换节点
x.replaceChild(新节点，被替换节点) //返回被替换的节点

• 移除childNodes列表中的节点
x.removeChild(被移除的节点)  //返回被移除的节点

• 复制节点副本
    ○ 深复制(复制节点&其子节点树)  x.cloneNode(true)
    ○ 浅复制(只复制节点本身)  x.cloneNode(false)
？深复制和浅复制区别：
    深复制：（递归）结果副本与原本指向两个不同的内存地址
    浅复制：结果副本与原本指向同一个内存地址

• 处理文档树中的文本节点(删除不包含文本的文本节点、合并相邻的文本节点)
X.normalize()

• 滚动元素的容器时，元素出现在视口中
X.scrollIntoView() 

• 滚动元素容器，元素出现。当alignCenter为true时，元素显示在视口中部
X.scrollIntoViewIfNeeded(alignCenter) 

• 将元素内容滚动指定的行高
X.scrollByLines(行高)  

• 将元素内容滚动指定的页面高度
X.scrollByPages(页面高度) 

• 确定节点xx是否为节点x的后代 
x.contains(xx)   返回true/false

• 确定节点间的关系，返回表示关系的位掩码 x.compareDocumentPosition(xx)
    1：无关
    2：xx居前
    4：xx局后
    8：xx包含x
    16：xx被x包含