DOM简介
文档对象模型(Document Object Model,简称DOM),是W3C组织推荐的处理可扩展置标语言的标准编程接口。它是一种与平台和语言无关的应用程序接口(API),它可以动态地访问程序和脚本,更新其内容、结构和www文档的风格(HTMl和XML文档是通过说明部分定义的)。文档可以进一步被处理,处理的结果可以加入到当前的页面。DOM是一种基于树的API文档,它要求在处理过程中整个文档都表示在存储器中。另外一种简单的API是基于事件的SAX,它可以用于处理很大的XML文档,由于大,所以不适合全部放在存储器中处理。
W3C DOM 标准被分为 3 个不同的部分:
- Core DOM :所有文档类型的标准模型
- XML DOM :XML 文档的标准模型
- HTML DOM : HTML 文档的标准模型
HTML DOM
通过 HTML DOM,JavaScript 能够访问和改变 HTML 文档的所有元素。
XML DOM
XML 文档对象模型定义访问和操作XML文档的标准方法。
DOM 将 XML 文档作为一个树形结构,而树叶被定义为节点。
HTML DOM
HTML DOM 是 HTML 的标准对象模型和编程接口。它定义了:
- 作为对象的 HTML 元素
- 所有 HTML 元素的属性
- 访问所有 HTML 元素的方法
- 所有 HTML 元素的事件
换言之:HTML DOM 是关于如何获取、更改、添加或删除 HTML 元素的标准。
当网页被加载时,浏览器会创建页面的文档对象模型(Document Object Model)。
HTML DOM 模型被结构化为对象树:
通过这个对象模型,JavaScript 获得创建动态 HTML 的所有力量:
- JavaScript 能改变页面中的所有 HTML 元素
- JavaScript 能改变页面中的所有 HTML 属性
- JavaScript 能改变页面中的所有 CSS 样式
- JavaScript 能删除已有的 HTML 元素和属性
- JavaScript 能添加新的 HTML 元素和属性
- JavaScript 能对页面中所有已有的 HTML 事件作出反应
- JavaScript 能在页面中创建新的 HTML 事件
HTML DOM 方法
HTML DOM 方法是能够在 HTML 元素上执行的动作。
HTML DOM 属性是能够设置或改变的 HTML 元素的值。
HTML DOM 能够通过 JavaScript 进行访问(也可以通过其他编程语言)。
在 DOM 中,所有 HTML 元素都被定义为对象。
编程界面是每个对象的属性和方法。
属性是能够获取或设置的值(就比如改变 HTML 元素的内容)。
方法是能够完成的动作(比如添加或删除 HTML 元素)。
方法实例
1.getElementById 方法
访问 HTML 元素最常用的方法是使用元素的 id。
<html>
<body>
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML = "Hello World!";
</script>
</body>
</html>
在上面的例子中,getElementById 方法使用 id=“demo” 来查找元素。
2.innerHTML 属性
获取元素内容最简单的方法是使用 innerHTML 属性。
innerHTML 属性可用于获取或替换 HTML 元素的内容。
innerHTML 属性可用于获取或改变任何 HTML 元素,包括 < html > 和
< body >。
HTML DOM 文档
HTML DOM 文档对象是网页中所有其他对象的拥有者。
HTML DOM Document 对象
文档对象代表网页。
如果希望访问 HTML 页面中的任何元素,那么总是从访问 document 对象开始。
下面是一些如何使用 document 对象来访问和操作 HTML 的实例。
查找HTML元素
改变HTML元素![请添加图片描述](https://img-blog.csdnimg.cn/849dbdb887a34936bdd535de5c092f2e.png)
添加和删除元素![请添加图片描述](https://img-blog.csdnimg.cn/4aef4f8ada10485b8967203a5eba0af3.png)
添加事件处理程序![请添加图片描述](https://img-blog.csdnimg.cn/98bc7b2c5d6946cf9ac14afd660b267e.png)
查找HTML对象![请添加图片描述](https://img-blog.csdnimg.cn/2638702de9244ff68d1be3f92c75e850.png)
HTML DOM 元素
查找 HTML 元素
通常,通过 JavaScript操作 HTML 元素。
为了达成此目的,您需要首先找到这些元素。有好几种完成此任务的方法:
- 通过 id 查找 HTML 元素
- 通过标签名查找 HTML 元素
- 通过类名查找 HTML 元素
- 通过 CSS 选择器查找 HTML 元素
- 通过 HTML 对象集合查找 HTML 元素
通过id查找HTML元素
DOM 中查找 HTML 元素最简单的方法是,使用元素的 id。
var myElement = document.getElementById("intro");
如果元素被找到,此方法会以对象返回该元素(在 myElement 中)。
如果未找到元素,myElement 将包含 null。
通过标签名查找 HTML 元素
var x = document.getElementsByTagName("p");
通过类名查找 HTML 元素
var x = document.getElementsByClassName("intro");
通过 CSS 选择器查找 HTML 元素
var x = document.querySelectorAll("p.intro");
通过 HTML 对象选择器查找 HTML 对象
var x = document.forms["frm1"];
var text = "";
var i;
for (i = 0; i < x.length; i++) {
text += x.elements[i].value + "<br>";
}
document.getElementById("demo").innerHTML = text;
HTML DOM 改变HTML
改变 HTML 输出流
<!DOCTYPE html>
<html>
<body>
<script>
document.write(Date());
</script>
</body>
</html>
不要在文档加载后使用 document.write()。这么做会覆盖文档。
改变 HTML 内容
修改 HTML 文档内容最简单的方法是,使用 innerHTML 属性。
如需修改 HTML 元素的内容,请使用:
document.getElementById(id).innerHTML = new text
改变属性的值
<!DOCTYPE html>
<html>
<body>
<img id="myImage" src="smiley.gif">
<script>
document.getElementById("myImage").src = "landscape.jpg";
</script>
</body>
</html>
HTML DOM 事件
对事件作出反应
JavaScript 能够在事件发生时执行,比如当用户点击某个 HTML 元素时。
为了在用户点击元素时执行代码,请向 HTML 事件属性添加 JavaScript 代码:
οnclick=JavaScript
HTML 事件的例子:
- 当用户点击鼠标时
- 当网页加载后
- 当图像加载后
- 当鼠标移至元素上时
- 当输入字段被改变时
- 当 HTML 表单被提交时
- 当用户敲击按键时
HTML 事件属性
向 HTML 元素分配事件,能够使用事件属性。
<button onclick="displayDate()">点击</button>
使用 HTML DOM 分配事件
<script>
document.getElementById("myBtn").onclick = displayDate;
</script>
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 DOM 节点
在 HTML DOM 中,所有事物都是节点。DOM 是被视为节点树的。 HTML根据 W3C 的 HTML DOM 标准,HTML 文档中的所有内容都是节点:
- 整个文档是一个文档节点
- 每个 HTML 元素是元素节点
- HTML 元素内的文本是文本节点
- 每个 HTML 属性是属性节点
- 注释是注释节点
节点父、子和同胞
节点树中的节点彼此拥有层级关系。父(parent)、子(child)和同胞(sibling)等术语用于描述这些关系。父节点拥有子节点。同级的子节点被称为同胞(兄弟或姐妹):
- 在节点树中,顶端节点被称为根(root)
- 每个节点都有父节点、除了根(它没有父节点)
- 一个节点可拥有任意数量的子
- 同胞是拥有相同父节点的节点