JavaScript入门系列目录
- JavaScript入门①-基础知识筑基
- JavaScript入门②-函数(1)基础{浅出}
- JavaScript入门③-函数(2)原理{深入}执行上下文
- JavaScript入门④-万物皆对象:Object
- JavaScript入门⑤-欲罢不能的对象、原型与继承
- JavaScript入门⑥-WEB浏览器API
- JavaScript入门⑦-DOM操作大全
- JavaScript入门⑧-事件总结大全
- JavaScript入门⑨-异步编程●异世界之旅
- JavaScript入门⑩-ES6归纳总结
01、DOM(document)
DOM（Document Object Model）文档对象模型，将文档document解析为一个由节点和对象（包含属性和方法的对象）组成的逻辑树，每个节点都是一个对象，document 对象就是整个DOM树的根节点。DOM提供的API方法用来管理这棵树，用JavaScript 等脚本语言操作文档结构、样式和内容。
1.1、DOM结构-节点/元素
DOM树是由很多节点构成，分为下面几种类型，注意节点是包含文本、注释的。
| 节点类型 | 描述 | 示例 |
|---|---|---|
document文档节点 |
document文档本身，DOM的入口（根） |
document |
element元素节点 |
所有HTML元素Element /ˈelɪmənt/ i |
html、body、a、p |
attribute属性节点 |
元素的属性 | id、name、href、class |
| 文本节点 | 元素内的文本形成文本节点 | 文本字符、换行、空格 |
| 注释节点 | 注释 | <!--注释--> |
一颗完整的DOM树，除了显而易见的元素，还有注释、换行符构成的文本类节点。
<!DOCTYPE HTML>
<html>
<body>
The truth about elk.
<ol>
<li>An elk is a smart</li>
<!-- comment -->
<li>...and cunning animal!</li>
</ol>
</body>
</html>
当前选择元素
$0：在浏览器控制台中，$0标识当前选中的元素。$0.style.background='red';
节点和元素在DOM树上的不同视图（导航方式）如下图，现代JS中主要使用元素导航属性。
| ✅节点-导航属性 | 描述 | ✅元素-导航属性 | 描述 |
|---|---|---|---|
parentNode |
父节点 | parentElement |
父元素，一般和parentNode一样，只有document.documentElement不同 |
firstChild |
第一个子节点 | firstElementChild |
第一个子元素 |
lastChild |
最后一个子节点 | lastElementChild |
最后一个子元素 |
childNodes |
子节点集合 | children |
子元素集合 |
nextSibling |
下一个兄弟节点 | nextElementSibling |
下一个兄弟元素（ Sibling/ˈsɪblɪŋ/ 兄弟） |
previousSibling |
上一个兄弟节点 | previousElementSibling |
上一个兄弟元素（/ˈpriːviəs/以前 ） |
document.documentElement.parentNode; //HTMLDocument
document.documentElement.parentElement; //null
document.body.childNodes.length; //33
document.body.children.length; //16
document.body.firstElementChild;
❓元素节点：这里的导航属性都是只读的，不可用于插入、修改元素；都是实时的；集合是可迭代的，用
for..of，不要用for(in)
1.2、节点Node/元素Element
节点/元素的继承层次结构如下，最基础的EventTarget 又继承自Object，因此可以自由添加属性、方法。
- EventTarget：—— 是一切的根（“抽象（abstract）”类），定义了基础的事件。
- Node：也是一个“抽象”类，充当 DOM 节点的基础，提供了节点导航功能，如parentNode，nextSibling，childNodes 等。
- Document：表示整个文档，全局变量
document就是他。 - CharacterData：一个文本“抽象”类，被Text（文本节点） 、Comment （注释节点）继承。（Character/ˈkærəktər/ 符号文字）
- Element：是 DOM 元素的基础类，提供了元素导航功能，如nextElementSibling，children等，以及搜索方法
getElementsByTagName和querySelector等。 - HTMLElement：所有 HTML 元素的基础类，常用的如：HTMLInputElement、HTMLBodyElement、HTMLAnchorElement、HTMLDivElement、HTMLTableElement
document.body.querySelector("div").constructor.name; //HTMLDivElement
document.body.querySelector("div").toString(); //[object HTMLDivElement]