DOM模型

最新推荐文章于 2023-10-13 10:29:03 发布

寻瀑

最新推荐文章于 2023-10-13 10:29:03 发布

阅读量663

点赞数

分类专栏： Java Web

本文链接：https://blog.csdn.net/smell201611010513/article/details/105686977

版权

Java Web 专栏收录该内容

28 篇文章 1 订阅

订阅专栏

1.DOM简介

DOM是W3C（万维网联盟）的标准。DOM定义了访问HTML和XML文档的标准。W3C文档对象模型（DOM）是中立于平台和语言的接口，它允许程序和脚本动态地访问和更新文档的内容、结构和样式。

W3C DOM标准被分为3个不同的部分：

核心 DOM-针对任何结构化文档的标准模型
XML DOM-针对XML文档的标准模型
HTML DOM-针对HTML文档的标准模型

HTML DOM是HTML的标准对象模型、HTML的标准编程接口和W3C标准。HTML DOM定义了所有HTML元素的对象和属性，以及访问它们的方法。换言之，HTML DOM是关于如何获取、修改、添加或删除HTML元素的标准。

2.DOM节点

在HTML DOM中，所有事物都是节点。DOM是被视为节点树的HTML。

根据W3C的HTML DOM标准，HTML文档中的所有内容都是节点：

整个文档是一个文档节点
每个HTML元素是元素节点
HTML元素内的文本是文本节点
每个HTML属性是属性节点
注释是注释节点

2.1 HTML DOM节点树

节点树中的节点彼此拥有层级关系。父(parent)、子(child)和同胞(sibling)等术语用于描述这些关系。父节点拥有子节点。同级的子节点被称为同胞（兄弟或姐妹）。

在节点树中，顶端节点被称为根（root）；每个节点都有父节点，除了根节点；一个节点可拥有任意数量的子节点、同胞是拥有相同父节点的节点。

<html>
    <head>
        <title>HTML DOM</title>
    </head>
<body>
    <h1>DOM Lesson1</h1>
    <p>Hello HTML DOM!</p>
</body>
</html>

在上面的HTML中，<html>节点没有父节点，它是根节点，并且它拥有两个子节点<head>和<body>；<head>和<body>的父节点是<html>节点；文本节点“Hello HTML Dom!"的父节点是<p>节点；<head>元素是<html>元素的首个子节点，并且拥有一个子节点<title>；<title>子节点也拥有一个子节点：文本节点"DOM Lesson1”；<body>元素是<html>元素的最后一个节点，<h1>和<p>节点是同胞节点，同时也是<body>的子节点；<h1>是<body>元素的首个子节点，而<p>是<body>元素的最后一个节点。

DOM处理中的常见错误是希望元素节点包含文本。在 "<title>HTML DOM</title>"中，元素节点<title>，包含值为“HTML DOM”的文本节点，可以通过节点的innerHTML属性来访问文本节点的值。

3.DOM方法

DOM方法是我们可以在节点（HTML元素）上执行的动作。可通过JavaScript对HTML DOM进行访问。所有HTML元素被定义为对象，而编程接口则是对象方法和对象属性。方法是能够执行的动作（比如添加或修改元素）。属性是能够获取或设置的值（比如节点的名称或内容）。

3.1 HTML DOM对象的属性和方法

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

HTML DOM属性：
innerHTML--节点（元素）的文本值
parentNode--节点（元素）的父节点
childNodes--节点（元素）的子节点
attributes--节点（元素）的属性节点

<!DOCTYPE html>
<html>
	<head>
			<title>DOM模型</title>
				<meta charset="UTF-8">
	</head>
	<body>
		<p id="test">Hello World!</p>
		<p>演示<b>getElementById()</b></p>
	<script>
		x=document.getElementById("test");
		document.write("<p>标签中id为test的文本内容为："+x.innerHTML+"</p>");
	</script>
	</body>
</html>

3.2 HTML DOM的常用方法

HTML DOM的常用方法
方法	描述
getElementById()	返回带有指定ID的元素
getElementsByTagName()	返回包含带有指定标签名称的所有元素的节点列表（集合/节点数组）
getElementsByClassName()	返回包含带有指定类名的所有元素的节点列表
appendChild()	把新的子节点添加到执行节点
removeChild()	删除子节点
replaceChild()	替换子节点
insertChild()	在指定的子节点前面插入新的子节点
createAttribute()	创建属性节点
createElement()	创建元素节点
createTextNode()	创建文本节点
getAttribute()	返回指定的属性值
setAttribute()	把指定属性设置或修改为指定的值

4.DOM属性

属性是节点（HTML元素）的值，能够获取或设置。

4.1 innerHTML属性

获取元素内容的简单方法就是使用innerHTML属性。innerHTML属性可用于获取或替换HTML元素，包括<html>和<body>

4.2 nodeName属性

nodeName属性规定节点的名称。nodeName属性是只读的。规则：

元素节点的nodeName与标签名相同。
属性节点的nodeName与属性名相同。
文本节点的nodeName始终是#text。
文档节点的nodeName始终是#document。

注意：nodeName始终包含HTML元素的大写字母标签名。

<!DOCTYPE html>
<html>
	<head>
			<title>DOM模型</title>
				<meta charset="UTF-8">
	</head>
	<body>
		<p id="intro">Hello World!</p>
	<script>
		var pNode=document.getElementById("intro");
		var nodeName=pNode.nodeName;
		var textNodeName=pNode.firstChild.nodeName;
		var htmlNodeName=document.nodeName;
		var attributeNodeName=pNode.getAttribute("id").nodeName;//
		
		document.write(nodeName);//p
		document.write(textNodeName);//#text
		document.write(htmlNodeName);//#document
		document.write(attributeNodeName);//undefined
	</script>
	</body>
</html>

4.3 nodeValue属性

nodeValue属性规定节点的值。规则：

元素节点的nodeValue是undefined或null
文本节点的nodeValue是文本本身
属性节点的nodeValue是属性值

<!DOCTYPE html>
<html>
	<head>
			<title>DOM模型</title>
				<meta charset="UTF-8">
	</head>
	<body>
		<p id="intro">Hello World!</p>
	<script>
		var pNode=document.getElementById("intro");
		var pTextNodeValue=pNode.firstChild.nodeValue;
		var attributeValue=pNode.getAttribute("id").nodeValue;
		var attributeNodeValue=pNode.getAttributeNode("id").nodeValue;
		
		document.write(pTextNodeValue);//Hello World!
		document.write("<br/>");
		document.write(attributeValue);//undefined
		document.write("<br/>");
		document.write(attributeNodeValue);//intro
	</script>
	</body>
</html>

getAttributeNode("id")方法获取id的属性节点，因此输出的是id的属性值。

4.4 nodeType属性

nodeType属性返回节点的类型。nodeType是只读的。比较重要的节点类型有：

节点类型
元素类型	NodeType
元素	·1
属性	2
文本	3
注释	8
文档	9

<!DOCTYPE html>
<html> 
    <body><!-- I am 注释 -->
        <p id="intro">Hello World!</p> 
     <script>
     var pNode = document.getElementById("intro");
     var pTextNode = pNode.firstChild;
     var pAttrNode = pNode.getAttributeNode("id");
     var htmlNode = document;
     var commentNode = document.body.firstChild;
      
     alert(pNode.nodeType); // 1
     alert(pTextNode.nodeType); // 3
     alert(pAttrNode.nodeType); // 2
     alert(htmlNode.nodeType); // 9
     alert(commentNode.nodeType); // 8
    </script>
    </body>
</html>

5.DOM访问

访问DOM即查找HTML元素，访问HTML元素等同于访问节点。

DOM提供如下三种方式来访问HTML元素：

getElementById()方法
getElementsByTagName()方法
getElementsByClassName()方法

语法：
getElementById("id")
getElementsByTagName("tagname")
getElementsByClassName("className")

<!DOCTYPE html>
<html> 
    <body><!-- I am 注释 -->
        <p id="intro">Hello World!</p> 
		<p>使用getElementById()</p>
		<br/>
		<div id="main">
		<p>访问DOM</p>
		<p>第一次使用getElementsByTagName()</p>
		<br/>
		<p class="inner">p1</p>
		<p class="inner">p2</p>
		<p class="inner">p3</p>
		<p>第一次使用getElementsByClassName</p>
    <script>
		x=document.getElementById("intro");
		document.write(x.innerHTML);//Hello World!
		
		y=document.getElementById("main").getElementsByTagName("p");
		document.write("div中的第一段的文本："+y[0].innerHTML);//访问DOM
		
		var z=document.getElementsByClassName("inner");
		document.write(z[1].innerHTML);//p2
		
    </script>
    </body>
</html>

6.DOM修改

修改HTML=改变元素、属性、样式和事件。修改HTML DOM包括修改HTML内容、改变CSS样式、改变HTML属性、创建新的HTML元素、删除已有的HTML元素和改变事件（处理程序）。

6.1 改变HTML内容

使用innerHTML属性来改变元素内容。具体做法就是在<script>脚本内直接设置要改变的HTML的innerHTML属性值。

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

浏览器中直接显示为"New text!"

6.2 改变HTML样式

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

<html>
	<head>
	<title>DEMO1</title>
	</head>
	<body>
	<p id="p1">Hello world!</p>
	<p id="p2">Hello world!</p>
	</body>
	<script>
		document.getElementById("p2").style.color="blue";
		document.getElementById("p2").style.fontFamily="Arial";
		document.getElementById("p2").style.fontSize="larger";
	</script>
</html>

6.3 改变HTML属性

通过HTML DOM，能够修改HTML元素的属性。具体可以通过setAttribute()实现：

<!--范例：修改HTML元素属性-->
<html>
	<head>
	<title>DEMO1</title>
	</head>
	<body>
		<a href="#" id="test">点我</a>
	</body>
	<script>
		document.getElementById("test").setAttribute("href","http://www.baidu.com");
	</script>
</html>

6.4 创建HTML元素

appendChild(节点名)--将元素作为父元素的最后一个子元素进行添加。

首先必须创建该元素（元素节点）（createElement(元素名)、createTextNode(文本))，然后把它追加到已有的元素上。如：

<!--范例：新建HTML元素-->
<html>
	<head>
	<title>DEMO1</title>
	</head>
	<body>
		<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 element=document.getElementById("div1");
		element.appendChild(para);
		</script>
	</body>
</html>

insertBefore()--将元素作为父元素的第一个子元素进行添加

<!--范例：新建HTML元素-->
<html>
	<head>
	<title>DEMO1</title>
	</head>
	<body>
		<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 element=document.getElementById("div1");
		var child=document.getElementById("p1");
		element.insertBefore(para,child);
		</script>
	</body>
</html>

6.5 删除HTML元素

找到需要删除的子元素，然后使用parentNode属性来查找其父元素删除（常用）：

var child=document.getElementById("p1");
child.parentNode.removeChild(child);

removeChild(子节点)--由父节点调用，删除子节点

如果需要删除HTML元素，必须清楚该元素的父元素。

<!--范例：删除HTML元素-->
<html>
	<head>
	<title>DEMO1</title>
	</head>
	<body>
		<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>
	</body>
</html>

remove()--通过找到该元素节点，由document.访问节点方法.remove()

<!--范例：删除HTML元素-->
<html>
	<head>
	<title>DEMO1</title>
	</head>
	<body>
		<div id="div1"> 
		<p id="p1">This is a paragraph.</p> 
		<p id="p2">This is another paragraph.</p>
		</div>
		<input type="button" onclick="deleteNode()" value="点击删除元素"> 
		<script>
		function deleteNode() {
			document.getElementById("p2").remove();
		}
		</script>
	</body>
</html>

6.6 替换HTML元素

使用replaceChild(新子节点，旧子节点)

<!--范例：替换HTML元素-->
<html>
	<head>
	<title>DEMO1</title>
	</head>
	<body>
		<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");
		var para=document.createElement("p");
		var node=document.createTextNode("This is new.");
		para.appendChild(node);
		parent.replaceChild(para,child);
		</script>
	</body>
</html>

7.DOM事件

当事件发生时，可以执行JavaScript，比如当用户点击一个HTML元素时，把JavaScript代码添加到HTML事件属性中。

HTML事件的例子：

当用户点击鼠标时
当网页已加载时
当图片已加载时
当鼠标移动到元素上时
当输入字段被改变时
当HTML表单被提交时
当用户触发按键时

7.1 HTML事件属性

如需向HTML元素分配事件，可以使用事件属性。如：向button元素分配一个onclick事件：

<html>
	<head>
	</head>
	<body>
		<p>点击按钮来执行 <b>displayDate()</b> 函数。</p>
		<button onclick="displayDate()">试⼀试</button> 
		<script>
			function displayDate(){
				document.getElementById("demo").innerHTML=Date();
			}
		</script> 
		<p id="demo"></p>
	</body>
</html>

7.2 使用HTML DOM来分配事件

<html>
	<head>
	</head>
	<body>
		<p>点击按钮来执行 <b>displayDate()</b> 函数。</p>
		<button id="mybtn">试⼀试</button> 
		<script>
			document.getElementById("mybtn").onclick=function(){
			displayDate()
			};
			function displayDate(){
				document.getElementById("demo").innerHTML=Date();
			}
		</script> 
		<p id="demo"></p>
	</body>
</html>

和上面例子的效果一模一样。

7.3 onload和onunload事件

当用户进入或离开页面时，会触发onload和onunload事件。onload事件可用于检查访客的浏览器类型和版本，以便这些信息来加载不同版本的网页。onload和onunload事件可以用于处理cookies。

<!DOCTYPE html>
<html> 
	<body onload="checkCookies()"> 
	<script>
		function checkCookies(){
			if (navigator.cookieEnabled==true){
				alert("Cookies are enabled")
			}else{
				alert("Cookies are not enabled")
			} 
		}
	</script> 
	<p>弹出的提示框会告诉你浏览器是否已启用cookie。</p>
</body>
</html>

7.4 onchange事件

onchange事件常用于输入字段的验证。

<!DOCTYPE html>
<html> 
	<head>
		<script>
		function myFunction(){
			var x=document.getElementById("fname");
			x.value=x.value.toUpperCase();
		}
		</script>
	</head> 
	<body>
	请输入你的英文名：<input type="text" id="fname" onchange="myFunction()"> <p>当你离开输⼊框时，被触发的函数会把你输入的文本转换为大写字母。</p>
	</body>
</html>
</body>
</html>

7.5 onmouseover和onmouseout事件

onmouseover和onmouseout事件可用于在鼠标指针移动到或离开元素时触发函数。

<!DOCTYPE html>
<html> 
	<head>
	</head> 
	<body>
	<div
		onmouseover="mOver(this)"
		onmouseout="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>
</body>
</html>

7.6 onmousedown、onmouseup以及onclick事件

onmousedown、onmouseup和onclick事件是鼠标点击的全部过程。首先当某个鼠标按钮被点击时，触发onmousedown事件，然后当鼠标按钮被松开时，会触发onmouseup事件，最后当鼠标点击完成时，触发onclick事件。

<!DOCTYPE html>
<html> 
	<body> 
		<div onmousedown="mDown(this)"
			onmouseup="mUp(this)"
			style="background-color:#D94A38;
				   width:200px;
				   height:50px;
				   padding-top:25px;
				   text-align:center;">
		点击这里
		</div> 
	<script>
	function mDown(obj) {
		obj.style.backgroundColor="#1ec5e5";
		obj.innerHTML="松开⿏标"
	}
	function mUp(obj) {
		obj.style.backgroundColor="#D94A38";
		obj.innerHTML="谢谢你" }
	</script>
	</body>
</html>

8.DOM导航

通过HTML DOM，能够使用节点关系在节点树中导航。

8.1 HTML DOM节点列表

getElementsByTagName()返回节点列表。节点列表是一个数组。

var x=document.getElementsByTagName("p");//选取文档中的所有<p>节点
y=x[1];//通过下表号1访问第二个<p>节点

注意：下标号从0开始。

8.2 HTML DOM节点列表长度

length属性定义节点列表中节点的数量。可以使用length属性来循环节点列表。

<html> 
	<body> 
		<p>Hello World!</p> 
		<p>DOM 很有⽤！</p> 
		<p>本例演示 
		<b>length</b> 属性。
		</p> 
		<script> 
			x=document.getElementsByTagName("p");
			for (i=0;i<x.length;i++){
				document.write(x[i].innerHTML);
				document.write("<br>");
			}
		</script>
	</body>
</html>

8.3 导航节点关系

可以使用三个节点属性：parentNode、firstChild以及lastChild，在文档结构中进行导航。

<html> 
	<body> 
		<p>Hello World!</p>
		<div>
			<p>DOM 很有⽤！</p> 
			<p>本例演示节点关系</p> 
		</div>
	</body>
</html>

首个<p>元素是<body>元素的首个子元素(firstChild)，<div>元素是<body>元素的最后一个子元素(lastChild)，<body>元素是首个<p>元素和<div>元素的父节点(parentNode).

firstChild属性可用于访问元素的文本：

<html>
    <body>
        <p id="intro">Hello World!</p>
        <script>
            x=document.getElementById("intro");
            document.write(x.firstChild.nodeValue);
        </script>
    </body>
</html>

8.4 DOM根节点

有两个特殊的属性，可以访问全部文档：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>

8.5 childNodes和nodeValue

除了使用innnerHTML属性，也可以使用childNodes和nodeValue属性来获取元素的内容。

<html>
	<body>
		<p id="intro">Hello World!</p>
		<script>
			txt=document.getElementById("intro").childNodes[0].nodeValue;	
			document.write(txt);
		</script>
	</body>
</html>

寻瀑

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
DOM模型

一、DOM模型1.DOM简介DOM是W3C（万维网联盟）的标准。DOM定义了访问HTML和XML文档的标准。W3C文档对象模型（DOM）是中立于平台和语言的接口，它允许程序和脚本动态地访问和更新文档的内容、结构和样式。W3C DOM标准被分为3个不同的部分：核心 DOM-针对任何结构化文档的标准模型XML DOM-针对XML文档的标准模型HTML DOM-针对HTML文档的标...
复制链接

扫一扫

专栏目录