DOM 基本概念
DOM 全称为 Document Object Model，就是文档对象模型。html 的每个标签都可以映射到 js 中的一个对应对象上。
DOM 树
一个页面的结构是一个树形结构, 称为 DOM 树 . 树形结构在数据结构阶段会介绍. 就可以简单理解成类似于 " 家谱 " 这种结构。
页面结构形如：
DOM 树结构形如：
概念:
文档: 一个页面就是一个 文档 , 使用 document 表示 .
元素: 页面中所有的标签都称为 元素 . 使用 element 表示 .
节点: 网页中所有的内容都可以称为 节点 ( 标签节点 , 注释节点 , 文本节点 , 属性节点等 ). 使用 node 表示.
这些文档等概念在 JS 代码中就对应一个个的对 象. 所以也叫 "文档对象模型" .
获取元素
querySelector（CSS 选择器）
使用 querySelector 能够完全复用 CSS 的选择器知识, 达到更快捷更精准的方式获取到元素对象.
selectors 包含一个或多个要匹配的选择器的 DOM 字符串 DOMString 。 该字符串必须是有效的CSS选择器字符串；如果不是，则引发 SYNTAX_ERR 异常；
表示文档中与指定的一组CSS 选择器匹配的第一个元素的 html 元素 Element 对象；
如果需要与指定选择器匹配的所有元素的列表，则应该使用 querySelectorAll()；
可以在任何元素上调用，不仅仅是 document 。 调用这个方法的元素将作为本次查找的根元素。
<div class="box">abc</div>
<div id="id">def</div>
<h3><span><input type="text"></span></h3>
<script>let elem1 = document.querySelector('.box');console.log(elem1);let elem2 = document.querySelector('#id');console.log(elem2);let elem3 = document.querySelector('h3 span input');console.log(elem3);
</script> 正因为参数是选择器, 所以一定要通过特殊符号指定是哪种选择器 . 例如 .box 是类选择器 , #star 是 id 选择器 等 .
事件
时间就是针对用户的操作进行一些相应。要能够和用户交互，就得先知道用户干了啥，用户做的一些动作，会在浏览器中产生一些事件（鼠标点击、按下键盘、调整浏览器窗口等），然后代码就需要针对这些事件作出反应。
事件三要素
1. 事件源 : 哪个元素触发的
2. 事件类型 : 是点击 , 选中 , 还是修改 ?
3. 事件处理程序 : 进一步如何处理 . 往往是一个回调函数 .
就像一放学回家，老妈（事件源）就一脸严肃坐在沙发上盯着我（事件类型），我这时就紧张地回忆我犯了什么事，是考试不及格还是偷偷吃辣条（事件处理程序）。
<button id="btn">点我一下</button>
<script>let btn = document.getElementById('btn');btn.onclick = function () {alert("hello world");}
</script> btn.onclick = function() 这个操作称为 注册事件 / 绑定事件，即直接在元素使用 onXXX 这样的方法来绑定一个事件处理程序
操作元素
获取/修改元素内容
使用 innerHTML 属性就能拿到元素里面的内容（开始标签 和 结束标签 夹着的内容），修改这个属性，就会影响到界面的显示。
<div><span>hello world</span><span>hello world</span>
</div>
<script>let div = document.querySelector('div');// 读取页面内容console.log(div.innerHTML);// 修改页面内容div.innerHTML = '<span>hello js</span>'
</script> 可以看到 innerHTML 不光能获取到页面的 html 结构 , 同时也能修改结构 . 并且获取到的内容保留的空格和换行.
获取/修改元素属性
<img src="rose.jpg" alt="这是一朵花" title="玫瑰花">
<script>let img = document.querySelector('img');img.onclick = function () {img.src = '蔡徐坤.jpg';}
</script> 此时点击图片就可以切换图片显示状态 . ( 需要提前把两个图片准备好 )
获取/修改表单元素属性
表单 ( 主要是指 input 标签，是一个单标签 ) 的以下属性都可以通过 DOM 来修改
value: input 的值 .
disabled: 禁用
checked: 复选框会使用
selected: 下拉框会使用
type: input 的类型 ( 文本 , 密码 , 按钮 , 文件等 )
<input type="text"><button>密码显示 / 隐藏</button> <script>let input = document.querySelector('input');let button = document.querySelector('button');button.onclick = function() {if (input.type == 'text') {input.type = 'password';button.innerHTML = '显示密码';} else {input.type = 'text';button.innerHTML = '隐藏密码';}}</script>获取/修改样式属性
1. 修改内联样式（修改 style 属性的值）
<div style="font-size: 20px; font-weight: 700;">哈哈
</div>
<script>let div = document.querySelector('div');div.onclick = function () {var curFontSize = parseInt(this.style.fontSize);curFontSize += 10;this.style.fontSize = curFontSize + "px";}
</script>每次点击，哈哈 字体都会变大。
2. 修改元素应用的 CSS 类名
<div class="dark">hello world</div><style>.light {/* 日间模式 */color: black;background-color: white;}.dark {/* 夜间模式 */color: white;background-color: black;}</style><script>let div = document.querySelector('div');div.onclick = function() {// 点击 div 切换日间模式和夜间模式if (div.className == 'dark') {div.className = 'light';} else {div.className = 'dark';}}</script>切换日间 / 黑夜模式
操作节点
新增节点
1. 创建一个元素
<div class="container">
</div>
<script>let div = document.createElement('div');div.id = 'mydiv';div.className = 'box';div.innerHTML = 'hehe';console.log(div);
</script> 此时发现, 虽然创建出新的 div 了 , 但是 div 并没有显示在页面上 . 这是因为新创建的节点并没有加入到 DOM 树中
2. 把这个元素放到 DOM 树中
<div class="container">
</div>
<script>let div = document.createElement('div');div.id = 'mydiv';div.className = 'box';div.innerHTML = 'hehe';var container = document.querySelector('.container');container.appendChild(div);
</script>删除节点
<ul><li>11</li><li>22</li></ul><script>let ul = document.querySelector('ul');for (let n = 3; n < 10; n++) {let li = document.createElement('li');li.innerHTML = n + '' + n;ul.appendChild(li);}// 删除 33 这个元素let toDelete = document.querySelectorAll('li')[2];console.log(toDelete);ul.removeChild(toDelete);</script>
)
