豆皮没有豆
JavaScript教程（十六）JavaScript中的DoM操作

1. 什么是 DOM？
DOM是W3C(万维网联盟)的标准.
DOM 定义了访问 HTML 和 XML 文档的标准:
“W3C文档对象模型(DOM)是中立于平台和语言的接口,它允许程序和脚本动态地访问和更新文档的内容\结构和样式.”
W3C DOM标准被分为3个不同的部分:
(1)核心 DOM - 针对任何结构化文档的标准模型
(2)XML DOM - 针对 XML 文档的标准模型
(3)HTML DOM - 针对 HTML 文档的标准模型
注：DOM 是 Document Object Model（文档对象模型）的缩写
2. JavaScript 中 DOM 节点操作
在HTML DOM中,所有事物都是节点.DOM是被视为节点树的 HTML.
HTML 文档中的所有内容都是节点:
整个文档是一个文档节点;
每个 HTML 元素是元素节点;
HTML 元素内的文本是文本节点;
每个 HTML 属性是属性节点;
注释是注释节点.
在这里插入图片描述
节点父、子和同胞
节点树中的节点彼此拥有层级关系.
父(parent)、子(child)和同胞(sibling)等术语用于描述这些关系.父节点拥有子节点.同级的子节点被称为同胞(兄弟或姐妹).
在节点树中,顶端节点被称为根(root);
每个节点都有父节点、除了根(它没有父节点);
一个节点可拥有任意数量的子节点;
同胞是拥有相同父节点的节点.
下面的代码展示了节点树的一部分，以及节点之间的关系:

<html>
	 <head>
	 	 <title>DOM 教程</title>
 	 </head>
 	 <body>
 	   	 <h1>DOM 第一课</h1> 
 	   	 <p>Hello world!</p>
   	 </body>
 </html>

在这里插入图片描述
3. JavaScript 的 DOM 方法
方法是我们可以在节点(HTML 元素)上执行的动作.
编程接口
可通过 JavaScript(以及其他编程语言)对HTML DOM 进行访问.所有 HTML元素被定义为对象,而编程接口则是对象方法和对象属性.
方法是您能够执行的动作(比如添加或修改元素).
属性是您能够获取或设置的值(比如节点的名称或内容).
(1)一些常用的 HTML DOM 方法：
在这里插入图片描述
(2)一些常用的 HTML DOM 属性：
innerHTML -----节点（元素）的文本值
parentNode -----节点（元素）的父节点
childNodes ----- 节点（元素）的子节点
attributes ---- 节点（元素）的属性节点
nodeName ----节点的名称
nodeValue -----节点的值
nodeType -----节点的类型
4. HTML DOM 操作元素
(1)访问 HTML 元素（节点）
常用的访问 HTML 元素的方法：
通过使用 getElementById() 方法;
通过使用 getElementsByTagName() 方法;
通过使用 getElementsByClassName() 方法;
通过使用 getElementsByName() 方法.
①getElementById()方法
getElementById()方法返回带有指定 ID 的元素.
语法:document.getElementById(“id 值”) ；
②getElementsByTagName()方法
getElementsByTagName()返回带有指定标签名的所有元素.
语法:元素.getElementsByTagName(“标签名称”);
③getElementsByClassName()方法
getElementsByClassName()返回带有指定 class 的元素.
语法元素.getElementsByTagName(“class 值”);
④getElementsByName()方法
getElementsByName()返回带有指定name的元素.
语法:元素.getElementsByTagName(“name 值”);
(2)对于元素节点的操作
常用的操作元素节点的增、删、改、及重置所在位置的方法：
通过使用 appendChild()方法
使用 removeChild()方法
使用 replaceChild()方法
使用 insertBefore()方法
① appendChild()方法
功能：把新的子节点添加到指定节点.
eg:

<body>
	<div class="div1"></div>
	<span id="span1">span1</span>
</body>
..............
<script type="text/javascript">
	window.onload=function(){
		var div1=document.getElementsByClassName('div1')[0];
		var sp1=document.getElementById('span1');
		div1.appendChild(sp1);
	}
</script>

如图将span添加到了div里
在这里插入图片描述
② removeChild()方法
功能：删除子节点.
eg:

<body>
	<div id="div1">div 
		<span id="sp1">span</span> 
	</div> 
</body>
.................
<script type="text/javascript">
	window.onload=function(){
		var sp1=document.getElementById("sp1"); 
		var div1=document.getElementById("div1"); 
		div1.removeChild(sp1);
	}
</script>

如图删除了div里包含的span
在这里插入图片描述
③replaceChild()方法
功能：替换子节点.
eg:

<body>
	<div class="div1"></div>
	<span id="span1">span1</span>
</body>
...................
<script type="text/javascript">
	window.onload=function(){
		var body=document.getElementsByTagName('body')[0];
		var sp1=document.getElementById('span1');
		var p=document.createElement('p');
		body.replaceChild(p,sp1);
	}
</script>

如图件span替换成p标签
在这里插入图片描述
④ insertBefore()方法
功能：在指定的子节点前面插入新的子节点.
eg:

<body>
	<ul id="ul_01">
		<li>首页</li>
		<li>数码产品</li>
		<li>童装</li>
	</ul>
</body>
.....................
<script type="text/javascript">
	window.onload=function(){
		var ul_n=document.getElementById('ul_01');
		var li_01=document.createElement('li');
		var li_old=document.getElementsByTagName('li')[1];
		ul_n.insertBefore(li_01,li_old);
	}
</script>

如图插入了一个空的li
在这里插入图片描述
(3)对于节点属性及内容的操作
常用的创建元素属性、节点、文本及获取、修改属性值方法：
通过使用 createElement()方法;
通过使用 createTextNode()方法;
通过使用 createAttribute()方法;
通过使用 getAttribute()方法;
通过使用 setAttribute()方法.
①createElement()方法;② createAttribute()方法③ getAttribute()方法
功能：创建元素节点;功能：创建属性节点.
eg:

//body为空直接写script
<script type="text/javascript">
	window.onload=function(){
		var body=document.getElementsByTagName('body')[0];
		//创建新的元素div
		var div_01=document.createElement('div');
		//创建div元素的属性 createAttribute()
		var class_01=document.createAttribute('class');
		//给创建的属性class赋值
		class_01.value='div01';
		div_01.setAttributeNode(class_01);  //给元素设置属性节点
		body.appendChild(div_01);
		//获取div的属性class的值getAttribute()
		alert(div_01.getAttribute('class'));
	}
</script>

如图在body里创建了一个div并添加了class属性
在这里插入图片描述
④ createTextNode()方法
功能：创建文本节点.
⑤setAttribute()方法
功能：把指定属性设置或修改为指定的值.
(4)常用的 HTML DOM 属性
① innerHTML 属性
功能:设置或返回表格行的开始和结束标签之间的HTML
②parentNode 属性
功能:以 Node 对象的形式返回指定节点的父节点;如果指定节点没 有父节点,则返回 null.
③childNodes 属性
功能:返回节点的子节点集合,以 NodeList 对象.
④attributes 属性
功能:返回指定节点的属性集合,即 NamedNodeMap.
⑤nodeName 属性
功能:nodeName 属性指定节点的节点名称.
⑥nodeValue 属性
功能： 设置或返回指定节点的节点值.
eg:

<body>
	<div id="div2"></div>
	<button id="btn" onclick="btn();">点击试试</button>
	<div id="div1">
		<ul id="ul_01">
			<li>phone</li>
			<li>Huawei</li>
			<li>三星</li>
		</ul>
	</div>
</body>
...............
<script type="text/javascript">
	window.onload=function(){
				
	//(1)属性parentNode
//		var ul_01=document.getElementById('ul_01');
		//alert(ul_01.parentNode); //[object HTMLDivElement]
		//alert(ul_01.parentNode.nodeName);//DIV
				
		//(2)childNodes: 表示返回节点的子节点集合
		 //alert(ul_01.childNodes); //返回[object NodeList]
			 
//		var length=ul_01.childNodes.length;
//		alert(length);
//		for(var i=0;i<length;i++){
//			document.write(ul_01.childNodes[i].nodeName);
//		}
	}
	function btn(){  	
		var attrs=document.getElementById('btn').attributes;
		//alert(attrs);  //返回:[object NamedNodeMap]
		//alert(attrs.length);
		//将获取到的属性名称  写入div中
//		document.getElementById('div2').innerHTML=attrs[0].nodeName;
	
		//获取属性节点的值  nodeValue
		document.getElementById('div2').innerHTML=attrs[0].nodeValue;	
	}
</script>
posted on 2018-12-16 15:41  豆皮没有豆  阅读(157)  评论(0)    收藏  举报

博客园  ©  2004-2025
浙公网安备 33010602011771号 浙ICP备2021040463号-3 Powered By博客园