1. DOM介绍
DOM：文档对象模型（Document Object Model）
对于最顶层的html、head、body元素，我们可以直接在document对象中获取到：
- html元素：<html> = document.documentElement
- body元素：<body> = document.body
- head元素：<head> = document.head
- 文档声明：<!DOCTYPE html> = document.doctype
2. 节点和元素
节点是 HTML 文档中的一种基本类型，它可以是元素节点、文本节点、注释节点等。
元素是节点的一种，它是 HTML 文档中具有标签和属性的部分，如<div>、<p>、<span>等。
元素节点是节点类型中最常见的类型之一，它是由标签和标签内的内容构成的。
节点导航
- 父节点：parentNode
- 前兄弟节点：previousSibling
- 后兄弟节点：nextSibling
- 子节点：childNodes
- 第一个子节点：firstChild
- 第二个子节点：lastChild
// 例子
// 1. 获取body所有的子节点
console.log(bodyEl.childNodes)
// 2. 获取body的第一个子节点
console.log(bodyEl.firstChild)
// 3. 获取body的注释
console.log(bodyEl.firstChild.nextSibling)
// 4. 获取body的父节点
console.log(bodyEl.parentNode)
table中的额外导航
-
<table> 元素支持 (除了上面给出的，之外) 以下这些属性：
- table.rows — <tr> 元素的集合；
- table.caption/tHead/tFoot — 引用元素 <caption>，<thead>，<tfoot>；
- table.tBodies — <tbody> 元素的集合；
-
<thead>，<tfoot>，<tbody> 元素提供了 rows 属性：
- tbody.rows — 表格内部 <tr> 元素的集合；
-
<tr>：
- tr.cells — 在给定 <tr> 中的 <td> 和 <th> 单元格的集合；
- tr.sectionRowIndex — 给定的 <tr> 在封闭的 <thead>/<tbody>/<tfoot> 中的位置（索引）；
- tr.rowIndex — 在整个表格中 <tr> 的编号（包括表格的所有行）；
-
<td> 和 <th>：
- td.cellIndex — 在封闭的 <tr> 中单元格的编号。
form元素的额外导航
<form>元素可以直接通过document:来获取：document.forms
<form>元素中的内容可以通过elements来获取：form.elements
var formEl = document.forms[0]
var elements = formEl.elements
3. 元素导航
- 父元素：parentElement
- 前兄弟节点：previousElementSibling
- 后兄弟节点：nextElementSibling
- 子节点：children
- 第一个子节点：firstElementChild
- 第二个子节点：lastElementChild
4. 元素选择
5. 节点属性
5.1 nodeType属性：
其他类型可以查看MDN文档：https://developer.mozilla.org/zh-CN/docs/Web/API/Node/nodeType
5.2 nodeName、tagName
nodeName：获取node节点的名字；
tagName：获取元素的标签名词；
tagName 和 nodeName 之间有什么不同呢？
tagName 属性仅适用于 Element 节点；
nodeName 是为任意 Node 定义的：
✓ 对于元素，它的意义与 tagName 相同，所以使用哪一个都是可以的；
✓ 对于其他节点类型（text，comment 等），它拥有一个对应节点类型的字符串；
5.3 innerHTML、textContent
- innerHTML 属性
1.1 将元素中的 HTML 获取为字符串形式；
1.2 设置元素中的内容； - outerHTML 属性
2.1 包含了元素的完整 HTML
2.2 innerHTML 加上元素本身一样； - textContent 属性
3.1 仅仅获取元素中的文本内容； - innerHTML和textContent的区别：
4.1 使用 innerHTML，我们将其“作为 HTML”插入，带有所有 HTML 标签。
4.2 使用 textContent，我们将其“作为文本”插入，所有符号（symbol）均按字面意义处理。
5.4 nodeValue/data
用于获取非元素节点的文本内容
5.5 其他属性
hidden属性：也是一个全局属性，可以用于设置元素隐藏。
value: <input>，<select> 和 <textarea>的 value。
href: a标签的href
id
6.元素属性
6.1 attribute
- 标准的attribute：某些attribute属性是标准的，比如id、class、href、type、value等；
- 非标准的attribute：某些attribute属性是自定义的，比如abc、age、height等；
对attribute的操作
- elem.hasAttribute(name) — 检查特性是否存在。
- elem.getAttribute(name) — 获取这个特性值。
- elem.setAttribute(name, value) — 设置这个特性值。
- elem.removeAttribute(name) — 移除这个特性。
- attributes：attr对象的集合，具有name、value属性；
attribute具备以下特征：
- 它们的名字是大小写不敏感的（id 与 ID 相同）。
- 它们的值总是字符串类型的。
6.2 property
对于标准的attribute，会在DOM对象上创建与其对应的property属性：
在大多数情况下，它们是相互作用的
- 改变property，通过attribute获取的值，会随着改变；
- 通过attribute操作修改，property的值会随着改变；
- 但是input的value修改只能通过attribute的方法；
除非特别情况，大多数情况下，设置、获取attribute，推荐使用property的方式：
这是因为它默认情况下是有类型的；
6.3 HTML5的data-*自定义属性
习HTML5的data-*自定义属性，那么它们也是可以在dataset属性中获取到的：
7.js动态修改样式
选择一：在CSS中编写好对应的样式，动态的添加class(推荐)；
元素的class attribute，对应的property并非叫class，而是className：
我们可以对className进行赋值，它会替换整个类中的字符串。
如果我们需要添加或者移除单个的class，那么可以使用classList属性。
elem.classList 是一个特殊的对象：
- elem.classList.add (class) ：添加一个类
- elem.classList.remove(class)：添加/移除类。
- elem.classList.toggle(class) ：如果类不存在就添加类，存在就移除它。
- elem.classList.contains(class)：检查给定类，返回 true/false。
classList是可迭代对象，可以通过for of进行遍历。
选择二：动态的修改style属性；
如果需要单独修改某一个CSS属性，那么可以通过style来操作：
- 对于多词（multi-word）属性，使用驼峰式 camelCase
- 如果我们将值设置为空字符串，那么会使用CSS的默认样式：
- 多个样式的写法，我们需要使用cssText属性：
不推荐这种用法，因为它会替换整个字符串；
元素style的读取 - getComputedStyle
如果我们需要读取样式：
- 对于内联样式，是可以通过style.*的方式读取到的;
- 对于style、css文件中的样式，是读取不到的；
