节点对象管理_${node.outerhtml}-CSDN博客

本文链接：https://blog.csdn.net/bdh123b/article/details/121873934

javascrip操作的内容称为节点对象 Node ，包含12中类型的节点对象，常用的节点为document,标签元素节点，注释节点。节点均继承Node类型，所以有相同的属性和方法。document为DOM操作的起始节点。在浏览器渲染的过程中回将文档内容生成为不同的对象，不同的节点由专有的构造函数创建对象，下面时节点的原型链：原型说明Object根对象，提供hasOwnProperty等基本对象操作支持EventTarget提供addEventListener、remove

摘要由CSDN通过智能技术生成

javascrip操作的内容称为节点对象 Node ，包含12中类型的节点对象，常用的节点为document,标签元素节点，注释节点。节点均继承Node类型，所以有相同的属性和方法。document为DOM操作的起始节点。
在浏览器渲染的过程中回将文档内容生成为不同的对象，不同的节点由专有的构造函数创建对象，下面时节点的原型链：

原型	说明
Object	根对象，提供hasOwnProperty等基本对象操作支持
EventTarget	提供addEventListener、removeEventListener等事件支持方法
Node	提供firstChild、parentNode等节点操作方法
Element	提供getElementsByTagName、querySelector等方法
HTMLElement	所有元素的基础类，提供childNodes、nodeType、nodeName、className、nodeName等方法
HTMLHeadingElement	Head标题元素类

常用节点API

方法	说明
document	document是DOM操作的起始节点
document.documentElement	文档节点即html标签节点
document.body	body标签节点
document.head	head标签节点
document.links	超链接集合
document.anchors	所有锚点集合
document.forms	form表单集合
document.images	图片集合

节点属性

不同类型的节点拥有不同的属性，下面时节点属性的说明

node Type	说明
1	元素节点
2	属性节点
3	文本节点
8	注释节点
9	document对象

动态与静态

通过 getElementsByTagname 等getElementsBy… 函数获取的Nodelist与HTMLCollection集合是动态的，即有元素添加或移动操作将实时反映最新状态。
使用getElement…返回的都是动态的集合
使用querySelectorAll返回的是静态集合

NodeList和HTMLCollection的区别

首先NodeList和HTMLCollection都是DOM节点的集合。

NodeList中包含的节点类型可能是Element/Text/Comment/Document/DocumentFragment等，我们知道nodeType的种类有12种。NodeList由Node.childNodes和document.querySelectorAll()返回，不同的是node.ChildNodes返回的是动态（live）的NodeList，而document.querySelectorAll()返回的是静态(static)的NodeList。
HTMLCollection包含的节点类型是Element，且通过document.getElementByClassName()等方法返回的是动态（live）的HTMLCollection集合。