JS学习笔记：DOM编程笔记

JS学习笔记：DOM编程笔记

1.什么是DOM编程（HTML DOM）

当网页被加载时，浏览器会创建页面的文档对象模型（Document Object Model）。通过 JavaScript对HTML文档的所有元素进行增删改查。

2.为什么要学习DOM编程？

学习DOM编程就可以对网页中的标签/节点进行操作，来达到我们想要的效果。

3.DOM编程基操

3.1节点操作

3.1.1什么是节点

• 整个文档是一个文档节点
• 每个 HTML 元素是元素节点
• HTML 元素内的文本是文本节点
• 每个 HTML 属性是属性节点
• 注释是注释节点

3.1.2节点具有的属性

名称	含义
childNodes	所有子节点（文本节点）
children	所有元素子节点——获取所有的子标签
firstElementChild	第一个元素节点
firstChild	第一个子节点
lastElementChild	最后一个元素节点
lastChild	最后一个子节点
parentNode	父节点
nextSibling	返回当前元素紧跟的下一个同级节点(包含文本/标签等)
nextElementSibling	返回指定元素之后的下一个兄弟元素节点（相同节点树层中的下一个元素节点）。
previousSibling	返回当前元素上一个节点紧挨着的
previousElementSibling	返回指定元素的前一个兄弟元素（相同节点树层中的前一个元素节点）
value	文本框的value值
id	标签的id属性值
name	表单元素的name属性值
className	class属性值
innerHTML	标签中的所有内容(包含标签)
outerHTML	包含标签本身以及标签体
innerText	标签中的所有文本内容(不包含标签本身)
getAttribute(“属性名”)	获取标签属性
setAttribute(“属性名”,“属性值”)	为标签设置属性

名称	含义
nodeValue	节点值 （文本节点的值）
nodeType	节点类型。1标签节点 2 属性节点 3文本节点
nodeName	节点名称
nodeValue	节点值 （文本节点的值）
nodeType	节点类型。1标签节点 2 属性节点 3文本节点
nodeName	节点名称

3.1.3DOM节点的基本操作

3.1.3.1增加操作

名称	含义
document.createElement(标签名)	创建一个节点
insertBefore(新标签,哪个标签之前)	在哪个标签之前插入节点
父.appendChild(新标签)	在父节点的里边追加子节点
cloneNode()	复制节点，如果参数为true，还会复制当前节点的子孙节点，否则只复制当前节点。

3.1.3.2删除操作

名称	含义
document.createElement(标签名)	创建一个节点
insertBefore(新标签,哪个标签之前)	在哪个标签之前插入节点
父.appendChild(新标签)	在父节点的里边追加子节点
cloneNode()	复制节点，如果参数为true，还会复制当前节点的子孙节点，否则只复制当前节点。

3.1.3.3修改操作

名称	含义
parent.replaceChild(新标签, 旧标签);	将父标签中的旧标签用新标签替换掉