HTML DOM学习总结

最新推荐文章于 2022-06-19 18:19:05 发布

雨天934

最新推荐文章于 2022-06-19 18:19:05 发布

阅读量615

点赞数

分类专栏： Js

本文链接：https://blog.csdn.net/u010603896/article/details/41649631

版权

Js 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

什么是HTML DOM

HTML DOM（针对html文档的标准模型）。大家应该熟知html里面的内容是以“开闭合标签”来组织的：

<html>                 <!--html标签-->

<head>                       <!--head标签-->
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head><!--head标签结束-->
<body><!--body标签-->

<div>Hello</div>
</body> <!--body标签结束-->

</html> <!--html标签结束-->

从上面可以看出：第零层：html这个文件（document）包含html这个标签；第一层：html包含head，body；第二层：head包含meta，title；body包含div；第三层：title包含“无标题文档”文本，div包含“hello“文本；形成一种树的形式：

整个html文件由此可以理解为一棵节点树。

它把html文档的内容分为五类， “文档节点（document）”，“元素节点（element）”，“属性节点（attribute）”，“文本节点（text）”，“注释节点（note）”。

说明：html文件就是属于文档节点；html，head，body等这些有”<>“的标签属于元素标签；div标签里面可以使用width，height这些属性设置宽高，这些属性及它们的值就是属性节点；上面的例子中div标签中间的”hello“就是属于文本节点；上面例子中的注释属于注释节点；

这些节点层层包含，最终汇聚于一个节点（html文件，文档节点（document））。通过遍历我们可以找到文档中的任何一个节点，这就为我们操作html文档创造了条件。

注意：上述代码中body标签后直接换行后，接着写了<div>hello</div>,再次换行。这里body下的第一个子节点是文本节点（换行或者空格也属于文本节点），而不是div，同理body下的最后一个节点也不是div，而是文本节点。

如何操作HTML

把html文件理解为一个html对象（document），那么就会有对象方法，和对象属性。

方法是您能够执行的动作（比如添加或修改元素）。

属性是您能够获取或设置的值（比如节点的名称或内容）。

这里有一些常用的方法和属性：

方法：

getElementById(id) - 获取带有指定 id 的节点（元素）
appendChild(node) - 插入新的子节点（元素）
removeChild(node) - 删除子节点（元素）

属性：

innerHTML - 节点（元素）的文本值
parentNode - 节点（元素）的父节点
childNodes - 节点（元素）的子节点
attributes - 节点（元素）的属性节点
firstChild - 节点（元素）的第一个子节点
lastChild- 节点（元素）的最后一个子节点

一般情况下，我们操作这些东西需要一个编程接口，而上面的方法和属性就是这个编程接口，它们可以在Javascript代码里面调用。

要操作这些东西，我们首先要找到它们。怎么找到它们？

HTML DOM提供的方法里面有几个可以帮助我们访问它们：

getElementById(id) 通过标签的id属性值获取到该节点；

getElementsByTagName(tagName) 通过标签名称获取一组节点；

getElementsByClassName(className) 通过标签的类名获取一组节点；//这个方法在IE9之前不支持。

我们能做哪些操作呢？

改变 HTML 内容
改变 CSS 样式
改变 HTML 属性
创建新的 HTML 元素
删除已有的 HTML 元素
改变事件（处理程序）

改变HTML内容举例（一般通过innerHTML改变文本节点内容）：

<span style="color:#ff9900;"><strong><html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script>
function changeText()
{
	var pItem=document.getElementById("pItem");
	pItem.innerHTML="我很好啊！";
}
</script>
</head>
<body>
<p id="pItem">你好吗？</p>
<button οnclick="changeText()">更改文本</button>
</body>
</html></strong></span>

改变CSS样式（先找到元素节点，再找到style属性节点，并更改其内容）：

<strong><span style="color:#ff9900;"><html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script>
function changeStyle()
{
	var pItem=document.getElementById("pItem");
	pItem.style.color="red";
	pItem.style.fontSize="20px";
}
</script>
</head>
<body>
<p id="pItem">你好吗？</p>
<button οnclick="changeStyle()">更改文本</button>
</body>
</html></span></strong>

改变html属性（访问属性节点，并重新赋值）：

<strong><span style="color:#ff9900;"><html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script>
function changeWidth()
{
	var pItem=document.getElementById("show");
	pItem.width="100px";
}
</script>
</head>
<body>
<div id="show" width="150px" height="50px"></div>
<button οnclick="changeWidth()">改变宽度</button>
</body>
</html></span></strong>

创建新的html元素（使用createElement()方法创建，使用createTextNode创建文本节点，使用appendChild()方法插入节点）：

<strong><span style="color:#ff9900;"><html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script>
function addPara()
{
	var oDiv=document.getElementById("container");
	var para=document.createElement("p");
	var text=document.createTextNode("第四个段落");
	para.appendChild(text);
	oDiv.appendChild(para);
}
</script>
</head>
<body>
<div id="container">
<p>第一个段落</p>
<p>第二个段落</p>
<p>第三个段落</p>
</div>
<button οnclick="addPara()">添加段落</button>
</body>
</html></span></strong>

删除已有的html元素（removeChild（））：

<strong><span style="color:#ff9900;"><html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script>
function deletePara()
{
	var deletedpara=document.getElementById("junk");
	var parent=deletedpara.parentNode;
	parent.removeChild(deletedpara)
}
</script>
</head>
<body>
<div id="container">
<p>第一个段落</p>
<p id="junk">第二个段落</p>
<p>第三个段落</p>
</div>
<button οnclick="deletePara()">删除段落</button>
</body>
</html></span></strong>

还有替换元素（replaceChild（para，child），para替换child；由父元素调用执行）。

增删节点的操作都和父元素有关。

HTML DOM的目的在于易于操作html，增强网页的动态交互性！

就写到这里了！还不明白的家伙请查看以下链接：

HTML DOM 教程

雨天934

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML DOM学习总结

什么是HTML DOMHTML DOM（针对html文档的标准模型）。大家应该熟知html里面的内容是以“开闭合标签”来组织的：无标题文档 Hello 从上面可以看出：第零层：html这个文件（document）包含html这个标签；第一层：html
复制链接

扫一扫