JavaScript DOM

最新推荐文章于 2022-10-19 20:24:08 发布
最新推荐文章于 2022-10-19 20:24:08 发布
阅读量98 收藏
点赞数
分类专栏： web 文章标签： javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_53609683/article/details/115952755
版权

什么是DOM

DOM是Document Object Model的简写，即文档对象模型。
DOM用于XHTML、XML文档的应用程序接口(API)。
DOM提供一种结构化的文档描述方式，从而使HTML内容使用结构化的方式显示。
DOM由系列对象组成，是访问、检索、修改XHTML文档内容与结构的标准方法。
DOM标准是由w3c制定与维护。DOM是跨平台与跨语言的。
DOM的顶层是document对象

DOM节点分类node

 <a href="链接地址">我的链接</a>

元素节点 element node  <a href="链接地址">我的链接</a>
属性节点 attribute node  href="链接地址"
文本节点 text node  链接地址  我的链接

DOM操作的内容

1、操作元素的属性
2、操作元素的内容
3、操作元素的样式css
4、获得元素节点对象
5、操作元素的节点对象

DOM直接获得元素对象

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>	
		<script type="text/javascript">	
			function  demo1(){
				
				//*通过ID名称获得节点元素对象----单个对象
				var span =window.document.getElementById("span_1");
				alert(span);	
			}
		  function  demo2(){
		  	  
		  	   //*通过标签的名称获得元素对象----多个对象
		  	   var spans=window.document.getElementsByTagName("span");
		  	   //获得具体的某一个
		  	   alert(spans[1]);
		  }
			
		 function  demo3(){ 	
		 	 //*通过class的名称获得元素对象----多个对象
		 	  var  spans=document.getElementsByClassName("sp");
		 	  
		 	  //不是所有的标签都是具有name属性的 所以这种获得方式不是太多
		 	  //通过name属性获得元素对象----多个对象
		 	  var inp=document.getElementsByName("inp");
		 	  
		 	  alert(spans);	
		 }
		</script>
	</head>
	<body>
		
<input type="button" name="inp" id="" value="ID获得元素对象" onclick="demo1()" />		
<input type="button" name="inp" id="" value="TagName获得元素对象" onclick="demo2()" />		
<input type="button" name="" id="" value="Class获得元素对象" onclick="demo3()" />
<hr/>
        <span id="span_1">bjsxt</span>
		
		<span>bjsxt</span>
		
		<span class="sp" >bjsxt</span>
		
		<span class="sp">bjsxt</span>		
	</body>
</html>

DOM间接获得元素对象

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>DOM间接获得元素对象的方式</title>
		
		<script type="text/javascript">
			
         function  demo1(){		
				//获得div对象
				
				var div=document.getElementById("div1");
				//获得div下面的所有子元素--text文本也是一个节点
				var ch= div.childNodes;		
				//alert(ch.length);
				//document.getElementsByTagName("span")
				
				//获得div下面的所有的span对象
				var sp= div.getElementsByTagName("span");			
				console.log(sp);
			}	
			function  demo2(){
				//获得span对象
				var  span=document.getElementById("sp1");
				//获得父节点
				var pa= span.parentNode;		
				//console.log(pa);		
				alert(pa);
			}	
			function  demo3(){		
				//获得span对象
				var sp= document.getElementById("sp1");		
				//获得span对象的上一个元素 
				//#text
				var  pr= sp.previousSibling;
				// 上一个span对象
				var pr2=sp.previousElementSibling;
				//获得下一个元素
				// #text
				var ne= sp.nextSibling;
				//下一个span元素对象
				var ne2=sp.nextElementSibling;	
				console.log(pr2);	
			}
			
		</script>
	</head>
	<body>
		
<input type="button" name="" id="" value="获得子元素" onclick="demo1()" />
<input type="button" name="" id="" value="获得父元素" onclick="demo2()" />
<input type="button" name="" id="" value="获得兄弟元素" onclick="demo3()" />
<hr />
<div id="div1">
			
			<span>bjsxt</span>		
			<span id="sp1">bjsxt</span>	
			<span>bjsxt</span>	
			<span>bjsxt</span>	
		</div>		
		<span>bjsxtsxt</span>		
	</body>
</html>

JavaScript中操作元素
1.DOM操作元素的属性

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript">
			
			function  demo1(){
				
			//获得元素对象
			var inp=document.getElementById("zh");
				
			//获得对象的属性  inp.value：获得的是实时输入的值不是默认的值
				console.log(inp.type+"---"+inp.name+"---"+inp.value);
				//操作元素对象的属性	
				inp.type="button";
	inp.value="测试1";
			}
		</script>	
	</head>
	<body>
		
<input type="button" name="" id="" value="操作元素的属性" onclick="demo1()" />
<hr />
<input type="text" name="zh" id="zh" value="123" />
</body>
</html>

2.DOM操作元素内容

获得元素内容
单标签获得值得时候使用value属性
双标签获得时候使用的是innerHTML 或者innerText
双标签的特殊情况(value)
Select textarea
取值的时候使用value属性
赋值的时候使用innerHTML或者innerTest即可

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>	
		<script type="text/javascript">
			function  demo1(){
				//获得div的对象
				var div =document.getElementById("div1");
				
				//  文本和HTML的标签
				var inn=div.innerHTML;
				console.log(inn);
				
				//输出的是纯文本
				var  inn2=div.innerText;
			    console.log(inn2);
			    
				//操作内容  可以识别HTML标签的
				//div.innerHTML="<b>嘿嘿</b>";
				
				//把内容当作纯文本输出
				div.innerText+="<b>嘿嘿</b>";
			}
			
			function  ch(th){
				alert(th.value);
			}
			function  test(){
				//获得多行文本的对象
				var te=document.getElementById("te");
				//取值问题
				alert(te.value);
				//赋值操作
				te.innerHTML="sxt";
			}
		</script>
		
	</head>
	<body>
		
<input type="button" name="" id="" value="元素内容测试"  onclick="test()"/>
<hr />
<div id="div1">
<span>人到中年不由己，保温杯里泡枸杞</span>
</div>
<!-- this:代表当前选择的对象-->
		<select onchange="ch(this)">	
			<option value="1">水果1</option>
<option value="2">水果2</option>
<option value="3">水果3</option>
		</select>
		<textarea id="te" ></textarea>
	</body>
</html>

3.DOM操作元素样式

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript">
			function  demo1(){
				
				//获得div元素对象
				var  div =document.getElementById("div1");
				//获得元素的css样式--行内样式才可以获得
				var  wi= div.style.width;
				var he =div.style.height;
								
  				//[1]操作元素的css样式  第一种 ---使用于指定css样式比较少的情况
				/*div.style.width="300px";
				
				div.style.height="300px";
				
				div.style.backgroundColor="darkgoldenrod";*/
				
				//[2]通过增加class属性的方式操作css---如果这个css样式在多个地方重复使用
				
				div.className="divv";	
			}
		</script>

		<style>
			/*#div1{
				
				width: 200px;
				
				height: 200px;
				
				border: 2px solid red; 
				
			}*/
			
			.divv{
			  width: 500px;
			  height: 500px;
			  background-color: royalblue;
			}
		</style>
	</head>
	<body>
		
	<input type="button" name="" id="" value="操作节点的css样式" onclick="demo1()" />
	<hr />
    <div id="div1" class="divv" style="width: 200px; height: 200px; border: 2px solid red;">	
    </div></body></html>

4.DOM操作元素节点

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript">
			function insert(){
				//创建节点对象
				var p=document.createElement("p");
				p.innerHTML="照片:"
				//创建input标签对象	
				var inp=document.createElement("input");
				//给指定的对象赋予属性
				inp.type="file";
				var inp2=document.createElement("input");
				inp2.type="button";
				inp2.value="删除";
				//给指定的对象赋予事件
				inp2.onclick=function(){		
				//删除节点对象  移除子节点对象
				/*p.removeChild(inp);
					
				p.removeChild(inp2);	
				
				document.body.removeChild(p);*/
				
				//直接删除p标签对象
				p.remove();
					
				}
				//获得body对象
				//在现有元素之后追加节点对象
				/*document.body.appendChild(p);*/
				//获得p标签对象
				var p1=document.getElementById("p_1");
				//在现有元素对象之前增加新的节点对象
				document.body.insertBefore(p,p1);
				p.appendChild(inp);
				p.appendChild(inp2);
			}
		</script>
	</head>
	<body>	
		<p>
			姓名:<input type="" name="" id="" value="" />
		</p>
		<p>
	
			照片:<input type="file" name="" id="" value="" />
			
			<input type="button" name="" id="" value="添加" onclick="insert()"/>
			
		</p>
		<p id="p_1">
			
			<input type="button" name="" id="" value="提交" />
			<input type="button" name="" id="" value="清空" />
		</p>
		
	</body>
</html>

<!--
	操作元素节点对象的方法：
	
	[1]创建节点对象：
	  
		var p=document.createElement("p");
		
    [2]如何追加到指定节点对象中		
	    p.appendChild(inp);
	    
	    document.body.insertBefore(p,p1);
	    
	[3]移除子节点：
        p.removeChild(inp);
        
       直接移除该节点  
	    
	    p.remove();
	
-->
AloneDrifters
关注
专栏目录
随书光盘+PDF JavaScript DOM编程艺术(第2版)-源代码2.5MB PDF114MB .zip
06-17
JavaScript DOM编程艺术(第2版)是一本深受开发者欢迎的书籍，主要涵盖了JavaScript语言在Web前端开发中的应用，特别是关于DOM（Document Object Model）的深入理解和实践。这本书的随书光盘包含了源代码和PDF电子版...
JavaScriptDOM编程艺术（第2版）PDF版本下载.txt
07-17
根据提供的文件信息，我们可以推断出这是一本关于JavaScript DOM编程技术的书籍——《JavaScript DOM编程艺术（第2版）》。尽管实际书籍内容并未给出，但从标题、描述及部分链接信息来看，这本书主要涉及JavaScript...
JS & DOM 对象
weixin_34127717的博客
05-21 93
22:36 2013/6/4 详情参照W3C文档标准 Browser 对象(顶层对象) DOM Window DOM Navigator DOM Screen DOM History DOM Location HTML DOM 对象 DOM Document DOM Anchor DOM Area DOM Base DOM Body DO...
DOM对象
秦兟
01-31 363
DOM对象 Dom节点 在浏览器中，Dom并不是顶级，顶层对象为window。Dom只是window下最常用的一部分。 Dom是文档中的最高点，html则是标签的顶端。 Dom节点包括了所有的标签、文本、属性。 通常情况下，将Dom节点大致分为5类 ： Document 根节点 (文档节点)：整个文档树的顶层节点 Element 元素节点：网页的各种HTML标签（比如<body>、&...
JavaScript HTML DOM 对象复习篇（1）
xustart7720的博客
11-28 274
除了内置的 JavaScript 对象以外，你还可以使用 JavaScript 访问并处理所有的 HTML DOM 对象。常用对象 对象 描述 Window JavaScript 层级中的顶层对象。Window 对象表示浏览器窗口。每当 或者 标签出现，Window 对象就会被自动创建。 Navigator 包含客户端浏览器的信息。 Screen 包含客户端显示屏的
【webAPI之DOM】（未完待续）
最新发布
weixin_45118878的博客
10-19 733
WebAPI. DOM可以对网页HTML内容，结构，样式CSS进行调整. 是 HTML 的标准对象模型和编程接口。
DOM对象的层次
iteye_5722的博客
03-02 491
一 介绍 文档对象模型采用的分层结构为树形结构，以树节点的方式表示文档中的各种内容。先以一个简单的HTML文档说明一下。   二 代码 &lt;html &gt; &lt;head&gt; &lt;title&gt;标题内容&lt;/title&gt; &lt;/head&gt; &lt;body&gt; &lt;h3&gt;三号标题&lt;/h3&gt;
JavaScript DOM编程艺术(第2版pdf)+源代码
02-26
JavaScript DOM编程艺术(第2版)是一本深受程序员喜爱的JavaScript技术书籍，专注于讲解如何使用JavaScript与Document Object Model（DOM）进行交互。DOM是Web页面的结构化表示，它允许我们通过编程方式操纵HTML和XML...
JavaScript DOM编程艺术源代码
10-06
【JavaScript DOM编程艺术】是一本深受开发者欢迎的书籍，它主要介绍了如何使用JavaScript语言来操作和改变网页的Document Object Model（DOM）。DOM是HTML和XML文档的结构化表示，允许我们通过编程方式来访问和修改...
JavaScript DOM编程艺术【第2版&高清】.pdf
10-26
但是，根据标题《JavaScript DOM编程艺术【第2版&高清】.pdf》和描述“JavaScript DOM编程艺术，高清资源，无比经典，值得拥有”，我们可以推断这本书主要讲述了JavaScript中DOM（文档对象模型）的相关编程技术。...
ie 要在子页面中向最顶层的页面添加一个dom对象
xinew的专栏
10-27 1512
<br />要在子页面中向最顶层的页面添加一个dom对象 <br /><br />在iframe的页面中调用 <br /><br />$(window.top.document).find("body").append(jqTopDialog_DivMaskLayer); <br />jQuery写法jqTopDialog_DivMaskLayer是jQuery对象 <br />或 <br />window.top.document.body.appendChild(jqTopDialog_DivMaskL
顶层对象
u012902406的博客
11-22 903
ES5 只有两种声明变量的方法：var命令和function命令。ES6 除了添加let和const命令，还有另外两种声明变量的方法：import命令和class命令。所以，ES6 一共有 6 种声明变量的方法。   顶层对象的属性 顶层对象，在浏览器环境指的是window对象，在 Node 指的是global对象。ES5 之中，顶层对象的属性与全局变量是等价的。   global ...
javaScript中的顶层对象小结
南国以北的博客
04-25 3132
顶层对象,在浏览器中指的是window,在node环境中指的是global对象.在ES5环境中,通过var声明的变量能够通过window对象获取到,variable = '1'; console.log(window.variable);//1 window.variable = '2'; console.log(variable);//2证明顶层对象的属性赋值与全局变量的赋值，是同一件事。这种特...
javaScript中的最顶层的对象Object
qq_41899174的博客
10-15 2409
        javaScript沿袭了java的规则，也设计了一个最顶层的“父类”对象Object，所有的对象都默认继承Object，所有对象都可以视为Object的实例。根据继承规则，子类拥有了父类的方法和属性，所以在javaScript中所有对象都默认拥有了许多方法和属性，比如toString，当然我们也可以在Object上自定义方法，那么所有对象将拥有这个方法 Object.prot...
js顶层对象的属性
小强的博客
09-04 926
顶层对象，在浏览器环境指的是window对象，在Node指的是global对象。ES5之中，顶层对象的属性与全局变量是等价的。 window.a = 1; a // 1 a = 2; window.a // 2 上面代码中，顶层对象的属性赋值与全局变量的赋值，是同一件事。 顶层对象的属性与全局变量挂钩，被认为是JavaScript语言最大的设计败笔之一。这样的设计带来了几个很大的问题...
html dom与bom,js中DOM和BOM
weixin_42299018的博客
06-20 192
1. javascript是由哪几部分组成？ECMAScript:(ES5.0) 变量 数据类型 运算符 流程控制语句 数组 对象 函数...DOM : 文档对象模型注意： 不是一个具体对象很多对象组成的集合提供很多的属性和方法操作网页(标签 、 属性 、内容)document对象是DOM中最顶层对象BOM : 浏览器对象模型操作浏览器什么是DOM概念： 文档对象模型注意：1. 不是一个具体...
JS中的BOM和DOM的介绍与使用
赵广陆
04-26 1136
1.13BOM 和 DOM 对象 什么是BOM BOM是Browser Object Model的简写，即浏览器对象模型。 BOM由一系列对象组成，是访问、控制、修改浏览器的 属性的方法 BOM没有统一的标准(每种客户端都可以自定标准)。 BOM的顶层是window对象 什么是DOM DOM是Document Object Model的简写，即文档对象模 型。 ...
frameset（框架）嵌套
wyy的博客
04-16 906
<html> <head> <meta charset="utf-8"> <title></title> </head> <frameset rows="210px,*,100px" > <frame src="index.html"/>
jQuery 表格实现
wyy的博客
04-26 852
<script type="text/javascript"> $(function(){ /******实现全选的操作****/ $("#chks").click(function(){ //获得当前框的勾选状态 var flag= $("#chks").prop("checked");
JavaScript DOM 高级编程指南
"JavaScript DOM 高级程序设计（加）桑贝斯" JavaScript DOM（Document Object Model）高级程序设计是Web开发中的重要主题，它涉及到如何使用JavaScript与网页的结构进行交互，包括创建、修改和操作HTML和XML文档的...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

AloneDrifters

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值