一、DOM
DOM 全称为 Document Object Model (文件对象模型)，而一个页面的结构是一个树形模型，我们也称之为 DOM树
1. DOM树结构：
2. 重要概念
- 事件: 用户针对浏览器的操作就会产生事件.
- 文档: 一个页面就是一个 文档, 使用 document 表示.
- 元素: 页面中所有的标签都称为 元素. 使用 element 表示.
- 节点: 网页中所有的内容都可以称为 节点(标签节点, 注释节点, 文本节点, 属性节点等). 使用 node 表示.
3. DOM 的工作流程
①代码读取到内存
②生成DOM树 （dom语法增删改查，渲染也会跟着改变）
③渲染 DOM树
二、获取/操作元素
1. 获取
① 获取单个元素
document.querySelector(‘选择器’)；
功能：根据选择器查询满足条件的第一个元素
return：DOM对象 或者 null (选择写错)
② 获取所有元素
document.querySelectorAll(‘选择器’)；
功能：根据选择器查询满足条件所有元素
return: 一定会返回伪数组 (数组可能为null ：选择器写错)
什么是伪数组：只有数组三要素（元素，下标,长度）,没有数组方法
2. 操作
1. 获取/修改元素内容
① Element.innerText
表示一个节点及其后代的“渲染”文本内容 (读取的结果不保留html源码中的 换行和空格)
② Element.innerHTML
HTML语法表示的元素元素后代，可以是本文/标题...... (读取的结果保留html源码中的 换行和空格)
3. 案例
querySelector / innerText / innerHTML的使用
<body> <div id='a'> <div id='b'>你好！</div> </div> </body> <script> // a就是quertSelector获取到的内容 let a = document.querySelector('#a'); console.log(a)//element类型 console.log(a.innerText) console.log(a.innerHTML)//String类型 </script>
button按钮点击案例
<input type="text" id="text" value="0"> <input type="button" id="btn" value="点击+1"> <script> let text = document.querySelector("#text"); let btn = document.querySelector("#btn"); btn.onclick = function(){ let num = text.value; num++; text.value = num; //text.value=text.value+1; 这样会按照字符串想加的方式，不能这样写 } </script>
三、新增元素
1. 创建元素节点
使用 createElement 创建一个元素
let element = document.creatElement('div'); div.id = 'mydiv'; div.className = 'box'; div.innerHTML = 'hehe';
2. 插入节点到 DOM树
①使用 appendChild 将节点插入到指定节点的最后一个孩子处
element.appendChild(aChild);
②使用 insertBefore 将节点插入到指定节点之前
let insertBefore = parentNod.insertBefore(newNode,referenceNode) // insertBefore ：是被插入节点(newNode) // parentNode ：新插入节点的父节点 // newNode ：用于插入的节点 // referenceNode ：newNode将要插在referenceNode节点之前
四、删除元素
使用 removeChild 删除子节点
oldChile = element.removeChile(child); // child ：待删除的节点 // element：child的父节点 // oldChile：是返回值 也就是chile这个节点 // 如果child不是element的子节点的话会抛出异常
