JavaScript基础-DOM文档对象模型
1. DOM简介
1.1 什么是DOM
DOM是文档对象模型，document是DOM的具体对象，操作网页文档找document
1.2 HTML节点树
网页文档-document
html元素节点
head元素节点 body元素节点
h1元素节点（标签上的属性id--属性节点）
文本内容--文本节点在JS中将每个节点都看做是一个对象--Node 节点
网页文档看做是--document 网页文档节点
每一个标签看做是--element 元素节点
每一个标签内的文本看做是--text 文本节点
每一个标签上的属性看做是--attribute 属性节点
2.DOM 节点操作
2.1 查询节点操作
| 方法或属性名 | 作用 |
|---|---|
| console.dir(对象名)【重点】 | 展开对象，查看所有对象属性名 |
| document.querySelector("选择器")【重点】 | 根据选择器获取匹配到的第一个元素节点 |
| document.querySelectorAll("选择器") 【重点】 | 根据选择器获取匹配到的元素节点集合，NodeList |
| document.parentNode【重点】 | 获取父节点 |
| document.children【重点】 | 获取所有的子元素节点 |
| document.nextElementSibling【重点】 | 获取下一个兄弟元素节点 |
| document.previousElementSibling【重点】 | 获取上一个兄弟元素节点 |
| 方法或属性名 | 作用 |
|---|---|
| document.getElementById("标签id") | 根据id获取第一个查找到的元素节点 |
| document.getElementsByName("标签name属性") | 根据标签上的name属性获取查找到的元素节点集合，NodeList（伪数组） |
| document.getElementsByTagName("标签名") | 根据标签名获取查找到的元素节点集合，HTMLCollection（伪数组） |
| document.getElementsByClassName("样式类名") | 根据样式类名获取查找到的元素节点集合 ，HTMLCollection（伪数组） |
| 方法名 | 作用 |
|---|---|
| 目标元素节点.append(文本节点|元素节点)【重点】 | 在目标元素节点里最后一个子节点后新增节点 |
| document.createElement('标签名')【重点】 | 根据标签名创建一个空元素节点 |
| 目标节点.remove()【重点】 | 删除指定节点 |
3.文本操作
1.node.innerHTML 可以操作纯文本和HTML结构【常用】
node.innerHTML 注意：获取的是纯文本！！！
node.innerHTML = '纯文本'
node.innerHTML = '<h1>我是标题</h1>' // 可以解析HTML标签
2.node.innerText 只能操作标签中的纯文本【不常用】
node.innerText 获取纯文本
node.innerText = '纯文本'
node.innerHTML = '<h1>我是标题</h1>' // 注意：也会被当做纯文本设置！！！
3.node.textContent 既能操作纯文本也能操作文本节点【常用】
node.textContent 获取存文本
node.textContent = '纯文本'4.属性操作
// 原生属性
node.属性名
node.属性名 = 新属性值
// 自定义属性
node.getAttribute('属性名')
node.setAttribute('新属性名', '属性值')推荐阅读：
扫描二维码，在手机上阅读