一文读懂JavaScript DOM节点操作（JavaScript DOM节点操作详解）

一、什么是节点

DOM模型是树状结构模型，二组成这棵树的就是一个个点，在网络术语中称之为节点。
节点是一个模型中最基本的组成单位。DOM模型是由一个个节点组成的，DOM节点也有其不同的类型。

二、节点类型

DOM节点分为5种类型：

• 文档节点（就是整个HTML文档，也就是document对象）
• 元素节点
• 注释节点（在HTML文档中写的注释）
• 属性节点
• 文本节点

1、元素节点

我们看到的一个个标签元素在DOM节点树中就是元素节点，它是我们操作节点的核心，即使我们要操作属性节点和文本节点，也要先找到它们的元素节点

DOM中element对象的三个属性：

• nodeType属性可以显示节点的类型 1表示元素节点 2表示属性节点 3表示文本节点
• nodeName属性可以显示节点的名字，显示的名字是大写形式
• nodevalue属性可以显示节点的值，元素节点没有值，显示null

2、属性节点

3、文本节点

4、节点类型、名字、值表格

三、通过文档对象方法获取节点

1、通过id属性获取节点

2、通过标签名字获取节点

3、通过类名获取节点

4、通过name属性获取节点

四、通过层级关系获取节点

1、子节点

2、父节点

3、兄弟节点

4、节点的混合操作

五、节点的其他操作

1、添加节点

2、删除节点

3、修改节点

六、自封装函数库