JS中DOM文档对象模型操作实例

最新推荐文章于 2021-12-19 12:59:47 发布

三月的一天

最新推荐文章于 2021-12-19 12:59:47 发布

阅读量764

点赞数 5

分类专栏： Javascript 文章标签： JS文档对象模型 DOM操作

本文链接：https://blog.csdn.net/qq_36384657/article/details/95210887

版权

Javascript 专栏收录该内容

18 篇文章 0 订阅

订阅专栏

一、DOM

DOM，全称Document Object Model文档对象模型。 JS中通过DOM来对HTML文档进行操作。只要理解了DOM就可以随心所欲的操作WEB页面。

Document 文档

– 文档表示的就是整个的HTML网页文档

Object对象

– 对象表示将网页中的每一个部分都转换为了一个对象。

Model模型

– 使用模型来表示对象之间的关系，这样方便我们获取对象。

节点

节点Node，是构成我们网页的最基本的组成部分，网页中的每一个部分都可以称为是一个节点。比如：html标签、属性、文本、注释、整个文档等都是一个节点。虽然都是节点，但是实际上他们的具体类型是不同的。比如：标签我们称为元素节点、属性称为属性节点、文本称为文本节点、文档称为文档节点。节点的类型不同，属性和方法也都不尽相同。

常用节点分为四类

– 文档节点：整个HTML文档

– 元素节点：HTML文档中的HTML标签

– 属性节点：元素的属性

– 文本节点：HTML标签中的文本内容

节点的属性

二、文档节点（document）

• 文档节点document，代表的是整个HTML文档，网页中的所有节点都是它的子节点。 document对象作为window对象的属性存在的，我们不用获取可以直接使用。通过该对象我们可以在整个文档访问内查找节点对象，并可以通过该对象创建各种节点对象。

三、元素节点（Element）

• HTML中的各种标签都是元素节点，这也是我们最常用的一个节点。浏览器会将页面中所有的标签都转换为一个元素节点，

我们可以通过document的方法来获取元素节点。比如：

document.getElementById() // 根据id属性值获取一个元素节点对象。

1）获取元素节点

• 通过document对象调用

1. getElementById() – 通过id属性获取一个元素节点对象

2. getElementsByTagName() – 通过标签名获取一组元素节点对象

3. getElementsByName() – 通过name属性获取一组元素节点对象

2）获取元素节点的子节点

• 通过具体的元素节点调用

1. getElementsByTagName() – 方法，返回当前节点的指定标签名后代节点

2. childNodes – 属性，表示当前节点的所有子节点

3. firstChild – 属性，表示当前节点的第一个子节点

4. lastChild – 属性，表示当前节点的最后一个子节点

3）获取父节点和兄弟节点

• 通过具体的节点调用

1. parentNode – 属性，表示当前节点的父节点

2. previousSibling – 属性，表示当前节点的前一个兄弟节点

3. nextSibling – 属性，表示当前节点的后一个兄弟节点

4）元素节点的属性

• 获取，元素对象.属性名

例：element.value

element.id

element.className

• 设置，元素对象.属性名=新的值

例：element.value = “hello”

element.id = “id01”

element.className = “newClass”

5）其他属性

• nodeValue

– 文本节点可以通过nodeValue属性获取和设置文本节点的内容

• innerHTML

– 元素节点通过该属性获取和设置标签内部的html代码

四、文本节点（Text）

• 文本节点表示的是HTML标签以外的文本内容，任意非HTML的文本都是文本节点。它包括可以字面解释的纯文本内容。 • 文本节点一般是作为元素节点的子节点存在的。获取文本节点时，一般先要获取元素节点。在通过元素节点获取文本节点。

• 例如：

– 元素节点.firstChild; – 获取元素节点的第一个子节点，一般为文本节点

五、属性节点（Attr）

• 属性节点表示的是标签中的一个一个的属性，这里要注意的是属性节点并非是元素节点的子节点，而是元素节点的一部分。

可以通过元素节点来获取指定的属性节点。例如：

– 元素节点.getAttributeNode("属性名"); // 注意：我们一般不使用属性节点。

六、事件

• 事件，就是文档或浏览器窗口中发生的一些特定的交互瞬间。 JavaScript 与 HTML 之间的交互是通过事件实现的。对于 Web 应用来说，有下面这些代表性的事件：点击某个元素、将鼠标移动至某个元素上方、按下键盘上某个键，等等。

如图所示，对如下的网页添加右侧的相关属性，依次通过添加JS代码实现。为了更好的讲述JS对DOM的操作，将HTML和JS分离讲述。

上述实现对应的HTML代码为

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<title>Untitled Document</title>
		<link rel="stylesheet" type="text/css" href="style/css.css" />
	</head>
	<body>
		<div id="total">
			<div class="inner">
				<p>
					你喜欢哪个城市?
				</p>

				<ul id="city">
					<li id="bj">北京</li>
					<li>上海</li>
					<li>东京</li>
					<li>首尔</li>
				</ul>

				<br>
				<br>

				<p>
					你喜欢哪款单机游戏?
				</p>

				<ul id="game">
					<li id="rl">红警</li>
					<li>实况</li>
					<li>极品飞车</li>
					<li>魔兽</li>
				</ul>

				<br />
				<br />

				<p>
					你手机的操作系统是?
				</p>

				<ul id="phone"><li>IOS</li><li id="android">Android</li><li>Windows Phone</li></ul>
			</div>

			<div class="inner">
				gender:
				<input class="hello" type="radio" name="gender" value="male"/>
				Male
				<input class="hello" type="radio" name="gender" value="female"/>
				Female
				<br>
				<br>
				name:
				<input type="text" name="name" id="username" value="abcde"/>
			</div>
		</div>
		<div id="btnList">
			<div><button id="btn01">1.查找#bj节点</button></div>
			<div><button id="btn02">2.查找所有li节点</button></div>
			<div><button id="btn03">3.查找name=gender的所有节点</button></div>
			<div><button id="btn04">4.查找#city下所有li节点</button></div>
			<div><button id="btn05">5.返回#city的所有子节点</button></div>
			<div><button id="btn06">6.返回#phone的第一个子节点</button></div>
			<div><button id="btn07">7.返回#bj的父节点</button></div>
			<div><button id="btn08">8.返回#android的前一个兄弟节点</button></div>
			<div><button id="btn09">9.返回#username的value属性值</button></div>
			<div><button id="btn10">10.设置#username的value属性值</button></div>
			<div><button id="btn11">11.返回#bj的文本值</button></div>
		</div>
	</body>
</html>

现在分别实现1-11功能

1.查找id为bj的节点，点击id为btn01的按钮时弹出其内的html元素

innerHTML 通过这个属性可以获取到元素内部的html代码

		//将下述JS代码插入head标签中
       <script type="text/javascript">		
			window.onload = function(){
				//onload方法表示文档加载完成后进行调用JS
				//为id为btn01的按钮绑定一个单击响应函数
				var btn01 = document.getElementById("btn01");//找到button按钮
				btn01.onclick = function(){
					//查找#bj节点
					var bj = document.getElementById("bj");//找到北京所在列表项
					//打印bj
					//innerHTML 通过这个属性可以获取到元素内部的html代码
					alert(bj.innerHTML);
				};
			};					
		</script>

2.查找所有li节点，点击id为btn02的按钮时弹出其内的html元素

    <script type="text/javascript"> 				
                window.onload=function(){
                var btn02=document.getElementById("btn02");
 				btn02.onclick=function(){
 					var lis=document.getElementsByTagName('li');
					//查找所有li节点
					//getElementsByTagName()可以根据标签名来获取一组元素节点对象
					//这个方法会给我们返回一个类数组对象，所有查询到的元素都会封装到对象中
					//即使查询到的元素只有一个，也会封装到数组中返回
 					for(var i=0;i<lis.length;i++)
 					{
 						alert(lis[i].innerHTML);
 					};
 				};

			};
	</script>

3.为id为btn03的按钮绑定一个单击响应函数

		<script type="text/javascript"> 	
                window.onload=function(){	
		        var btn03=document.getElementById('btn03');
 				btn03.onclick=function(){
 					var list=document.getElementsByName('gender');
 					for(var i=0;i<list.length;i++)
 					{
 						alert(list[i].className);
 					};
						/*
						 * innerHTML用于获取元素内部的HTML代码的
						 * 	对于自结束标签，这个属性没有意义
						 */
						//alert(inputs[i].innerHTML);
						/*
						 * 如果需要读取元素节点属性，
						 * 	直接使用 元素.属性名
						 * 		例子：元素.id 元素.name 元素.value
						 * 		注意：class属性不能采用这种方式，
						 * 			读取class属性时需要使用 元素.className
						 */
 				};

			};
		</script>

4.查找#city下所有li节点

		<script type="text/javascript">
			//4.查找#city下所有li节点
            //注意将代码写在head中时要写此行
			window.onload=function()
			{
			var btn04=document.getElementById("btn04");
			btn04.onclick=function (){
				var city=document.getElementById("city");
				var lis=city.getElementsByTagName("li");
				alert(lis.length);
			};
		};

		</script>

5.返回#city的所有子节点

childNodes属性会获取包括文本节点在呢的所有节点，根据DOM标签标签间空白也会当成文本节点，注意：在IE8及以下的浏览器中，不会将空白文本当成子节点，所以该属性在IE8中会返回4个子元素而其他浏览器是9个

	<script type="text/javascript">				
                //为id为btn05的按钮绑定一个单击响应函数
                window.onload=function(){
				var btn05 = document.getElementById("btn05");
				btn05.onclick = function(){
					//获取id为city的节点
					var city = document.getElementById("city");
					//返回#city的所有子节点
					/*
					 * childNodes属性会获取包括文本节点在呢的所有节点
					 * 根据DOM标签标签间空白也会当成文本节点
					 * 注意：在IE8及以下的浏览器中，不会将空白文本当成子节点，
					 * 	所以该属性在IE8中会返回4个子元素而其他浏览器是9个
					 */
					var cns = city.childNodes;
					
					//alert(cns.length);
					
					/*for(var i=0 ; i<cns.length ; i++){
						alert(cns[i]);
					}*/
					
					/*
					 * children属性可以获取当前元素的所有子元素
					 */
					var cns2 = city.children;
					alert(cns2.length);
				};

		</script>

6.返回#phone的第一个子节点

以下简写代码，将其添加<script> window.οnlοad=function(){/*代码写入*/}<script>

firstChild可以获取到当前元素的第一个子节点（包括空白文本节点）

			var btn06=document.getElementById("btn06");
			btn06.onclick=function(){
				var phone=document.getElementById("phone");
			    var firstchild=phone.firstChild;
			    alert(firstchild);
			}

7返回#bj的父节点

parentNode – 属性，表示当前节点的父节点

			var btn07=document.getElementById("btn07");
			btn07.onclick=function(){
				var bj=document.getElementById("bj");
			    var parent=bj.parentNode;
			    alert(parent);
			};

8.返回#android的前一个兄弟节点

从这个部分开始，为button按钮获取元素节点设置为myClick函数，button按钮的Id值将通过一个参数传入myClick中，onclick时间通过函数作为第二个形参传入。myClick（idstr,fun）定义如下：

			function myClick(idStr,fun){
				var btn=document.getElementById(idStr);
				btn.onclick=fun;//将函数作为参数传进来
			}

			myClick("btn08",function(){
				var android=document.getElementById("android");
				var brother=android.previousSibling;
				alert(brother);
			});

9.返回#username的value属性值

		    myClick("btn09",function(){
		    	var username=document.getElementById("username");
		    	alert(username.value);
		    })

10.设置#username的value属性值

		   myClick("btn10",function(){
		   	var setvalue=document.getElementById("username");
		   	username.value="weng yu shang";
		   	alert(username.value);
		   })

11.返回#bj第一个文本值

		   myClick("btn11",function(){
		   	var bj=document.getElementById("bj");
/*		   	var text=bj.firstChild;
		   	alert(text.nodeValue);*/
		   	alert(bj.firstChild.nodeValue);
		   })

三月的一天

关注

5
点赞
踩
6

收藏

觉得还不错? 一键收藏
打赏
0
评论
JS中DOM文档对象模型操作实例

一、DOMDOM，全称Document Object Model文档对象模型。JS中通过DOM来对HTML文档进行操作。只要理解了DOM就可以随心所欲的操作WEB页面。Document 文档 – 文档表示的就是整个的HTML网页文档 Object对象 – 对象表示将网页中的每一个部分都转换为了一个对象。 Model模型 – 使用模型来表示对象之间的关系，这样方便我...
复制链接

扫一扫