课程名称：前端工程师2022版
课程章节：DOM
课程讲师： elex
课程内容：
nodeName nodeType nodeValue
元素节点 标签名 1 null
属性节点 属性名 2 属性值
文本节点 #text 3 文本内容（不包含html）
节点的 nodeType 属性可以显示这个节点具体的类型
1 元素节点，例如 <p> 和 <div>
2 属性节点
3 文本节点
8 注释节点
9 document 节点
10 DTD 节点
注：
1. 文字内容，包括空白字符
2. DTD（!DOCTYPE）是一个单独节点，与 html 同级
document：
1. 访问元素节点主要依靠 document 对象
2. 几乎所有 DOM 的功能都封装在了 document 对象中
3. document 对象也表示整个 HTML 文档，他是 DOM 节点树的根
获取元素节点的方法：
id
格式：document.getElementById("id");
参数：id 标签id值（唯一的）
功能：通过 id 获取元素节点
返回值：获取的元素节点
注：存在相同 id 只获取第一个，也不允许出现相同 id
tag
格式：document/node.getElementsByTagName("tag");
参数：tag 标签名
功能：获取对应节点下所有标签名为 tag 的元素节点
返回值：HTMLCollection
class
格式：document/node.getElementsByClassName("class");
参数：class 标签的class属性值
功能：获取对应节点下所有类名为 class 的元素节点
返回值：HTMLCollection
querySelector
格式：document.querySelector("selector");
参数：selector CSS选择器
功能：通过选择器获取第一个元素节点
返回值：元素节点对象
querySelectorAll
格式：document.querySelectorAll("selector");
参数：selector CSS选择器
功能：通过选择器获取全部的元素节点
返回值：NodeList
name
格式：document.getElementsByName("name");
参数： name 属性值
功能：通过 name 属性值获取元素节点
返回值：NodeList
获取子节点：
childNodes
格式：node.childNodes;
参数：无
功能：返回所有子节点，包含元素节点和文本节点
返回值：NodeList
children
格式：node.children;
参数：无
功能：获取所有子元素节点
返回值：HTMLCollection
first(Element)Child
格式：node.first(Element)Child;
参数：无
功能：获取第一个子（元素）节点
返回值：节点对象
last(Element)Child
格式：node.last(Element)Child;
参数：无
功能：获取最后一个子（元素）节点
返回值：节点对象
获取同级节点：
next(Element)Sibling
格式：node.next(Element)Sibling;
参数：无
功能：获取下一个同级（元素）节点
返回值：节点对象
previous(Element)Sibling
格式：node.previous(Element)Sibling;
参数：无
功能：获取上一个同级（元素）节点
返回值：节点对象
获取父节点：
parentNode
格式：node.parentNode;
参数：无
功能：返回父元素节点
返回值：节点对象
获取/设置节点中内容：
innerHTML
格式：node.innerHTML（ = "str"）;
参数：str 内容字符串
功能：获取/设置标签内容，可以解析 HTML 标签
返回值：字符串类型的标签内容
innerText
格式：node.innerText（ = "str"）;
参数：str 内容字符串
功能：获取/设置标签内容，无法解析 HTML 标签
返回值：字符串类型的标签内容，纯文本不含标签
节点操作：
document.write()
将参数写入页面，解析标签
注：直接使用会覆盖页面上的所有内容
创建节点：
createElement
格式：document.createElement(tag);
参数：tag 创建的元素节点名，字符串格式
功能：创建一个元素节点
返回值：创建的元素节点
createTextNode
格式：document.createElement(text);
参数：text 创建的文本节点内容，数字类型会自动转换为字符串格式
功能：创建一个文本节点
返回值：创建的文本节点
插入节点：
appendChild
格式：node.appendChild(node2);
参数：node2 添加的节点
功能：将节点添加父节点的最后，若是已存在节点，则会清除原节点
返回值：添加的节点
insertBefore
格式：node.replaceNode(newNode, posNode);
参数：newNode 新节点，posNode 目标位置节点
功能：在目标位置节点之前插入新节点，并移除原newNode
返回值：插入的节点
删除节点：
removeChild
格式：node.removeChild(node2);
参数：node2 被清除的子节点
功能：从元素中移除子节点
返回值：被清除的子节点
替换节点：
replaceNode
格式：node.replaceNode(newNode, oldNode);
参数：newNode 新节点，oldNode 被替换的节点
功能：替换节点，并移除原 newNode
返回值：被替换的节点
outerHTML
格式：node.outerHTML（ = "str"）;
参数：str 内容字符串
功能：获取/替换节点，node 仍他在内存中保留
返回值：标签间内容，外加标签自身
注：node 不再是文档树的一部分，新段替换了它，但仍然在内存中
克隆节点：
cloneNode
格式：node.cloneNode(deep);
参数：deep 布尔值 可选，true 深克隆 ，默认 false 只克隆目标节点
功能：克隆节点（包括属性及其值），产生副本返回
返回值：克隆的节点
获取/设置属性节点：
.attr
格式：node.attr（ = "value"）;
参数：attr 属性名，如 id src style，小驼峰形式；value 设置的属性值
功能：获取/设置符合 W3C 规范的行内属性
返回值：属性值，若未设置此属性则返回 undefined
注：获取的颜色样式自动换为 rgb 形式，英文单词除外
get/setAttribute
格式：node.get/setAttribute("name"（, set下有 "value"）);
参数：name 属性名 必需，value 属性值 必需
功能：获取/设置/添加属性节点，包括自定义属性
返回值：get 下为属性值，set 下为 undefined
attributes
格式：node.attributes;
参数：无
功能：返回当前元素节点上，所有行内属性节点
返回值：属性节点集合（不重复、无序）对象
使用：node.attributes.getNamedItem("name") 或 node.attributes["name"];
注：
element.class 元素添加了个 class 属性（系统初始是不带的）
element.className 设置对应元素的 class 名（系统本身就有的）
1. className 的属性值为字符串，赋值时会覆盖之前的值
2. 可以使用 classList 属性内的方法修改类名
HTML5 添加了“data-”方式来自定义属性
data-abc-a
dateset.abcA = 属性值 获取/设置属性值
课程收获：
谢谢老师，讲的非常细致，很容易懂。
随时随地看视频
