想要使用 DOM 和 JavaScript 来修改网页 .. 我们需要先理解一下 DOM 的树形结构 …. 这是一个很简单的网页 … 一组 <html> 标签 … 里面是 <head> 标签，还有 <body> 标签 … 这两个标签里还包含一点内容 …
如果使用 DOM 的树型结构来表示一下这个简单的网页应该是这样的 ….
文档的根源 … 也就是文档的 root ，是 document 这个对象 … 它表示文档本身 …
然后是 <html> 标签 … HTML 的标签在这里叫做元素，英文是 Element …. 每个元素对于这个文档来说都是一个节点 .. 英文叫 node ，节点有很多类型，比如，HTML 标签是元素节点，标签里的属性是属性节点，标签里的文字是文本节点 …
DOM 里面定义了 12 种类型的节点 .. 文档里的注释也算是一种节点 … 不过常用的就是元素，属性，还有文本类型的节点 …
html 元素下面有两个子元素 head 元素，还有 body 元素 …
对于 head 和 body 来说，html 元素是它们的父辈，也可以说是它们的父节点 parentNode …
head 元素里面有一个元素类型的子节点， 就是这个 title 元素，title 元素里面还包含一个文本节点 … Coldplay 乐队
同样， body 元素也包含一些元素类型的子节点，h1 元素，还有 p 元素 ..
这个 h1 和 p 的关系是兄弟，因为它们有一个共同的老爸，就是 body 元素 …
head 和 body 也是兄弟，它们的老爸是 html 这个元素 …
结束
了解了这些以后， 我们就可以使用 DOM 提供的方法和属性来操纵文档了，在下面的视频里我们再去看一下 ….
