DOM速成
DOM速成（Crash Course For Beginners）。教程视频地址：DOM速成。
准备
- 浏览器：Google Chrome（多浏览器测试）
- 编辑器：Visual Studio Code
什么是DOM
各部分作用：
- HTML： structure
- CSS： style
- JS： function
JavaScript DOM：DOM（Document Object Model），文本对象模型。
DOM结构：树状结构。
有用的插件：Chrome浏览器的HTML Tree Generator插件。
选择
新建HTML、CSS文件，浏览器打开，在开发者界面控制台输入document，返回整个HTML内容。
通过document选取HTML里面的一些东西（Elements）：document.getElementsByTagName("body")。
获取第一个body，数组实现：document.getElementsByTagName("body")[0]。
获取长度：document.getElementsByTagName("body").length。
通过类名获取：document.getElementsByClassName("list")。
通过ID获取：document.getElementById("title")。（注意是element是单数，因为ID具有唯一性）。
Query选择：
（CSS选择器）
document.querySelector("li")：从上到下，选择第一个找到的。document.querySelectorAll("li")选择所有。- 选择
ul下的li：document.querySelector("ul li")。 - 使用ID的方式：
document.querySelectorAll("#sp-list li")。 - 使用ID和类：
document.querySelectorAll("#sp-list li.list")。
选择之后做什么
改CSS样式：document.querySelector("h1").style.color="red"。可以几乎更改所有CSS属性。但是CSS中属性的命名方式是加短横线-，JavaScript DOM中一般是驼峰命名法。
参考网址：HTML DOM Style Object。
用变量存储下来：var title = document.querySelector("h1");，然后更改title.style.backgroundColor="white";。
添加class：原本HTML文件的标签没有class，但是CSS里面有class的样式。通过DOM选择该标签，然后为改标签添加class，HTML就会使用CSS中已经有的对应该class的样式。document.querySelector("h1").classList.add("title");。remove移除。
点击按钮，标题变红色：document.querySelector("h1").classList.toggle("title");，document.querySelector("button").addEventListener("click",function(){document.querySelector("h1").classList.toggle("title");});。
改文本内容：document.querySelector("h1").innerHTML="Goodbye";。加着重表示：document.querySelector("h1").innerHTML="<em>Goodbye</em>";。直接返回内容：document.querySelector("h1").innerHTML;。（会同时返回HTML标签）不返回HTML标签：document.querySelector("h1").textContent;。
属性attribute：document.querySelector("li").attributes;。如果只需要某一个属性：document.querySelector("ul").getAttribute("class");。改某一个属性：document.querySelector("li").attributes.class.value="title";。设置（添加）一个属性：document.querySelector("h1").setAttribute("class","title");。
使用的HTML文件：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>Hello</h1>
<button>Click me</button>
<ul id="sp-list" class="list">
<li class="list">First</li>
<li class="list">Second</li>
<li>Third</li>
</ul>
</body>
</html>使用的CSS文件：
li.list{
background-color: red;
}
.title{
color: red;
}文档：DOM。
