讲给后台程序员看的前端系列教程(37)——DOM_小言_互联网的博客

讲给后台程序员看的前端系列教程(37)——DOM

2020-04-01 15:16 398人阅读评论(0)

C语言自学完备手册(33篇)

Android多分辨率适配框架

HTML5前端开发实战系列教程

MySQL数据库实操教程(35篇图文版)

推翻自己和过往——自定义View系列教程(10篇)

走出思维困境，踏上精进之路——Android开发进阶精华录

讲给Android程序员看的前端系列教程(40集免费视频教程+源码)

版权声明

本文原创作者：谷哥的小弟
作者博客地址：http://blog.csdn.net/lfdfhl

DOM简介

文档对象模型(Document Object Model，简称DOM)是W3C (World Wide Web Consortium)组织推荐的处理可扩展标志语言的标准编程接口。目前，DOM编程广泛应用于xml、html开发中。对于JavaScript来说，DOM是操作HTML文档的重要手段，开发人员可利用DOM实现对HTML文档内所有元素的获取、访问和设置等操作。在本节教程中，我们将详细介绍DOM编程在html开发中的常见应用。

HTML DOM 概述

HTML DOM 定义了访问和操作HTML文档的标准方法，规定如下：

整个文档是一个文档节点
每个HTML标签是一个元素节点
包含在HTML元素中的文本是文本节点
每一个HTML属性是一个属性节点
注释属于注释节点
各节点之间有级别的划分

基于以上规定，我们可将HTML文件可以看作是所有元素组成的一棵节点树。

示例如下：

<!DOCTYPE html>
<!-- 本文作者：谷哥的小弟-->
<!-- 博客地址：https://blog.csdn.net/lfdfhl-->
<html>
	<head>
		<meta charset="utf-8">
		<title>DOM</title>
	</head>
	<body>
		<a href="">链接</a>
		<p>段落...</p>
	</body>
</html>

结构如下：

在此，以此示例说明DOM中各节点的关系：

根节点：html标签是整个文档的根节点，DOM中有且仅由一个根节点。
子节点：指的是某一个节点的下级节点，例如：head节点和body节点是html节点的子节点
父节点：指的是某一个节点的上级节点，例如：html元素是head节点和body节点的父节点。
兄弟节点：两个节点拥有同一个父节点，例如：head节点和body节点互为兄弟节点。

DOM操作HTML元素

在此介绍DOM编程中对于HTML元素的常用操作。

获取元素

在此介绍DOM编程中获取HTML元素的常用方式。

利用document对象的方法获取元素

document对象常用方法如下：

我们可以使用其中如下三个方法获取HTML中的元素：

getElementById( )：返回对拥有指定 id 的第一个对象的引用。
getElementsByName( )：返回带有指定名称的对象集合。
getElementsByTagName( )：返回带有指定标签名的对象集合。

示例如下：

<!DOCTYPE html>
<!-- 本文作者：谷哥的小弟-->
<!-- 博客地址：https://blog.csdn.net/lfdfhl-->
<html>
	<head>
		<meta charset="utf-8">
		<title>DOM</title>
	</head>
	<body>
		<div id="divid">This div id=divid</div>
		<div class="divclass">This div class=divclass</div>
		<div name="divname">This div divname=divname</div>
		<script>
			// 获取id为divid的元素
			console.log(document.getElementById('divid')); 
			// 获取所有name为divname的元素
			console.log(document.getElementsByName('divname')); 
			// 获取所有div元素
			console.log(document.getElementsByTagName('div')); 
		</script>

	</body>
</html>

结果如下：

利用document对象的属性获取元素

document对象常用属性如下：

示例如下：

<!DOCTYPE html>
<!-- 本文作者：谷哥的小弟-->
<!-- 博客地址：https://blog.csdn.net/lfdfhl-->
<html>
	<head>
		<meta charset="utf-8">
		<title>DOM</title>
	</head>
	<body>
		<script>
			var body1=document.body;
			var body2=document.getElementsByTagName("body")[0];
			//The result is true
			document.write(body1==body2); 
		</script>
	</body>
</html>

利用element对象的方法获取元素

element对象常用属性和方法如下：

我们可以利用element对象中的getElementsByTagName( )得到指定标签名的所有子元素的集合。

示例如下：

<!DOCTYPE html>
<!-- 本文作者：谷哥的小弟-->
<!-- 博客地址：https://blog.csdn.net/lfdfhl-->
<html>
	<head>
		<meta charset="utf-8">
		<title>DOM</title>
	</head>
	<body>
		<ul id="unorderlist">
			<li>C++</li>
			<li>Java</li>
			<li>Python</li>
			<li>JavaScript</li>
		</ul>
		<script>
			var liList=document.getElementById("unorderlist").getElementsByTagName("li");
			console.log(liList);
		</script>
	</body>
</html>

结果如下：

获取和设置元素内容

在此DOM编程中常用element的属性获取元素内容：

element.innerHTML
该属性用于设置或返回元素开始和结束标签之间的HTML。在使用innerHTML获取元素内容时会保持编写的格式以及标签样式。

element.textContent
该属性用于设置或者返回指定节点的文本内容。在使用textContent获取元素内容时会去掉内容中的原有标签仅保留文本格式。

示例如下：

<!DOCTYPE html>
<!-- 本文作者：谷哥的小弟-->
<!-- 博客地址：https://blog.csdn.net/lfdfhl-->
<html>
	<head>
		<meta charset="utf-8">
		<title>DOM</title>
	</head>
	<body>
		<div id="divid">
			The first paragraph...
			<p>
				The second paragraph...
				<a href="http://www.ifeng.com/">Click Me</a>
			</p>
		</div>
		<script>
			var divBox = document.getElementById('divid');
			console.log(divBox.innerHTML);
			console.log(divBox.textContent);
		</script>
	</body>
</html>

结果如下：

获取和设置元素样式

style对象常用属性如下：

width：设置或返回元素的宽度
height：设置或返回元素的高度
background：设置或返回元素的背景属性
backgroundColor：设置或返回元素的背景色
display：设置或返回元素的显示类型
left：设置或返回定位元素的左部位置
listStyleType：设置或返回列表项标记的类型
overflow：设置或返回如何处理呈现在元素框外面的内容
textAlign：设置或返回文本的水平对齐方式
textDecoration：设置或返回文本的修饰
textlndent：设置或返回文本第一行的缩逬
transform：向元素应用2D或3D转换

我们可通过元素.style.属性名称的方式获取元素的样式。类似地，可使用元素.style.属性名称=属性值的方式对元素的样式赋值。

示例如下：

<!DOCTYPE html>
<!-- 本文作者：谷哥的小弟-->
<!-- 博客地址：https://blog.csdn.net/lfdfhl-->
<html>
	<head>
		<meta charset="utf-8">
		<title>DOM</title>
	</head>
	<body>
		<div id="divid">This is a div</div>
		<script>
			var divBox = document.getElementById('divid');
			//设置元素style
			divBox.style.width="100px";
			divBox.style.height="100px";
			divBox.style.backgroundColor="red";
			//获取元素style
			console.log("divBox.style.width="+divBox.style.width);
			console.log("divBox.style.height="+divBox.style.height);
			console.log("divBox.style.backgroundColor="+divBox.style.backgroundColor);
		</script>
	</body>
</html>

结果如下：

文档节点操作

在此介绍DOM编程中常见的节点操作。

获取节点

HTML文档可以看作为一棵节点树；因此，可以利用操作节点的方式操作HTML中的元素。Node对象常用的获取节点的属性如下：

firstChild：访问当前节点的第一个子节点
lastChild：访问当前节点的最后一个子节点
nodeValue：访问当前节点的值
nextSibiling：返回同层级中指定节点之后第一个节点
previousSibling：返回同层级中指定节点之前第一个节点
parentNode：访问当前元素节点的父节点
childNodes：访问当前元素节点的所有子节点

由于document对象继承自node节点对象，因此document对象也可以进行以上的节点操作。

示例如下：

<!DOCTYPE html>
<!-- 本文作者：谷哥的小弟-->
<!-- 博客地址：https://blog.csdn.net/lfdfhl-->
<html>
	<head>
		<meta charset="utf-8">
		<title>DOM</title>
	</head>
	<body>
		<ul id="unorderlist">
			<!-- software language -->
			<li>C++</li>
			<li>Java</li>
			<li>Python</li>
			<li>JavaScript</li>
		</ul>
		<script>
			var liList=document.getElementById("unorderlist");
			console.log(liList.childNodes);
		</script>
	</body>
</html>

结果如下：

看完这个简单的示例之后，我们再来看一个稍微复杂的例子。

代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>DOM</title>
    <script type="text/javascript">
        var getByID=function(){
            var nameValue=document.getElementById("name").innerHTML;
            var introduceValue=document.getElementById("introduce").value;
            alert("nameValue="+nameValue+" , introduceValue="+introduceValue);
        }

        var getBySelector=function(){
            var nameValue=document.querySelector("#name").innerHTML;
            var introduceValue=document.querySelector("#introduce").value;
            alert("nameValue="+nameValue+" , introduceValue="+introduceValue);
        }

        var getByNode=function(){
            var currentNode=document.getElementById("java");
            var previousNode=currentNode.previousSibling.previousSibling;
            var previousNodeVaule=previousNode.innerHTML;
            var nextNode=currentNode.nextSibling.nextSibling;
            var nextNodeVaule=nextNode.innerHTML;
            alert("previousNodeVaule="+previousNodeVaule+" , nextNodeVaule="+nextNodeVaule);
        }

    </script>
</head>
<body>
    <p id="name">谷哥的小弟</p>
    <textarea id="introduce" cols="20" rows="3">坚持原创，热衷分享</textarea>
    <br>
    <br>
    <input type="button" value="依据ID访问标签" onclick="getByID();">
    <br>
    <br>
    <input type="button" value="依据选择器访问标签" onclick="getBySelector();">
    <br>
    <br>
    <ol>
        <li>Android</li>
        <li id="java">Java</li>
        <li>Python</li>
    </ol>
    <input type="button" value="依据节点关系访问标签" onclick="getByNode();">
    <br>
    <br>
</body>
</html>

在该实例中用了三种方式访问HTML中的标签。

详解如下：

利用方法document.getElementById( )依据元素的id获取标签，请参见代码第7-11行。在此请注意：HTML中大部分标签(比如div、p、td)的内容都可通过属性innerHTML获取到；但是有些标签(比如input、textarea)的内容则是通过属性value获取的。

利用方法document.querySelector( )依据元素的选择器获取标签，请参见代码第13-17行。它和刚才的依据ID访问标签非常类似，不再赘述。

利用节点之间的关系(比如父子关系、兄弟关系)获访问标签，请参见代码第19-26行。在此，请注意每两个li标签之前的回车换行也是ol标签的子节点！

注意事项：

DOM编程中访问元素节点时请注意nextSibling与nextElementSibling的差别：
nextSibling返回元素节点之后的兄弟节点(包括文本节点、注释、即回车、换行、空格、文本等等)
nextElementSibling返回元素节点之后的兄弟元素节点（不包括文本节点、注释、即回车、换行、空格、文本等等)

结果如下：

添加节点

添加节点常用方法如下：

document.createElement( )：创建元素节点
document.createTextNode( )：创建文本节点
document.createAttribute( )：创建属性节点
appendChild( )：在指定元素的子节点的末尾添加节点
insertBefore( )：将节点插入到指定子节点之前
getAttributeNode( )：返回指定名称的属性节点
setAttributeNode( )：设置或者改变指定名称的属性节点

示例如下：

<!DOCTYPE html>
<!-- 本文作者：谷哥的小弟-->
<!-- 博客地址：https://blog.csdn.net/lfdfhl-->
<html>
	<head>
		<meta charset="UTF-8">
		<title>DOM</title>
	</head>
	<body>
		<script>
			// 创建h2元素节点
			var h2 = document.createElement('h2');
			// 创建文本节点
			var text = document.createTextNode('Hello DOM');
			// 创建属性节点
			var attr = document.createAttribute('align');
			// 为属性节点赋值
			attr.value = 'center';
			// 为h2元素添加属性节点
			h2.setAttributeNode(attr);
			// 为h2元素添加文本节点
			h2.appendChild(text);
			// 将h2节点追加为body元素的子节点
			document.body.appendChild(h2);
		</script>
	</body>
</html>

结果如下：

示例如下：

<!DOCTYPE html>
<!-- 本文作者：谷哥的小弟-->
<!-- 博客地址：https://blog.csdn.net/lfdfhl-->
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>DOM</title>
		<script type="text/javascript">
			var addNode = function() {
				var courseNode = document.getElementById("course");
				var osNode = document.createElement("li");
				osNode.innerHTML = "操作系统";
				courseNode.insertBefore(osNode, courseNode.firstChild);
			}
		</script>
	</head>
	<body>
		<ol id="course">
			<li>数据结构</li>
			<li>计算机网络</li>
			<li>计算机组成原理</li>
		</ol>
		<input type="button" value="新增标签" onclick="addNode();">
	</body>
</html>

结果如下：

删除节点

删除节点常用方法如下：

removeChild( )：删除节点
removeAttributeNode( )：删除属性节点

示例如下：

<!DOCTYPE html>
<!-- 本文作者：谷哥的小弟-->
<!-- 博客地址：https://blog.csdn.net/lfdfhl-->
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>DOM</title>
		<script type="text/javascript">
			var deleteNode = function() {
				//获取待删除节点
				var netNode = document.getElementById("net");
				//获取待删除节点的父节点
				var courseNode = document.getElementById("course");
				//删除节点
				courseNode.removeChild(netNode);
			}
		</script>
	</head>
	<body>
		<ol id="course">
			<li>数据结构</li>
			<li id="net">计算机网络</li>
			<li>计算机组成原理</li>
		</ol>
		<input type="button" value="删除标签" onclick="deleteNode()">
	</body>
</html>

结果如下：

示例如下：

<!DOCTYPE html>
<!-- 本文作者：谷哥的小弟-->
<!-- 博客地址：https://blog.csdn.net/lfdfhl-->
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>DOM</title>
	</head>
	<body>
		<ul>
			<li>Java</li>
			<li>Python</li>
			<li class="js">JavaScript</li>
		</ul>
		<script>
			// 获取第3个li元素
			var child = document.getElementsByTagName('li')[2];
			// 获取元素的class属性值
			var attr = child.getAttributeNode('class');
			// 删除元素的class属性值
			console.log(child.removeAttributeNode(attr));
			// 删除元素
			console.log(child.parentNode.removeChild(child));
		</script>
	</body>
</html>

结果如下：

转载：https://blog.csdn.net/lfdfhl/article/details/100740323

查看评论

小言_互联网的博客

小言_互联网的博客

个人资料

文章分类

文章存档

阅读排行

评论排行

推荐文章