DOM概述
DOM是Document Object Model的缩写，由W3C进行标准化。
DOM 定义了访问 HTML 和 XML 文档的标准：
“W3C 文档对象模型 （DOM） 是中立于平台和语言的接口，它允许程序和脚本动态地访问和更新文档的内容、结构和样式。”
W3C DOM 标准被分为 3 个不同的部分：
- 核心 DOM - 针对任何结构化文档的标准模型
- XML DOM - 针对 XML 文档的标准模型
- HTML DOM - 针对 HTML 文档的标准模型
DOM节点
下图是一个节点数
DOM一共有12种节点类型，但是很多只和XML关联，下表是HTML和DOM关联的节点。
| 类型 | 描述 | 举例 |
|---|---|---|
| 元素 | HTML 元素 | <p>……</p> |
| 属性 | HTML元素的一个属性 | text-align=“center” |
| 文本 | HTML 元素内的文本 | 啦啦啦啦啦 |
| 注释 | HTML注释 | <!--注释--> |
| 文档 | 跟文档对象，即树中的顶层元素 | <html> |
| 文档类型 | 文档类型定义 | <！DOCTYPE html> |
<!DOCTYPE html>
<html>
<head>
<title>DOM</title>
</head>
<body>
<h1>DOM</h1>
<p>这是一个<em>p</em>元素</p>
<!--这是一个注释节点-->
</body>
</html>
对于以上代码的分析：
- 父节点拥有子节点。同级的子节点被称为同胞（兄弟或姐妹。比如
<h1>和<p>就是同胞节点，同时也是<body>的子节点。 - 在节点树中，顶端节点被称为根（root）。
<html>节点没有父节点；它是根节点。 - 一个节点可拥有任意数量的子节点。
- 同胞是拥有相同父节点的节点。
<p>元素有三个子树，两个文本树和一个<em>子树。第一个子树是“这是一个”，最后一个子树是“元素”。- 文本“p”是
<em>的子树，但是不是<p>的直接子树。
DOM方法
方法是可以在节点上执行的动作。
所有 HTML 元素被定义为对象，而编程接口则是对象方法和对象属性。
方法是能够执行的动作（比如添加或修改元素）。
属性是能够获取或设置的值（比如节点的名称或内容）。
一些 DOM 对象方法
| 方法 | 描述 |
|---|---|
| getElementById() | 返回带有指定 ID 的元素。 |
| getElementsByTagName() | 返回包含带有指定标签名称的所有元素的节点列表（集合/节点数组）。 |
| getElementsByClassName() | 返回包含带有指定类名的所有元素的节点列表。 |
| appendChild() | 把新的子节点添加到指定节点。 |
| removeChild() | 删除子节点。 |
| replaceChild() | 替换子节点。 |
| insertBefore() | 在指定的子节点前面插入新的子节点。 |
| createAttribute() | 创建属性节点。 |
| createElement() | 创建元素节点。 |
| createTextNode() | 创建文本节点。 |
| getAttribute() | 返回指定的属性值。 |
| setAttribute() | 把指定属性设置或修改为指定的值。 |
用getElementById示例
<p id="kkk">Hello World!</p>
<script>
x=document.getElementById("kkk");
document.write("<p>文本：" + x.innerHTML + "</p>");
</script>
innerHTML是一种属性。
nodeName 属性规定节点的名称
元素节点的 nodeName 与标签名相同
属性节点的 nodeName 与属性名相同
文本节点的 nodeName 始终是 #text
文档节点的 nodeName 始终是 #document
nodeValue 属性规定节点的值
元素节点的 nodeValue 是 undefined 或 null
文本节点的 nodeValue 是文本本身
属性节点的 nodeValue 是属性值
例如
<p id="intro">Hello World!</p>
<script>
x=document.getElementById("intro");
document.write(x.firstChild.nodeName);
</script>
此时页面的第二行是#text
将document.write(x.firstChild.nodeName);改成document.write(x.firstChild.nodeValue);以后
页面的第二行是：Hello World！
nodeType 属性返回节点的类型
nodeType 是只读的。
比较重要的节点类型有：
| 元素类型 | NodeType |
|---|---|
| 元素 | 1 |
| 属性 | 2 |
| 文本 | 3 |
| 注释 | 8 |
| 文档 | 9 |
节点的创建
用来创建节点的DOM方法
| 方法 | 描述 | 举例 |
|---|---|---|
| createComment(string) | 创建一个注释节点 | myComment=document.createComment(“这是一个注释”); |
| createElement() | 创建一个元素节点 | myh1=document.createElement(“h1”); |
| createTextNode() | 创建一个文本节点 | myComment=document.createComment(“这是一个注释”); |
| createElement() | 创建一个元素 | myh1=document.createElement(“h1”); |
追加、修改、删除等
<input type="button" onclick="document.body.style.backgroundColor='blue';"
value="改变背景颜色" />
//当点击按钮“改变背景颜色”时，背景颜色会变成蓝色
<p id="p1">Hello world!</p>
<p id="p2">Hello world!</p>
<script>
document.getElementById("p2").style.color="blue";
</script>
或者可以搭配按钮的onclick以及函数使用
<p id="p1">Hello world!</p>
<script>
function ChangeText()
{document.getElementById("p1").innerHTML="New text!";}
</script>
<input type="button" onclick="ChangeText()" value="点我">
点击之前：
点击之后：
追加
<script>
var para=document.createElement("p");
var node=document.createTextNode("This is new.");
para.appendChild(node);
//appendChild意思为，在para节点的结尾添加node字符串
var element=document.getElementById("div1");
//查找到一个已有元素（必须向已有元素追加新元素）
element.appendChild(para);
//追加
</script>
删除
注意：在删除子元素之前，必须清楚父元素。（a，b，c行不可以不写，删除了以后p2就不会被删除掉。）
<div id="div1"><!--a行-->
<p id="p1">这个会被留下.</p>
<p id="p2">这个会被删除</p>
</div><!--b行-->
<script>
var parent=document.getElementById("div1");//c行
var child=document.getElementById("p2");
parent.removeChild(child);
</script>
修改
document.getElementById("p2").style.color="blue";
//把id为p2的元素改为蓝色
document.getElementById(“p2”).style.fontFamily=“Arial”;
//修改字体
上面是一些简单的改变html的样式的
还有一些复杂一点的，比如修改已有的网页内容
<div id="div1">
<p id="p1">这行不会被显示</p>
<p id="p2">这行不会改变</p>
</div>
<script>
var parent=document.getElementById("div1");
//查找id为div1的父元素
var child=document.getElementById("p1");
//查找到id为p1的子元素
var text=document.createElement("p");
//创建一个p元素
var text1=document.createTextNode("这是新增的");
//创建一个内容为“这是新增的”的文本节点
text.appendChild(text1);
//把文本节点添加到p元素节点后
parent.replaceChild(text,child);
//用text替换子元素里的内容
</script>
事件
当事件发生的时候，dom可以执行JavaScript
<h1 onclick="this.innerHTML='已点'">点我</h1>
当点击“点我”以后，屏幕上的文字会刷新为“已点”
复杂一点的可以调用函数：
<h1 onclick="change(this)">点我</h1>
<script>
function change(id)
{id.innerHTML="已点";}
</script>
onload 和 onunload 事件
因为目前用不上，所以完全复制了W3School的话
当用户进入或离开页面时，会触发 onload 和 onunload 事件。 onload
事件可用于检查访客的浏览器类型和版本，以便基于这些信息来加载不同版本的网页。 onload 和 onunload 事件可用于处理cookies。
onmouseover 和 onmouseout 事件
onmouseover用于鼠标移动到元素上时触发的函数。onmouseout用于鼠标指针离开元素时触发函数。
<p onmouseover="mouseon(this)" onmouseout="mouseout(this)" >
用鼠标碰一下这行字有惊喜
</p>
<script>
function mouseOn(text)
{
text.innerHTML="骗你的"
document.body.style.color='blue';
}
function mouseOut(text)
{text.innerHTML="这次绝对有惊喜！！！"}
</script>
onmousedown、onmouseup
首先当某个鼠标按钮被点击时，触发 onmousedown 事件，然后，当鼠标按钮被松开时，会触发 onmouseup事件，当鼠标点击完成时，触发 onclick 事件。
<div onmousedown="mouseDown(this)" onmouseup="mouseUp(this)" id="text" style="width:70px;height:100px;" οnclick="alert('真的背完了吗')">
背一下课文
</div>
<script>
function mouseDown(text)
{
text.style.backgroundColor="#1ec5e5";
text.innerHTML="先帝创业未半而中道崩殂今天下三分益州疲弊此诚危急存亡之秋也"
}
function mouseUp(text)
{text.innerHTML="背完了吗"}
</script>
DOM导航
根节点
document.documentElement - 全部文档
document.body - 文档的主体
<p>Hello World!</p>
<script>
alert(document.body.innerHTML);
</script>
试了一下，不能把alert改成document.write，否则会
节点列表
getElementsByTagName() 方法返回节点列表。节点列表是一个节点数组。
<p>第一个</p>
<p>第二个</p>
<script>
x=document.getElementsByTagName("p");
document.write(x[1].innerHTML);
</script>
以上代码显示的结果是，除了本就该有“第一个”“第二个”两个段落以外，还会再显示一个“第二个”。
如果把1改成0，还会再显示一个“第一个”。
firstChild 以及 lastChild
<p id="intro">Hello World!</p>
<script>
x=document.getElementById("intro");
document.write(x.firstChild.nodeValue);
</script>
扫一扫
176
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
