1、前言
在html中,网页标签是以文档树的结构进行处理的。而html dom(常说的Document Object Model)定义了访问和使用Html的标准方法。因此掌握html dom是必须的。由于笔者不是前端开发人员,对于前端知识只需要到能用的地步就可以了,所以本文不会涉及很深的例子,都是基础的内容。声明,本文只是总结式的文章,参考内容和图片来自w3school,链接如下:点击打开链接
2、Html文档树
在网页中的所有标签会被dom表示成文档树的形式,如下:
可以看到,不止标签,连同标签的属性也成未文档树的一部分,因此通过dom就可以操作html标签的属性和内容了。
3、Html Dom是什么
Html Dom是W3c定义的标准的Html编程接口,它与具体的操作平台和脚本语言无关,并且定义了操作Html对象的基本方法。即通过它就可以访问操作Html标签对象,包括结构、内容、样式。换言之,Html Dom是如何删除修改添加Html元素的方法。
4、Html Dom节点
Html Dom讲这个文档都看成是节点元素:
- 整个文档是一个文档节点
- 每个 HTML 元素是元素节点
- HTML 元素内的文本是文本节点
- 每个 HTML 属性是属性节点
- 注释是注释节点
Html Dom中所有的节点是互相关联的:
- 在节点树中,顶端节点被称为根(root)
- 每个节点都有父节点、除了根(它没有父节点)
- 一个节点可拥有任意数量的子
- 同胞是拥有相同父节点的节点
5、Html Dom常用方法
通过脚本语言就可以访问Html Dom的元素,
所有 HTML 元素被定义为对象,而编程接口则是对象方法和对象属性。
方法是您能够执行的动作(比如添加或修改元素)。
属性是您能够获取或设置的值(比如节点的名称或内容)。
一些常用的方法如下:
6、常用的获取Html Dom元素的方法
访问 HTML 元素等同于访问节点
您能够以不同的方式来访问 HTML 元素:
- 通过使用 getElementById() 方法
- 通过使用 getElementsByTagName() 方法
- 通过使用 getElementsByClassName() 方法
看一下几个例子:
document.getElementById("intro");
document.getElementsByTagName("p");
document.getElementById("main").getElementsByTagName("p");
document.getElementsByClassName("intro");
第一个用于获取id="intro"的标签元素。第二个用于获取标签为<p>的元素。第三个用于获取id="main"的元素中的子节点中标签为<p>的元素。第三个获取class=“intro”的标签。注意以上方法返回的可能是标签集合。
7、Html Dom修改节点元素
修改 HTML DOM 意味着许多不同的方面:
- 改变 HTML 内容
- 改变 CSS 样式
- 改变 HTML 属性
- 创建新的 HTML 元素
- 删除已有的 HTML 元素
- 改变事件(处理程序)
通过innerHtTML来修改元素内容:
<html>
<body>
<p id="p1">Hello World!</p>
<script>
document.getElementById("p1").innerHTML="New text!";
</script>
</body>
</html>
以上方法会将<p>的文本内容替换为New text。
通过 HTML DOM,您能够访问 HTML 元素的样式对象
<html>
<body>
<p id="p2">Hello world!</p>
<script>
document.getElementById("p2").style.color="blue";
</script>
</body>
</html>
如需向 HTML DOM 添加新元素,您首先必须创建该元素(元素节点),然后把它追加到已有的元素上
会在<p id="p1"></p>之间添加一个子元素节点。
<div id="d1">
<p id="p1">This is a paragraph.</p>
<p id="p2">This is another paragraph.</p>
</div>
<script>
var para=document.createElement("p");
var node=document.createTextNode("This is new.");
para.appendChild(node);
var element=document.getElementById("d1");
element.appendChild(para);
</script>
8、删除、修改节点元素
如需删除 HTML 元素,您必须清楚该元素的父元素:
<div id="div1">
<p id="p1">This is a paragraph.</p>
<p id="p2">This is another paragraph.</p>
</div>
<script>
var parent=document.getElementById("div1");
var child=document.getElementById("p1");
parent.removeChild(child);
</script>
如需替换 HTML DOM 中的元素,请使用 replaceChild() 方法:
<div id="div1">
<p id="p1">This is a paragraph.</p>
<p id="p2">This is another paragraph.</p>
</div>
<script>
var para=document.createElement("p");
var node=document.createTextNode("This is new.");
para.appendChild(node);
var parent=document.getElementById("div1");
var child=document.getElementById("p1");
parent.replaceChild(para,child);
</script>
9、Html Dom事件
Html Dom允许javascript对节点的事件作出反应,也允许javascript为节点添加事件。
当事件发生时,可以执行 JavaScript,比如当用户点击一个 HTML 元素时。
如需在用户点击某个元素时执行代码,请把 JavaScript 代码添加到 HTML 事件属性中:
<!DOCTYPE html>
<html>
<body>
<h1 οnclick="this.innerHTML='hello!'">请点击这段文本!</h1>
</body>
</html>
点击该文本就会被替换成hello
或者使用事件调用的方式:
<!DOCTYPE html>
<html>
<head>
<script>
function changetext(id)
{
id.innerHTML="hello!";
}
</script>
</head>
<body>
<h1 οnclick="changetext(this)">请点击这段文本!</h1>
</body>
</html>
鼠标的移出和移入也会触发事件:
<!DOCTYPE html>
<html>
<body>
<div
οnmοuseοver="mOver(this)"
οnmοuseοut="mOut(this)"
style="background-color:#D94A38;width:200px;height:50px;padding-top:25px;text-align:center;">
Mouse Over Me
</div>
<script>
function mOver(obj)
{
obj.innerHTML="谢谢你"
}
function mOut(obj)
{
obj.innerHTML="把鼠标指针移动到上面"
}
</script>
</body>
</html>
10、操作Html标签集合
var x=document.getElementsByTagName("p");
以上代码获取文档中所有为p的标签元素,可以通过下标获取第几个标签,比如p[0]表示第一个。length属性可获取元素的数量, 能够使用三个节点属性:parentNode、firstChild 以及 lastChild ,在文档结构中进行导航。比如“:
<html>
<body>
<p id="intro">Hello World!</p>
<script>
x=document.getElementById("intro");
document.write(x.firstChild.nodeValue);
</script>
</body>
</html>
这里有两个特殊的属性,可以访问全部文档:
- document.documentElement - 全部文档
- document.body - 文档的主体
比如:
<html>
<body>
<p>Hello World!</p>
<div>
<p>DOM 很有用!</p>
<p>本例演示 <b>document.body</b> 属性。</p>
</div>
<script>
alert(document.body.innerHTML);
</script>
</body>
</html>
除了 innerHTML 属性,您也可以使用 childNodes 和 nodeValue 属性来获取元素的内容。下面的代码获取 id="intro" 的 <p> 元素的值:
<html>
<body>
<p id="intro">Hello World!</p>
<script>
var txt=document.getElementById("intro").childNodes[0].nodeValue;
document.write(txt);
</script>
</body>
</html>