JavaScript的第九讲文档对象模型

最新推荐文章于 2024-04-01 20:52:13 发布
最新推荐文章于 2024-04-01 20:52:13 发布
阅读量231 收藏 2
点赞数 1
分类专栏： js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_44830627/article/details/106525482
版权

JavaScript第九讲文档对象

目录

在这里插入图片描述

一、DOM概述

在这里插入图片描述
在这里插入图片描述

二、DOM对象节点属性

在这里插入图片描述
在这里插入图片描述
例题1：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>访问指定节点</title>
	</head>
	<body id="body" class="class">
		<h1 > 一号标题</h1>
		<b>加粗内容</b>
		<script type="text/javascript">
			window.onload=function(){
				//元素节点
				var box=document.getElementById("body");
				alert("节点名称:"+box.nodeName+'\n'+"节点类型:"+box.nodeType+'\n'+"节点值:"+box.nodeValue);
			   //属性节点	
			}
		</script>
	</body>
</html>

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
例题2：

<!DOCTYPE html>
<html >
	<head>
		<meta charset="utf-8">
		<title>通过相应按钮查找文档的各个节点名称、类型和节点值</title>
	</head>
	<body>
		<h3>三号标题</h3>
		<b>加粗内容</b><br />
		节点名称：<input type="text" id="name1" /><br />
		节点类型：<input type="text" id="name2" /><br />
		节点的值：<input type="text" id="name3" /><br />
		<input type="button" value="父节点" onclick="father()" />
		<input type="button" value="第一个子节点" onclick="firstNode()" />
		<input type="button" value="最后一个子节点" onclick="lastNode()"/>
		<input type="button" value="前一个兄弟节点" onclick="firstbrother()"/>
		<input type="button" value="最后一个兄弟节点" onclick="lastbrother()"/>
		<input type="button" value="返回根节点" onclick="last()" />
		<script type="text/javascript">
			var n1 = document.getElementById("name1");
			var n2 = document.getElementById("name2");
			var n3 = document.getElementById("name3");
			var box = document.body;

			function father() {
				n1.value = box.parentNode.nodeName;
				n2.value = box.parentNode.nodeType;
				n3.value = box.parentNode.nodeValue;
			}

			function firstNode() {
				n1.value = box.firstChild.nodeName;
				n2.value = box.firstChild.nodeType;
				n3.value = box.firstChild.nodeValue;
			}
			
			function lastNode() {
				n1.value = box.lastChild.nodeName;
				n2.value = box.lastChild.nodeType;
				n3.value = box.lastChild.nodeValue;
			}
			
			function firstbrother() {
				n1.value = box.previousSibling.nodeName;
				n2.value = box.previousSibling.nodeType;
				n3.value = box.previousSibling.nodeValue;
			}
			function lastbrother() {
					n1.value = box.nextSibling.nodeName;
					n2.value = box.nextSibling.nodeType;
					n3.value = box.nextSibling.nodeValue;	
			}
			function last() {
				n1.value = box.lastElementChild.nodeName;
				n2.value = box.lastElementChild.nodeType;
				n3.value = box.lastElementChild.nodeValue;
			}
		</script>
	</body>
</html>

在这里插入图片描述

三、节点

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
实例3：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>自动创建新节点</title>
	</head>
	<body>
		<script type="text/javascript">
			window.onload=function(){
			var h=document.createElement("b");
			var t=document.createTextNode("创建新节点！");
			h.appendChild(t);
		   document.body.appendChild(h);
			}
		</script>
	</body>
</html>

在这里插入图片描述

在这里插入图片描述
实例4：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>自动创建新节点</title>
	</head>
	<body>
		<script type="text/javascript">
			window.onload=function(){
				var arr=["一","二","三","四","五","六"];
				for(var i=0;i<arr.length;i++){
					var h=document.createElement("p");
				var t=document.createTextNode("第"+arr[i]+"个节点");
								h.appendChild(t);
					document.body.appendChild(h);
				}
			}
		</script>
	</body>
</html>

在这里插入图片描述
在这里插入图片描述
例题5：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>自动创建新节点</title>
	</head>
	<body>
		<script type="text/javascript">
			window.onload=function(){
				var arr=["一","二","三","四","五","六"];
				var frag = document.createDocumentFragment();
			
				for(var i=0;i<arr.length;i++){
				
					var h=document.createElement("b");
				var t=document.createTextNode("第"+arr[i]+"个节点");
								h.appendChild(t);
							frag.appendChild(h);
								}
					document.body.appendChild(frag);
				
			}		
		</script>
	</body>
</html>

在这里插入图片描述
在这里插入图片描述
例题6：

<!DOCTYPE html>
<html>
<head>
<title> 插入节点</title>
<script language="javascript">
 <!--
 function crNode(str)
 {
  var newP=document.createElement("p");
  var newTxt=document.createTextNode(str);
  newP.appendChild(newTxt);
  return newP;
 }
 function insetNode(nodeId,str)
 {
   var node=document.getElementById(nodeId);
   var newNode=crNode(str);
   if(node.parentNode) //判断是否拥有父节点
   node.parentNode.insertBefore(newNode,node);
 }
 -->
</script>
</head>
<body>
 <h2 id="h">在上面插入节点</h2>
 <form id="frm" name="frm">
 输入文本：<input type="text" name="txt" />
 <input type="button" value="前插入" onclick="insetNode('h',document.frm.txt.value);" />
 </form>
</body>
</html>

在这里插入图片描述

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<script type="text/javascript">
				function Add(bl)
					{
				 	var sel=document.getElementById("di");
					var newSelect=sel.cloneNode(bl);   
					var  b=document.createElement("br");
			    	form.appendChild(newSelect);   
					form.appendChild(b);    		
					}   
		</script>
		
		<form id="form">
			<div id="di">JavaScript</div>
			<input type="button" value="复制" onclick="Add(true)" />
			
		</form>
	</body>
</html>

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
例题7：

<html xmlns="http://www.w3.org/1999/xhtml">   
<head>   
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />   
<title>复制节点</title>   
<script language="javascript"> 
	<!--
		function AddRow(bl)
		{
		var sel=document.getElementById("sexType");
		   var newSelect=sel.cloneNode(bl);   
		var  b=document.createElement("br");
    		di.appendChild(newSelect);   
		di.appendChild(b);    		
		}      		
	-->    
</script>   
</head>   
<body>   
<form>   

    <select name="sexType" id="sexType">   
     <option value="%">请选择性别</option>   
     <option value="0">男</option>   
     <option value="1">女</option>   
    </select>
 
  <div id="di"></div>    
 <input type="button" value="复制" onClick="AddRow(false)"/>
 <input type="button" value="深度复制" onClick="AddRow(true)"/>
</form>   
</body>   
</html>

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
例题8：

<!DOCTYPE html>
<html>
	<head>
		<title> 删除节点</title>
		<script language="javascript">
			 <!--
function delNode()
{
var deleteN=document.getElementById('di');
if(deleteN.hasChildNodes())
{
  deleteN.removeChild(deleteN.lastChild);
}
}
-->
</script>
	</head>
	<body>
		<h1>删除节点</h1>
		<div id="di">
			<p>第一行文本</p>
			<p>第二行文本</p>
			<p>第三行文本</p>
		</div>
		<form>
			<input type="button" value="删除" onclick="delNode();" />
		</form>
	</body>
</html>

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
实例9：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>替换节点</title>
<script language="javascript">
	<!--
	function repN(str,bj)
	{
	var rep=document.getElementById('b1');
	    if(rep)
	{  var newNode=document.createElement(bj);
	         newNode.id="b1";
	   var newText=document.createTextNode(str);
	       newNode.appendChild(newText);
	       rep.parentNode.replaceChild(newNode,rep);
	}
	}
	-->
</script>
</head>
<body>
<b id="b1">可以替换文本内容</b>
<br />
输入标记：<input id="bj" type="text" size="15" /><br />
输入文本：<input id="txt" type="text" size="15" /><br />
<input type="button" value="替换" onclick="repN(txt.value, bj.value)" />
</body>
</html>

在这里插入图片描述
在这里插入图片描述

四、获取文档中的指定元素

在这里插入图片描述

在这里插入图片描述

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />   
<title></title>
</head>
<body>
<input type="text" name="txt" value="体育">
<input type="text" name="txt" value="艺术">
<input type="text" name="txt" value="舞蹈">
<script type="text/javaScript">
alert(document.getElementsByName("txt")[0].value);
</script>
</body>
</html>

在这里插入图片描述

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<!-- <input type="button" value="提交" οnclick="change()" /> -->
	
		<script type="text/javascript">
			
			function change() {
				var i = Math.floor(Math.random()*3); //取整并*3
				var src = "";
				switch (i) {
					case 0:
						src = "img/0.jpg";
						break;
					case 1:
						src = "img/1.jpg";
						break;
					case 2:
						src = "img/2.jpg";
						break;
				}
			
			document.body.background = src;
			setTimeout("change()", 3000);
			}
			window.onload=change();
		</script>

	</body>
</html>

在这里插入图片描述
实例11：

五、与DHTML相对应的DOM

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
实例12：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div id="time"></div>
		<div id="greet"></div>
		<script type="text/javascript">
			function ShowTime(){
			var strgreet="";
			var datetime=new Date();//获取当前时间
			var hour=datetime.getHours();//获取小时
			var minu=datetime.getMinutes();//获取分钟
			var seco=datetime.getSeconds();//获取秒钟
			strtime=hour+":"+minu+":"+seco+"";//组合当前时间
			if(hour>=0&&hour<8)//判断是否为早上
			strgreet="早上好";
			if(hour>=8&&hour<11)//判断是否为上午
			strgreet="上午好";
			if(hour>=11&&hour<13)//判断是否为中午
			strgreet="中午好";
			if(hour>=13&&hour<17)//判断是否为下午
			strgreet="下午好";
			if(hour>=17&&hour<24)//判断是否为晚上
			strgreet="晚上好";
			window.setTimeout("ShowTime()",1000);//每隔1秒重新获取一次时间
	        document.getElementById("time").innerHTML="现在是：<b>"+strtime+"</b>";
			document.getElementById("greet").innerText="<b>"+strgreet+"</b>";
			}
			window.onload=ShowTime();
	</script>
	</body>
</html>

在这里插入图片描述

新白者
关注
专栏目录
JavaScript高级程序设计 第十四章---DOM 文档对象模型
weixin_40794404的博客
09-03 1196
第十四章 本章内容 理解文档对象模型（DOM）的构成 节点类型 浏览器兼容性 MutationObserver 接口 文档对象模型（DOM，Document Object Model）是HTML 和XML 文档的编程接口。DOM 表示由多层节点构成的文档，通过它开发者可以添加、删除和修改页面的各个部分。脱胎于网景和微软早期的动态HTML（DHTML，Dynamic HTML），DOM 现在是真正跨平台、语言无关的表示和操作网页的方式。 14.1 节点层级 任何HTML 或XML 文档都可以用DOM表示
JavaScript中的DOM（文档对象模型）
shiyangxu的博客
08-08 1828
1 什么是DOM DOM（文档对象模型）是针对 HTML 和 XML 文档的一个 API。 DOM1级将HTML和XML文档形象地看作一个层次化的节点树，可以使用JavaScript来操作这个节点树，进而改变底层文档的外观和结构。 2 DOM中的节点 DOM可以将任何HTML或XML文档描绘成一个由多层节点构成的结构。最基本的节点类型是Node，用于抽象地表示文档中一个独立的部分；所有其...
DOM插入节点
iteye_5722的博客
03-04 269
一 介绍 插入节点通过使用insertBefore()方法来实现。 insertBefore()方法将在另一个子节点前插入新的子节点。 obj.insertBefore(new,ref) new：表示新的子节点。 ref：指定一个节点，在这个节点前插入新的节点。   二 应用 插入节点，本示例在页面的文本框中输入需要插入的文本，然后通过单击“前插入”按钮将文本插入到页面中。 ...
【JavaScript】Document Object Model 文档对象模型
YOU__FEI的博客
10-07 2501
DOM 全称是 Document Object Model 文档对象模型。大白话，就是把文档中的标签，属性，文本，转换成为对象来管理。Document 对象的理解：第一点：Document 它管理了所有的 HTML文档内容。第二点：Document 它是一种树结构的文档。有层级关系。第三点：它让我们把所有的标签都对象化。第四点：我们可以通过 Document访问所有的标签对象。注意：document 对象的三个查询方法，如果有 id 属性，优先使用getElementById 方法来进行查询。如果没有...
JavaScript_DOM文档对象模型
C0C0D的博客
04-28 269
文献种类：专题技术总结文献； 开发工具与关键技术：DW与 JavaScript 作者： 陈良鑫 ；年级： 19 ；撰写时间： 2020 年 4 月 28 日 JavaScript对象总结 开发工具与关键技术：Adobe Dreamweaver JavaScript 作者：陈良鑫 撰写时间：2020年4月28日 JavaScript_DOM文档对象模型 宿主对象：...
JavaScript文档对象模型简介
weixin_50176346的博客
09-16 92
JavaScript文档对象模型简介：当网页被加载时，浏览器会创建页面的文档对象模型（Document Object Model）。HTML DOM 定义了用于 HTML 的一系列标准的对象，以及访问和处理 HTML 文档的标准方法。通过 DOM，你可以访问所有的 HTML 元素，连同它们所包含的文本和属性。HTML DOM 独立于平台和编程语言。它可被任何编程语言诸如 Java、JavaScript 和 VBScript 使用。什么是DOM? - DOM，全称Document Object Model文
DOM——文档对象模型（Document Object Model）
qq_20006765的博客
08-23 1252
DOM是JS操作网页的接口，全称为“文档对象模型”（Document Object Model）。它的作用是将网页转为一个JS对象，从而可以用脚本进行各种操作（比如增删内容）。
学习JavaScript Bom(文档对象模型)
最新发布
xuemen11的博客
04-01 500
DOM（文档对象模型）和 BOM（浏览器对象模型）（关于浏览器操作的API）是 JavaScript 编程中常用的两种操作对象模型。开发者可以使用 window 对象来访问浏览器导航历史、定时器、警报框等功能。还可以使用窗口对象的方法打开新窗口、关闭当前窗口、调整窗口大小等。对象代表了包含当前文档的浏览器窗口的位置。对象代表了浏览器本身，开发者可以使用 navigator 对象获取浏览器名称、版本、操作系统类型等信息。对象代表了浏览器的历史记录，开发者可以使用 history 对象访问前进或后退的历史。
JS中DOM文档对象模型操作实例
涵盖了计算机专业基础知识、数学建模相关实践、复杂网络论文研究、LeetCode算法刷题经验、C语言开发经验、前端Vue、React框架开发实战相关知识
07-09 802
一、DOM DOM，全称Document Object Model文档对象模型。JS中通过DOM来对HTML文档进行操作。只要理解了DOM就可以随 心所欲的操作WEB页面。 Document 文档 – 文档表示的就是整个的HTML网页文档 Object对象 – 对象表示将网页中的每一个部分都转换为了一个对象。 Model模型 – 使用模型来表示对象之间的关系，这样方便我...
DOM(文档对象模型)
m0_68870440的博客
06-23 1829
DOM(文档对象模型)
JavaScript文档对象模型总结
迷麟的博客
04-28 182
JavaScrip 文档对象简称 DOM ；全称Document Object Model 文档对象模型；文档：就是HTMl网页文档；对象：表示将网页中的每一个部分都转换为了一个对象；模型：使用模型来表示对象之间的关系，这样方便我们获取对象。 DOM文档对象模型中的节点（Node）：是构成我们网页的最基本的组成部分，网页中的每一个部分都可以称为是一个节点。比如：html标签、属性、文本、注释、整个...
DOM文档对象模型
qq_42839746的博客
09-13 703
DOM的英语全称为Document Object Model,翻译成中文就 是文档对象模型。也就是说，将整个文档看作是一个对象。而一个文档又是由很多节点组成的， 那么这些节点也可以被看作是一个个的对象。DOM里面的对象属于宿主对象，需要浏览器来作 为宿主。一旦离开了浏览器这个环境，那么该对象将不复存在。同样，上一章我们所介绍的 BOM也是如此，需要浏览器来作为宿主，所以它也是一个宿主对象。
DOM脚本：使用JavaScript和文档对象模型进行Web设计（第二版）
这本书深入探讨了使用JavaScript和DOM（文档对象模型）进行Web设计的方法。 DOM，即Document Object Model，是W3C标准定义的一个接口，它允许编程语言（如JavaScript）来动态地访问和修改HTML和XML文档的结构、内容...
HTML+CSS简易淘宝页面
热门推荐
新白的博客
03-31 2万+
简易淘宝界面
解决鼠标离开视频停止的问题
新白的博客
11-23 1万+
视频–右击–检查 第四步：点击鼠标移除事件就可以，然后重新播放视频。 觉得有用的话，可以点赞关注哦。
javaScript的单元测试题
新白的博客
06-02 9078
把自己做的一些测试题整理了发出来，如果对你有用，可以点赞关注，共同学习。 JavaScript的单元测试题第一、二章理论知识测试题第二章实操第三章测试题第四章测试题第四章实验操作测试题第五章理论知识测试第五章实验操作测试题第六章理论知识测试题 第一、二章理论知识测试题 第二章实操 第三章测试题 第四章测试题 1、下列（ ）表达式产生一个0~7之间(含0,7)的随机整数。 A、Math.floor(Math.random()*6) B、Math.floor(Math.random()*7.
js单元测试题
新白的博客
03-27 7289
第一，二章单元测试题及答案
HTML之3D旋转图片
新白的博客
03-27 6133
3D图片旋转:
JavaScript的文档对象，窗口对象，jq选择器部分测试题
新白的博客
06-24 2893
之前写了前几章的测试题 javaScript的单元测试题，今天把剩下的写完。 第七章理论测试题 1、HTML文档的树状结构中，（ ）标签为文档的根节点，位于结构中的最顶层。 A、 B、 C、 D、<br/> 答案：A<br/> 2、nodeType属性可用于获取节点类型，如果返回值为1，则表明该节点为（ ）。<br/> A、文本节点<br/> B、元素节点<br/> C、属性节点<br/> D、.
DOM脚本艺术：JavaScript与文档对象模型第二版解析
《JavaScript DOM编程艺术第2版》是由Jeremy Keith和Jeffrey Sambells合著的一本关于JavaScript和DOM（文档对象模型）的编程书籍，旨在帮助读者提高JavaScript编程技能和理解网页设计。DOM是HTML和XML文档的结构化...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值