概要
DOM
The <a href="https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model">Document Object Model (DOM)** </a>is a programming interface for HTML, XML and SVG documents. It provides a structured representation of the document (a tree) and it defines a way that the structure can be accessed from programs so that they can change the document structure, style and content. The DOM provides a representation of the document as a structured group of nodes and objects that have properties and methods. Nodes can also have event handlers attached to them, and once that event is triggered the event handlers get executed. Essentially, it connects web pages to scripts or programming languages.
- document：文档
- object：对象，包括用户定义对象，内建对象，宿主对象，而DOM主要是讨论document对象
- model：模型，类似家族树
Node
- element node（元素节点）：如果把web上的文档比作一座大厦，这些元素在文档中的布局形成了文档的结构
- text node（文本节点）：文本节点总是被包含在元素节点的内部，但并非所有的元素节点都包含有文本节点
- attribute node（属性节点）：属性节点用来对元素做出更具体的描述。例如，几乎所有的元素都有一个title属性，而我们可以利用这个属性对包含在元素里的东西做成准确的描述
- 每一个节点都是对象
Method
获取元素
- getElementById：这个调用将返回一个对象，这个对象对应着document对象里的一个独一无二的元素
- getElementsByTagName：利用这个方法会返回一个对象数组，每个对象分别对应着文档里有着给定标签的一个元素
- getElemenstByClassName：与getElementsByTagName方法类似，getElemen tsByClassName也只接受一个参数，就是类名，返回值是一个具有相同类名的元素的数组
getElementsByClassName方法非常有用，但只有较新的浏览器才支持，为了弥补不足，可以用下面的DOM方法来实现自己的getElementByClassName。
获取和设置属性
- getAttritube：getAttribute方法不属于document对象，所以不能通过document对象调用。它只能通过元素节点对象调用
- setAttribute：它允许我们队属性节点的值做出修改，同样它也只能用于元素节点。它做出的修改不会反映在文档本身的源代码里
