javascript进击（四）HTML DOM

HTML DOM （文档对象模型）

什么是DOM？

DOM 是 W3C（万维网联盟）的标准。

DOM 定义了访问 HTML 和 XML 文档的标准。

W3C 文档对象模型 （DOM） 是中立于平台和语言的接口，它允许程序和脚本动态地访问和更新文档的内容、结构和样式。

W3C DOM 标准被分为 3 个不同的部分：

• 核心 DOM - 针对任何结构化文档的标准模型
• XML DOM - 针对 XML 文档的标准模型
• HTML DOM - 针对 HTML 文档的标准模型

访问浏览器，加载网页的同时，浏览器会创建页面的文档对象模型（Document Object Model）。

通过可编程的对象模型，JavaScript 获得了足够的能力来创建动态的 HTML。

• JavaScript 能够改变页面中的所有 HTML 元素
• JavaScript 能够改变页面中的所有 HTML 属性
• JavaScript 能够改变页面中的所有 CSS 样式
• JavaScript 能够对页面中的所有事件做出反应

在HTML DOM中，所有事物都是节点,DOM是被视为节点树的HTML,方法是在节点上执行的操作。

编程接口

可通过 JavaScript （以及其他编程语言）对 HTML DOM 进行访问。所有 HTML 元素被定义为对象，而编程接口则是对象方法和对象属性。方法是您能够执行的动作（比如添加或修改元素）。属性是您能够获取或设置的值（比如节点的名称或内容）。

一些常用的 HTML DOM 属性：

• innerHTML - 节点（元素）的文本值
• parentNode - 节点（元素）的父节点
• childNodes - 节点（元素）的子节点
• attributes - 节点（元素）的属性节点

一些常用的HTML DOM方法：

方法	描述
getElementById()	返回带有指定 ID 的元素。
getElementsByTagName()	返回包含带有指定标签名称的所有元素的节点列表（集合/节点数组）。
getElementsByClassName()	返回包含带有指定类名的所有元素的节点列表。
appendChild()	把新的子节点添加到指定节点。
removeChild()	删除子节点。
replaceChild()	替换子节点。
insertBefore()	在指定的子节点前面插入新的子节点。
createAttribute()	创建属性节点。
createElement()	创建元素节点。
createTextNode()	创建文本节点。
getAttribute()	返回指定的属性值。
setAttribute()	把指定属性设置或修改为指定的值。

 

 

 

 

 

 

查找 HTML 元素

方法（一）在 DOM 中查找 HTML 元素的最简单的方法，是通过使用元素的 id。

查找 id="intro" 的元素 

var x=document.getElementById("intro"); 

如果找到该元素，则该方法将以对象（在 x 中）的形式返回该元素，如果未找到该元素，则 x 将包含 null。

方法（二）在 DOM 中查找 HTML 元素的最简单的方法，是通过使用元素的 id通过标签名查找 HTML 元素

查找 id="main" 的元素，然后查找 "main" 中的所有 <p> 元素：

var x=document.getElementById("main"); 
var y=x.getElementsByTagName("p"); 

提示：通过类名查找 HTML 元素在 IE 5,6,7,8 中无效。

改变 HTML 输出流

在 JavaScript 中，document.write() 可用于直接向 HTML 输出流写内容。

document.write(Date());

改变 HTML 内容

修改 HTML 内容的最简单的方法时使用 innerHTML 属性。

document.getElementById("p1").innerHTML="New text!";

改变 HTML 属性

如需改变 HTML 元素的属性，请使用这个语法：document.getElementById(id).attribute=new value

document.getElementById("image").src="landscape.jpg";

改变 HTML 样式

如需改变 HTML 元素的样式，请使用这个语法：document.getElementById(id).style.property=new style

document.getElementById("p2").style.color="blue";

对事件做出反应

我们可以在事件发生时执行 JavaScript，比如当用户在 HTML 元素上点击时。

HTML 事件的例子：

• 当用户点击鼠标时

• <h1 onclick="this.innerHTML='谢谢!'">请点击该文本</h1>

• 当网页已加载时
• 当图像已加载时
• 当鼠标移动到元素上时
• 当输入字段被改变时
• 当提交 HTML 表单时
• 当用户触发按键时

使用 HTML DOM 来分配事件

HTML DOM 允许通过使用 JavaScript 来向 HTML 元素分配事件：

onload 和 onunload 事件

onload 和 onunload 事件会在用户进入或离开页面时被触发。

onload 事件可用于检测访问者的浏览器类型和浏览器版本，并基于这些信息来加载网页的正确版本。

onload 和 onunload 事件可用于处理 cookie。

onchange 事件

onchange 事件常结合对输入字段的验证来使用。

onmouseover 和 onmouseout 事件

onmouseover 和 onmouseout 事件可用于在用户的鼠标移至 HTML 元素上方或移出元素时触发函数。

onmousedown、onmouseup 以及 onclick 事件

onmousedown, onmouseup 以及 onclick 构成了鼠标点击事件的所有部分。首先当点击鼠标按钮时，会触发 onmousedown 事件，当释放鼠标按钮时，会触发 onmouseup 事件，最后，当完成鼠标点击时，会触发 onclick 事件。

添加和删除节点（HTML 元素）。

创建新的 HTML 元素

如需向 HTML DOM 添加新元素，就必须首先创建该元素（元素节点），然后向一个已存在的元素追加该元素。

<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 element=document.getElementById("div1");
element.appendChild(para);
</script>

删除已有的 HTML 元素

如需删除 HTML 元素，必须首先获得该元素的父元素：

<div id="div1">
<p id="p1">这是一个段落。</p>
<p id="p2">这是另一个段落。</p>
</div>

<script>
var parent=document.getElementById("div1");
var child=document.getElementById("p1");
parent.removeChild(child);
</script>

提示：如果能够在不引用父元素的情况下删除某个元素，就太好了。不过很遗憾。DOM 需要清楚需要删除的元素，以及它的父元素。

这是常用的解决方案：找到希望删除的子元素，然后使用其 parentNode 属性来找到父元素：

 var child=document.getElementById("p1"); 2 child.parentNode.removeChild(child);