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 添加新元素,就必须首先创建该元素(元素节点),然后向一个已存在的元素追加该元素。
1 <div id="div1"> 2 <p id="p1">这是一个段落</p> 3 <p id="p2">这是另一个段落</p> 4 </div> 5 6 <script> 7 var para=document.createElement("p"); 8 var node=document.createTextNode("这是新段落。"); 9 para.appendChild(node); 10 var element=document.getElementById("div1"); 11 element.appendChild(para); 12 </script>
删除已有的 HTML 元素
如需删除 HTML 元素,必须首先获得该元素的父元素:
1 <div id="div1"> 2 <p id="p1">这是一个段落。</p> 3 <p id="p2">这是另一个段落。</p> 4 </div> 5 6 <script> 7 var parent=document.getElementById("div1"); 8 var child=document.getElementById("p1"); 9 parent.removeChild(child); 10 </script>
提示:如果能够在不引用父元素的情况下删除某个元素,就太好了。不过很遗憾。DOM 需要清楚需要删除的元素,以及它的父元素。
这是常用的解决方案:找到希望删除的子元素,然后使用其 parentNode 属性来找到父元素:
1 var child=document.getElementById("p1"); 2 child.parentNode.removeChild(child);