DOM
DOM - Document Object Model
This model can be described as a tree structure:
Document
|
Root element:<html>
|
————————————————————————
| |
Element:<head> Element:<body>
| |
| ———————————————————
Element:<title> | |
| Element:<a> Element:<h1>
| Attribute: "href" |
| | |
Text:"my title" Text:"my link" Text:"my header"
DOM是W3C（万维网联盟）的标准，它定义了访问HTML和XML文档的标准：W3C-DOM是中立于平台和语言的接口，它允许程序和脚本动态地访问和更新文档的内容、结构和样式。
W3C-DOM分成3个不同的部分：
· 核心DOM：针对任何结构文档的标准模型
· XML DOM：针对XML文档的标准模型
· HTML DOM：针对HTML文档的标准模型
这里对HTML DOM进行详述
关于HTML DOM，它是：
· HTML的标准对象模型
· HTML的标准编程接口
· W3C标准
HTML DOM定义了所有HTML元素的对象和属性，以及访问它们的方法。
在HTML DOM中，所有事物都是节点（Node）。DOM是视为节点树的HTML。
· 整个文档是一个文档节点
· 每个HTML元素是元素节点
· HTML元素内的文本是文本节点
· 每个HTML属性是属性节点
· 注释是注释节点
HTML DOM方法和属性
HTML DOM方法是我们可以在节点上执行的动作。
HTML DOM属性是我们可以在节点设置和修改的值。
可通过JavaScript（或其他编程语言）对HTML DOM进行访问。
所有HTML元素被定义为对象，而编程接口则是对象的方法和属性。
方法是能执行的动作。属性是能够获取或设置的值。
如，一些常用的HTML DOM方法：
· getElementById
· appendChild
· removeChild
· getElementsByTagName
· getElementsByClassName
· replaceChild
· insertBefore
· createAttribute
· createTextNode
· getAttribute
· setAttribute
一些常用的HTML DOM属性：
· innerHTML – 获取元素内容
· parentNode
· childNode
· attributes
nodeName属性规定节点的名称↓↓
- nodeName只读
- 元素节点的nodeName与标签名相同
- 属性节点的nodeName与属性名相同
- 文本节点的nodeName始终是#text
- 文档节点的nodeName始终是#document
- nodeName始终包含HTML元素的大写字母标签名
nodeValue属性规定节点的值↓↓
- 元素节点的nodeValue是undefined或null
- 文本节点的nodeValue是文本本身
- 属性节点的nodeValue是属性值
nodeValue属性规定节点的值↓↓
- 元素节点的nodeValue是undefined或null
- 文本节点的nodeValue是文本本身
- 属性节点的nodeValue是属性值
<p id="intro">Hello World!</p>
<script>
x=document.getElementById("intro");
document.write(x.firstChild.nodeValue);
</script>
nodeType属性：返回节点的类型，nodeType是只读的。
比较重要的节点类型有：
元素类型 NodeType
元素 1
属性 2
文本 3
注释 8
文档 9
访问HTML元素等同于访问节点，可通过不同方式来访问HTML元素：
- getElementById()
- getElementsByTagName()：返回节点列表，为一个节点数组，如：
var x = document.getElementsByTagName(“p”);
可以通过下标访问节点，如访问第二个：y=x[1]，x.length为节点列表长度，返回的根节点不含样式，子节点包含所有的样式 - getElementsByClassName()
HTML DOM的修改=改变元素、属性、样式和事件
- 增删HTML元素
创建：追加到已有元素上<div id="div1">
<p id="p1">这是一个段落</p>
<p id="p2">这是第二段落</p>
</div>
<script>
var para = document.createElement("p");
var node = document.createTextNode("这是个新段落");
para.appendChild(node);
var ele = document.getElementById("div1");
ele.appendChild(para);
</script>
appenChild()是讲元素作为父元素的最后一个子元素进行添加，用insertBefore()插在元素前
删除：removeChild()
替换：replaceChild() - 改变HTML内容：最简单的方法是使用innerHTML属性
（除了innerHTML，还可用childNodes和nodeValue属性获取元素内容，详见参考手册）<p id="p1">Hey</p>
<script>
document.getElementById("p1").innerHTML = "新内容在这";
</script> - 改变CSS样式
<p id="p1">hey</p>
<p id="p2">world</p>
<script>
document.getElementById("p2").style.color = "blue";
document.getElementById("p2").style.fontFamily = "Arial";
document.getElementById("p2").style.fontSize = "larger";
</script> - 改变HTML元素的属性
- 改变事件
HTML DOM允许在事件发生时执行代码
当HTML元素“有事情发生”时，浏览器会生成事件：
~在元素上点击
~加载页面
~改变输入字段
e.g.<input type="button" onclick="document.body.style.backgroundColor = 'lavender';" value="修改背景颜色" />
也可以：<script>
function changeBg()
{
document.body.style.backgroundColor="lavender";
}
</script><input type="button" onclick="changeBg()" value="修改背景色" />
HTML DOM允许JavaScript对HTML事件做出反应，当事件发生时，可以执行JavaScript，如用户点击某个元素时执行代码，则把JS代码添加到HTML事件属性中：onclick=JavaScript
HTML事件例子：
~用户点击鼠标时
~网页已加载
~图片已加载
~鼠标移动到元素上
~输入字段被改变
~HTML表单被提交时
~用户触发按键时
以下两个方式等效：a) <button onclick="displayDate()">点我</button>
b) document.getElementById("myBtn").onclick = function(){dispalyDate()};
onload，onunload，onchange
用户进入或离开页面时，会触发onload和onunload事件
onload事件可用于检查方可的浏览器类型和版本，以便基于这些信息来加载不同版本的网页。
onload和onunload事件都可用于处理cookies
onchange事件常用于输入字段的验证，如：<input type="text" id="fname" onchange="upperCase()" />
HTML DOM 事件对象参考手册：
https://www.w3school.com.cn/jsref/index.asp
https://www.runoob.com/jsref/jsref-tutorial.html
DOM根节点的两个特殊属性可以访问全部文档
~ document.documentElement 全部文档
~ document.body 文档主体
