- 每一个元素就是一个节点，每一个节点就是一个对象。
- 也就是说，我们在操作元素时，其实就是把这个元素看成一个对象，然后使用这个对象的属性和方法来进行相关操作
1. 节点类型
| 节点类型 |
nodeType值 |
| 元素节点 |
1 |
| 属性节点 |
2 |
| 文本节点 |
3 |
2. 获取元素
- 准确来说：是获取元素节点，而不是属性节点和文本节点
| 方法 |
返回值类型（重要） |
| document.getElementById() |
Element 或 null |
| document.getElementsByTagName() |
HTMLCollection（类数组） |
| document.getElementsByClassName() |
HTMLCollection（类数组） |
| document.getElementsByName() |
HTMLCollection(类数组) 表单元素专用 |
| document.querySelector() |
Element 或 null |
| document.querySelectorAll() |
NodeList（类数组，可遍历） |
- 区别:
- getElementsXxx() 返回动态的 HTMLCollection
- querySelectorAll() 返回静态 的NodeList
3. 增删改元素
| 方法 |
备注 |
| document.createElement() |
创建元素 |
| document.create.TextNode() |
创建文本节点 |
| A.appendChild(B) |
添加子元素（成为最后一个子元素） |
| A.insertBefore(B,ref) |
添加子元素到ref之前 |
| A.removeChild(B) |
删除子元素 |
| A.cloneNode(true/false) |
克隆节点，默认false浅克隆，true为深克隆 |
| A.replaceChild(new,old) |
替换元素 |
4. HTML属性操作
| 方法 |
作用 |
| Node.getAttribute() 等价于Node.attr |
获取元素的属性值，
获取class应该写 .className.
获取文本框，多行文本框，单选框，复选框，下拉框的值应该写.value |
Node.setAttribute() 等价于
Node.attr = "xx" |
设置元素的属性值 |
| Node.removeAttribute("xx") |
删除元素属性 |
| Node.hasAttribute("xx") |
判断是否有xx属性，返回Boolean |
5. CSS属性操作
| 方法 |
作用 |
| getComputedStyle(Node).attr |
获取元素的css属性名attr的属性值，attr采用小驼峰命名法 |
Node.style.attr = "值" 等价于
Node.style["attr"] |
设置元素的style属性，添加的是行内样式 |
| Node.style.cssText = "值" |
设置元素的style属性，添加的也是行内样式，区别是这里的值直接写css文本，例如：background-color:red |
- 问题一：为什么不能通过
Node.style.attr和Node.style.cssText 获取CSS属性值？
- 答：
Node.style.attr 只是获取Node节点的style属性中的某项css属性(即行内样式)，至于写在css文件中的（无论是内部样式还是外部样式），都是无法获取到的。至于Node.style.cssText ，JavaScript没有这种写法。所以只能使用getComputedStyle(Node).attr 获取css属性的属性值
- 问题二：为什么使用
Node.style.attr="值" 时，attr不能使用"background-color"这种写法？
6. 其他拓展
- 用
e.target.closest('li')，从事件源开始，一层层向上查找，直到找到最近的 li 元素（如果有）：
document.getElementById('list').addEventListener('click', (e) => {
const li = e.target.closest('li');
if (li) {
console.log('点击的是 li 或它的子元素');
}
});