文件对象模型 (DOM: Document Object Model)
DOM 是 W3C定义的一种访问文档的标准。
"The W3C Document Object Model (DOM) is a platform and language-neutral interface that allows programs and scripts to dynamically access and update the content, structure, and style of a document."
DOM分为三种类型：
Core DOM - 对所有类型文档的标准模型
XML DOM - 对XML文档的标准模型
HTML DOM - 对HTML 文档的标准模型
HTML DOM 是关于HTML文档的对象模型，它用一种树形结构将所有的HTML元素组织起来。
比如：
1 <html> 2 <head> 3 <title>My title</title> 4 </head> 5 <body> 6 <h1>My header</h1> 7 <a href="XXX">My link</a> 8 </body> 9 </html>
上述代码的HTML DOM结构如下：
-
访问 DOM元素
DOM 可以从任意节点开始，通过id, 标签名，类名 来定位、访问其子树中的 HTML元素
通过id 定位: var x = document.getElementById("element_id") #找到 document节点下的 id为 element_id的元素
通过标签名定位： var y=x.getElementsByTagName("p") #找到 x节点下的所有<p>标签，注意这里函数名中是 Elements
通过类名定位：var z = y.getElementsByClassName("intro") #找到 y的所有节点下的所有类名为 <intro>的元素
-
更改 DOM元素
HTML DOM将 HTML中的所有元素作为对象，定义了所有HTML元素的 内容、属性、方法、事件。
HTML DOM 定义了获取，改变，增添，删除 HTML元素的标准。
改变 HTML元素内容：
通过 innerHTML属性可以改变某个 HTML元素的内容
比如
document.getElementbyTagName('a').innerHTML = "This is my link"
将<a href="XXX">My link</a> 变成了 <a href="XXX">This is my link</a>
改变 HTML元素属性：
通过 .attribute = new value 可以改变某个 HTML元素的属性
比如
document.getElementbyTagName('a').href= "www.baidu.com"
将<a href="XXX">This is my link</a> 变成了 <a href="www.baidu.com">This is my link</a>
-
响应 DOM事件：
使HTML元素响应事件有三种方式：
1. 在 HTML中 通过事件属性填写响应函数
<a id="myButton" onclick="alert('click!')">按钮</a>
2. 通过 DOM 获取事件属性填写响应函数
document.getElementById('myButton').onclick = function(){alert('click!')}
3. 通过 DOM 设定EventListener 填写响应函数
document.getElementById('myButton').addEventListener("click",function(){alert("click!")})
| 方式1 | 直接写入HTML中，简洁 | 不能使用匿名函数或闭包 | 为同一事件设立多个响应，新的会覆盖旧的 | 不能取消事件响应 |
| 方式2 | 写在脚本中，作用域灵活 | 可以使用匿名函数、闭包 | 为同一事件设立多个响应，新的会覆盖旧的 | 不能取消事件响应 |
| 方式3 | 写在脚本中，作用域灵活 | 可以使用匿名函数、闭包 | 可以为同一事件设立多个响应且不会覆盖，并设定处理事件属于 冒泡模式/捕获模式 | 可以通过 removeEventListener取消事件响应 |
-
创建、删除 DOM元素
创建 DOM元素时，必须要依附在某个已有的DOM元素下作为其子节点
var child=document.createElement("p") var parent = decument.findElementbyTagName("body") parent.appendChild(child)
删除 DOM元素时，必须要制定所删除元素的父节点
var parent = document.findElementbyTagName("body"); var child = parent.findElementbyTagName("p"); parent.removeChild(child)