Html Dom（动态页面的基础）的基本了解

最新推荐文章于 2023-05-02 22:27:58 发布

HyHarden

最新推荐文章于 2023-05-02 22:27:58 发布

阅读量1.4k

点赞数 1

分类专栏： html 文章标签： html dom

本文链接：https://blog.csdn.net/qq_25722767/article/details/52247517

版权

html 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

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，树中的所有节点均可通过 JavaScript 进行访问。所有 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"的标签元素。第二个用于获取标签为的元素。第三个用于获取id="main"的元素中的子节点中标签为的元素。第三个获取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>

以上方法会将的文本内容替换为New text。

通过 HTML DOM，您能够访问 HTML 元素的样式对象

<html>

<body>
<p id="p2">Hello world!</p>

<script>
document.getElementById("p2").style.color="blue";
</script>

</body>
</html>

同过style就可以修改标签的样式。

如需向 HTML DOM 添加新元素，您首先必须创建该元素（元素节点），然后把它追加到已有的元素上

<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" 的 元素的值：

<html>
<body>

<p id="intro">Hello World!</p>

<script>
var txt=document.getElementById("intro").childNodes[0].nodeValue;
document.write(txt);
</script>

</body>
</html>

---------文章写自：HyHarden---------

--------博客地址：http://blog.csdn.net/qq_25722767-----------

HyHarden

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Html Dom（动态页面的基础）的基本了解

1、前言在html中，网页标签是以文档树的结构进行处理的。而html dom（常说的Document Object Model）定义了访问和使用Html的标准方法。因此掌握html dom是必须的。由于笔者不是前端开发人员，对于前端知识只需要到能用的地步就可以了，所以本文不会涉及很深的例子，都是基础的内容。声明，本文只是总结式的文章，参考内容和图片来自w3school，链接如下：点击打
复制链接

扫一扫