做过Web开发的人应该都听说过DOM(文档对象模型),但是很少有人去深入的理解文档对象模型的概念。本章将对这一概念进行讲解,对DOM理解的越深,就越有利于你的Web开发。

    做过Web开发的人应该都听说过DOM(文档对象模型),但是很少有人去深入的理解文档对象模型的概念。本章将对这一概念进行讲解,对DOM理解的越深,就越有利于你的Web开发。

DOM的理论基础

    我们都知道HTML是web网页的标记语言,它有特定的语法和规则。在HTML中的基本元素是tag标签,这些标签都用尖括号包起来,例如:<img>标签。

    浏览器在将HTML文本信息渲染成具体的界面之前,会先将所有的标签都转为对象,每个对象都有自己的属性(例如:坐标位置,大小等),对象和对象之间还可以形成父子关系,从而构成一个对象树。那么哪些标签要被渲染成哪类对象?这些对象又支持哪些具体的属性,以及对象之间可以有什么样的树形层次关系,这些标准和依据都是由DOM(文档对象模型)来定义的。

    DOM(文档对象模型)中的文档表示HTML文档,对象即HTML标签转成的对象,模型指的是这些对象之间构成的树形结构:

文档对象模型示例

    那么文档对象模型有什么好处,为什么浏览器都要先将HTML标记文本转为具有树形结构的对象模型?

    这是因为,当转成对象树结构后,你就可以在不修改HTML内容的情况下,对界面上的元素进行调整。例如,假设你想在两个p标签段落元素之间,再动态的插入一个段落的话,只需在这两个段落元素的对象之间插入一个新的段落对象即可,而不需要去重新修改和编译HTML文本。

    此外,只有转为了文档对象模型,javascript脚本语言才能操作界面上的元素,例如:如果你想对某个界面元素的大小进行调整的话,只需通过javascript脚本设置该元素对象的大小属性即可。再比如你要删除某个界面元素的话,只需通过js脚本将该对象从对象树中移除即可。

    DOM定义了对象中的各种方法和事件,通过对象方法可以对这些对象进行各种操作(例如添加对象,删除对象,修改对象属性等)。通过事件可以让对象响应用户的操作,例如用户点击按钮时,如果按钮绑定了点击事件,那么该事件对应的脚本函数就会被执行,事件让界面元素具备了基本的交互能力。

DOM的一些常见操作(方法中的斜体表示需要设定的可变内容)

1. 查找HTML元素

 方法   描述 
 document.getElementById(id  根据元素ID查找HTML元素,找到则返回对应的DOM对象。
 document.getElementByTagName(name  根据标签名返回所有此标签的元素对象集合。
 document.getElementByClassName(name  根据类名返回所有包含此类名的元素对象集合。

2. 修改HTML元素

 方法   描述 
 element.innerHTML = new html content   设置element元素内部的html内容 
 element.attribute = new value  设置element元素的attribute属性值 
 element.setAttribute(attribute, value)  设置element元素的attribute属性值
 element.style.property = new style  修改element元素的style样式

3. 添加和删除元素

 方法   描述 
 document.createElement(element  创建一个HTML元素 
 document.removeChild(element)  移除一个HTML元素
 document.appendChild(element)  追加一个HTML元素
 document.replaceChild(element)  替换一个HTML元素
 document.write(text)  向文档中写入HTML表达式或JavaScript代码 

4. 添加事件处理程序

 方法   描述 
 document.getElementById(id).onclick = function(){code}   添加事件处理代码到onclick事件

 

下面是一个简单的DOM操作示例:

<html>
<body>
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML = "Hello World!";
</script>
</body>
</html>

上面示例就通过js脚本在demo元素内部设置了html内容。

上下篇

下一篇: 10个简单的适合初学者的编程语言

上一篇: Lua:一种快速,可扩展的功能强大的编程语言

相关文章

10个简单的适合初学者的编程语言

5个最好的Java反编译器,用于将程序转换为源代码

用于数据科学的流行的Python库

适合于Android应用程序开发的最佳编程语言

用于图像识别的顶级编程语言

Lua:一种快速,可扩展的功能强大的编程语言