DOM树

DOM 是 Document Object Model（文档对象模型）的缩写
根据 W3C 的 HTML DOM 标准，HTML 文档中的所有内容都是节点：

• 整个文档是一个文档节点
• 每个 HTML 元素是元素节点
• HTML 元素内的文本是文本节点
• 每个 HTML 属性是属性节点
• 注释是注释节点

HTML DOM 将 HTML 文档视作树结构。这种结构被称为节点树：
一些常用的 HTML DOM 方法：

• getElementById(id) - 获取带有指定 id 的节点（元素）
• appendChild(node) - 插入新的子节点（元素）
• removeChild(node) - 删除子节点（元素）

一些常用的 HTML DOM 属性：

• innerHTML - 节点（元素）的文本值
• parentNode - 节点（元素）的父节点
• childNodes - 节点（元素）的子节点
• attributes - 节点（元素）的属性节点

节点类型分为元素节点、文本节点和属性节点

获取元素节点有4种方法，分别通过元素ID，标签名字，类名和css选择器来获取。
元素ID
document.getElementById(“car”);

标签名字
document.getElementsByTagName(“li”);

类名
document.getElementsByClassName(“sale”);

CSS选择器
还有html5中新增的两个方法，让我们可以用css选择器的方法来选择DOM节点，这两个方法必须在IE8以上的现代浏览器中才能使用。
第一个方法是返回了单个节点，如果有多个匹配元素就只返回第一个，如果找不到匹配就返回null。
第二个方法是返回一个节点列表集合。参数则都为CSS选择器字符串：
document.querySelector(“#foo");
document.querySelectorAll(“.bar");