DOM
document是载入窗口的实际页面，在JavaScript中用Document对象表示。通过这个对象能够完成的功能包括：
0. 查找HTML元素
- JS能改变页面中的所有HTML元素内容
- JS能改变页面中的所有HTML元素属性
- JS能改变页面中的所有CSS样式
- JS提供事件响应
- 添加或删除HTML元素
文档对象模型由“树结构”表示：
graph TD
A[文档document] --> B(根元素html)
B -->D[元素<head>]
B -->E[元素<body>]
D-->F[元素<title>]
E-->C[元素<a>]
E-->I[元素<h1>]
复制代码相关术语：
- 元素节点：DOM中的一个一般元素
- 根节点：DOM树中的顶层节点，HTML文档的情况下是
<html> - 子节点：直接位于另一个节点内的节点
- 后代节点：位于另一个节点内任意位置的节点
- 父节点：..
- 兄弟节点：DOM树中位于同一等级的节点
- 文本节点：包含文字串的节点
查找HTML元素
- 通过id找到HTML元素(getElementById)
- 通过标签名找到HTML元素(getElementByTagName)
- 通过类名找到HTML元素()
- Document.querySelector()，匹配在文档中遇到的第一个元素
- Document.querySelectorAll()，匹配文档中每个匹配的元素，并把它们的引用存储在一个array中
改变HTML
- 直接向HTML输出流写内容
document.write() - 改变HTML内容
document.getElementById().innerHTML=value - 改变HTML元素的属性
document.getElementById().attribute=value document.getElementById().setAttribute('class','highlight')
改变HTML样式
语法：document.getElementById().style.property=new style
创建与删除
- 创建元素：
var para=document.createElement("p") - 创建文本节点：
var node=document.createTextNode - 追加文本节点：
para.appendChild(node) - 从父元素中删除子元素：
parent.removeChild(child) - 使用parentNode:
child.parentNode.removeChild(child)