DOM基础加强一

最新推荐文章于 2024-08-25 00:00:00 发布

笑笑学生

最新推荐文章于 2024-08-25 00:00:00 发布

阅读量169

点赞数 1

分类专栏： # html

本文链接：https://blog.csdn.net/qq_20337985/article/details/79277308

版权

html 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

DOM是什么？组成部分?

document object model 文档对象模型
是W3C组织制订的一套用于访问XML和HTML文档的标准.允许脚本动态地访问和更新文档的内容、结构和样式.

分类

DOM Core
XML DOM
HTML DOM

XML介绍

html它的主要作用是:显示
xml它的主要作用是:信息的存储和传送。

把html有嵌套层次关系的文档看做一个对象document

Node:节点

Document:代表整个文档
Element:代表一个标记（元素）
Text:标记中的文本
Attribute:代表一个属性。元素才有属性

XML DOM和HTML DOM

XML DOM 定义了访问和处理 XML 文档的标准方法
HTML文档格式符合XML语法标准，所以可以使用XML DOM API

在XML DOM每个元素，都会被解析为一个节点Node。
HTML DOM 定义了针对HTML文档的对象，可以说是一套更加适用于JavaScript技术开发的API
HTML DOM是对XML DOM的扩展
进行JavaScript DOM开发，可以同时使用 XML DOM和 HTML DOM

xml:可扩展标记语言。相对HTML来讲的

HTML:<a>标签,代表着一个超链接，含义是固定的。说明HTML标记是有限的。
XML:<黑马>黑马不黑</黑马> 自定义标签，扩展性很强。

可不可以把HTML当做XML来看。

XML DOM方式解析HTML,还能解析XML.
HTML DOM方式解析HTML。

练习

先用XML DOM解析HTML(很麻烦)
再用HTML DOM解析HTML(很简单)

如果把HTML当做XML对待，不会忽略回车空格和制表符。

DOM的基本属性

常用方法：

getElementById()返回对拥有指定 id 的第一个对象的引用，在html中，每个标签要有唯一的id。对于id的管理浏览器处理不严格的。
getElementsByName()返回带有指定名称的对象集合
getElementsByTagName()返回带有指定标签名的对象集合

实例1：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Document.html</title>
<script type="text/javascript">
	window.onload = function(){
		var i1Obj = document.getElementById("i1");
		alert(i1Obj.value);
		
		var ps = document.getElementsByName("password");	//数组
		for(var i=0;i<ps.length;i++){
			alert(ps[i].value);
		}
		
		var inputObjs = document.getElementsByTagName("input");
		for(var i=0;i<inputObjs.length;i++){
			alert(inputObjs[i].value);
		}
	}
</script>
</head>
<body>
	<input type="text" id="i1" name="password"><br/>
	<input type="text" id="i2" name="password"><br/>
</body>
</html>

DOM 节点常用属性:

nodeName

如果节点是元素节点，nodeName返回这个元素的名称
如果是属性节点，nodeName返回这个属性的名称
如果是文本节点，nodeName返回一个内容为#text 的字符串

nodeType

Node.ELEMENT_NODE —1 – 元素节点
Node.ATTRIBUTE_NODE —2 – 属性节点
Node.TEXT_NODE —3 – 文本节点

nodeValue

如果给定节点是一个属性节点，返回值是这个属性的值
如果给定节点是一个文本节点，返回值是这个文本节点内容
如果给定节点是一个元素节点，返回值是 null

实例2：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Node</title>
<script type="text/javascript">
	//XML DOM
	window.onload=function(){
		var divObj = document.getElementById("d1");
		//打印元素节点的三个属性
		//alert("nodeName="+divObj.nodeName+";nodeType="+divObj.nodeType+";nodeValue="+divObj.nodeValue);
		
		//打印属性的三个属性：如何得到属性节点
		var styleNode = divObj.getAttributeNode("style");// XML DOM方式获得元素中的属性节点 (属性节点的nodeValue取值老的IE有问题)
		//alert("nodeName="+styleNode.nodeName+";nodeType="+styleNode.nodeType+";nodeValue="+styleNode.nodeValue);
		
		var textNode = divObj.firstChild;
		alert("nodeName="+textNode.nodeName+";nodeType="+textNode.nodeType+";nodeValue="+textNode.nodeValue);
	}
</script>
</head>
<body>
	<div id="d1" style="width: 500px;height: 200px;border: blue 1px solid;background-color: #c3f3c3;">黑马有点不黑</div>
</body>
</html>

实例3：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script type="text/javascript">
	window.onload = function(){
		var h1Obj = document.getElementById("h1");
		//alert(h1Obj.firstChild.nodeValue);
		
		//alert(h1Obj.innerHTML);	//innerHTML不是标准的。
		
		var nodes = h1Obj.childNodes;
		alert(nodes[0].nodeValue);
	}
</script>
</head>
<body>
	<h1 id="h1">黑马程序员</h1>
</body>
</html>

实例4：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script type="text/javascript">
	//汉字内容打印
	window.onload = function(){
	/**
		//方式1：
		document.getElementById("bt1").onclick = function(){
			//根据标签名称获得所有li节点
			var lis = document.getElementsByTagName("li");
			//遍历li节点
			for(var i=0;i<lis.length;i++){
				//得到他们的所有的孩子节点
				var childs = lis[i].childNodes;
				//是文本节点，就把内容打印出来
				for(var j=0;j<childs.length;j++){
					if(childs[j].nodeType == 3){
						alert(childs[j].nodeValue);
					}
				}
			}
		}
	**/
	
		//方式2：
		document.getElementById("bt1").onclick = function(){
			//alert("haha");
			var lis = document.getElementsByTagName("li");
			for(var i=0;i<lis.length;i++){
				treewalk(lis[i]);
			}
		}
		//递归
		function treewalk(node){
			if(node.nodeType == 3){
				alert(node.nodeValue);
			}else{
				//得到孩子节点
				var nodes = node.childNodes;	
				for(var i=0;i< nodes.length;i++){
					treewalk(nodes[i]);
				}
			}
		}		
	}
</script>
</head>
<body>
	<ul>
		<li id="bj" value="beijing">
			北京
			<h1>海淀</h1>
			奥运
		</li>
		<li id="sh" value="shanghai">
			上海
		</li>
		<br/>
	</ul>
	<input type="button"  id="bt1" value="取值"/>
</body>
</html>

实例5：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script type="text/javascript">
	//XML DOM
	window.onload = function(){
		document.getElementById("bt1").onclick = function(){
			var nodes = document.getElementById("edu").childNodes;
			alert(nodes.length);
			for(var i=0;i<nodes.length;i++){
				if(nodes[i].nodeType==1){
					alert(nodes[i].firstChild.nodeValue);
				}
			}
		}
	}
</script>
</head>
<body>
	<select id="edu" name="edu">
		<option value="BS">博士</option>
		<option value="SS">硕士</option>
		<option value="BK">本科</option>
		<option value="ZK">专科</option>
		<option value="GZ">高中</option>
		<option value="CZ">初中</option>
		<option value="XX">小学</option>
		<option value="TJ">胎教</option>
	</select>
	<input type="button" id="bt1" value="取值"/>
</body>
</html>

实例6：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script type="text/javascript">
	//XML DOM节点替换
	window.onload=function(){
		document.getElementById("name").onclick=function(){
			//点击时：牛骞被  打灰机 节点替换
			var nameNode = document.getElementById("name");
			var playNode = document.getElementById("play");
			
			//通过nameNode的父标签来操作替换
			nameNode.parentNode.replaceChild(playNode,nameNode);
		}
	}
</script>
</head>
<body>
	<ul>
    	<li id="name">牛骞</li>
    	<li>刘飞</li>
    </ul>
    <ul>
    	<li id="play">
			打<p>灰机</p>
    	</li>
    	<li>吃西瓜</li>
    </ul>
</body>
</html>

实例7：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script type="text/javascript">
	//添加一项：<option value="TJ">胎教</option>
	window.onload = function(){
		document.getElementById("bt1").onclick = function(){
			//创建option元素
			var optionE = document.createElement("option");	
			//添加属性和文本字节点
			optionE.setAttribute("value","TJ");
			
			var textNode = document.createTextNode("胎教");
			optionE.appendChild(textNode);
			
			//得到id=edu节点，添加一个孩子节点
			document.getElementById("edu").appendChild(optionE);
		}
	}
</script>
</head>
<body>
	<select id="edu" name="edu">
		<option value="BS">博士</option>
		<option value="SS">硕士</option>
		<option value="BK">本科</option>
		<option value="ZK">专科</option>
		<option value="GZ">高中</option>
		<option value="CZ">初中</option>
		<option value="XX">小学</option>
	</select>
	<input type="button" id="bt1" value="添加"/>
</body>
</html>

实例8：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script type="text/javascript">
	window.onload=function(){
		document.getElementById("bt1").onclick=function(){
			//添加一行到表格的末尾
			
			/*
			<tr>
				<td>陈冠希</td>
				<td>cgx@itheima.com</td>
				<td>28</td>
				<td>
					<input type="button" value="删除" onclick="del(this)"/>
				</td>
			</tr>
			*/
			
			var nameValue = document.getElementById("name").value;
			var emailValue = document.getElementById("email").value;
			var ageValue = document.getElementById("age").value;
			
			//创建tr元素，依次创建td和文本
			var trNode = document.createElement("tr");	// <tr></tr>
			var tdNameNode = document.createElement("td");	// <td></td>		
			tdNameNode.appendChild(document.createTextNode(nameValue));	//<td>name</td>
			
			var tdEmailNode = document.createElement("td");
			tdEmailNode.appendChild(document.createTextNode(emailValue));
			
			var tdAgeNode = document.createElement("td");	
			tdAgeNode.appendChild(document.createTextNode(ageValue));	
			
			
			var inputNode = document.createElement("input");//<input/>
			//<input type="button" value="删除" onclick="del(this)"/>
			inputNode.setAttribute("type", "button");
			inputNode.setAttribute("value", "删除");
			inputNode.setAttribute("onclick", "del(this)");
			
			var tdOpNode = document.createElement("td");	
			tdOpNode.appendChild(inputNode);	
			
			//把td添加到tr上
			trNode.appendChild(tdNameNode);
			trNode.appendChild(tdEmailNode);
			trNode.appendChild(tdAgeNode);
			trNode.appendChild(tdOpNode);
			
			//把tr搞到table上
			//创建一个tbody，把tr搞到tbody，再把tbody搞到table上
			var tbodyNode = document.createElement("tbody");
			tbodyNode.appendChild(trNode);
			document.getElementById("t1").appendChild(tbodyNode);
		}
	}

	function del(obj){
		var trParent = obj.parentNode.parentNode.parentNode;
		trParent.removeChild(obj.parentNode.parentNode);
	}
</script>
</head>
<body>
	姓名：<input type="text" id="name" name="name"/>
	邮箱：<input type="text" id="email" name="email"/>
	年龄：<input type="text" id="age" name="age"/><br/>
	<input type="button" id="bt1" value="添加"/>
	<hr/>
	<table id="t1" border="1" width="438">
		<tr>
			<th>姓名</th>
			<th>邮箱</th>
			<th>年龄</th>
			<th>操作</th>
		</tr>
		<tr>
			<td>陈冠希</td>
			<td>cgx@itheima.com</td>
			<td>28</td>
			<td>
				<input type="button" value="删除" onclick="del(this)"/>
			</td>
		</tr>
	</table>
</body>
</html>

注意：
深入浅出tbody：
http://blog.csdn.net/seabreezesuper/article/details/62428321

实例9：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script type="text/javascript">
	window.onload=function(){
		//<input id="selectDeSelectAll" type="checkbox">全选/全不选<br/>
		document.getElementById("selectDeSelectAll").onclick=function(){
			var hobby = document.getElementsByName("hobby");
			for(var i=0;i<hobby.length;i++){
				hobby[i].checked=this.checked;
			}
		}
		document.getElementById("bt1").onclick=function(){
			var hobby = document.getElementsByName("hobby");
			for(var i=0;i<hobby.length;i++){
				hobby[i].checked=true;
			}
		}
		document.getElementById("bt2").onclick=function(){
			var hobby = document.getElementsByName("hobby");
			for(var i=0;i<hobby.length;i++){
				hobby[i].checked=false;
			}
		}
		document.getElementById("bt3").onclick=function(){
			var hobby = document.getElementsByName("hobby");
			for(var i=0;i<hobby.length;i++){
				hobby[i].checked=!hobby[i].checked;
			}
		}
	}
</script>
</head>
<body>
    <input id="selectDeSelectAll" type="checkbox">全选/全不选<br/>
    <input type="checkbox" name="hobby" value="eat"/>吃饭
    <input type="checkbox" name="hobby" value="sleep"/>睡觉
    <input type="checkbox" name="hobby" value="java"/>学Java
    <br/>
    <input type="button" id="bt1" value="全选"/>
    <input type="button" id="bt2" value="全不选"/>
    <input type="button" id="bt3" value="反选"/>
</body>
</html>

实例10：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script type="text/javascript">
	window.onload=function(){
		//<input type="button" id="toRight" value="-->"/><br/>
		
		document.getElementById("toRight").onclick=function(){
			//左边的到右边的
			//得到左侧的select中的option元素，被选中的，搞到右边去
			var leftSelectNode = document.getElementById("leftSelect");
			var nodes = leftSelectNode.childNodes;
			for(var i=0;i<nodes.length;i++){
				if(nodes[i].nodeType==1){
				
					//getAttribute("selected")浏览器的兼容性问题
					//if(nodes[i].getAttribute("selected"))
					
					if(nodes[i].selected){
						document.getElementById("rightSelect").appendChild(nodes[i]);
					}
				}
			}
		}
		
		//<input type="button" id="allToRight" value=">>"/><br/>
		document.getElementById("allToRight").onclick=function(){
			var leftSelectNode = document.getElementById("leftSelect");
			var nodes = leftSelectNode.childNodes;
			var nodesLength = nodes.length;
			for(var i=nodesLength-1;i>=0;i--){//JS中的数组是可变数组
				if(nodes[i].nodeType==1){
					document.getElementById("rightSelect").appendChild(nodes[i]);
				}
			}
		}
		
		//<input type="button" id="toLeft" value="<--"/><br/>
		//<input type="button" id="allToRight" value="<<"/><br/>
	
	}
</script>
</head>
<body>
    <table width="438">
    	<tr>
    		<td>
    			<select id="leftSelect" size="7">
    				<option value="BJ">北京</option>
    				<option value="SD">山东</option>
    				<option value="HB">湖北</option>
    				<option value="GD">广东</option>
    				<option value="SX">山西</option>
    				<option value="XJ">新疆</option>
    			</select>
    		</td>
    		<td>
    			<input type="button" id="toRight" value="-->"/><br/>
    			<input type="button" id="allToRight" value=">>"/><br/>
    			<input type="button" id="toLeft" value="<--"/><br/>
    			<input type="button" id="allToRight" value="<<"/><br/>
    		</td>
    		<td>
    			<select id="rightSelect" size="7">
    			</select>
    		</td>
    	</tr>
    </table>
</body>
</html>

注意：
只有IE8可以获得nodes[i].getAttribute(“selected”)的值,建议改为:nodes[i].selected
http://www.flyne.org/article/420
https://www.cnblogs.com/snandy/archive/2011/09/01/2162088.html

实例11：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script type="text/javascript">
	//HTML DOM
	//添加一项：<option value="TJ">胎教</option>
	window.onload=function(){
		document.getElementById("bt1").onclick=function(){
			var op = new Option("胎教","TJ");
			document.getElementById("edu").add(op);
		}
	}
</script>
</head>
<body>
    <select id="edu" name="edu">
    	<option value="BS">博士</option>
    	<option value="SS">硕士</option>
    	<option value="BK">本科</option>
    	<option value="ZK">专科</option>
    	<option value="GZ">高中</option>
    	<option value="CZ">初中</option>
    	<option value="XX">小学</option>
    </select>
    <input type="button" id="bt1" value="添加"/>
</body>
</html>

实例12：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script type="text/javascript">
	window.onload=function(){
		document.getElementById("bt1").onclick=function(){
			
			var nameValue = document.getElementById("name").value;
			var emailValue = document.getElementById("email").value;
			var ageValue = document.getElementById("age").value;
			
			var rowsNum = document.getElementById("t1").rows.length;//表中的行数
			var newRow = document.getElementById("t1").insertRow(rowsNum);//插入的新行
			newRow.innerHTML="<td>"+nameValue+"</td><td>"+emailValue+"</td><td>"+ageValue+"</td><td><input type='button' value='删除' onclick='del(this)'/></td>";
		}
	}
	
	function del(obj){
		var trParent = obj.parentNode.parentNode.parentNode;
		trParent.removeChild(obj.parentNode.parentNode);
	}
</script>
</head>
<body>
	姓名：<input type="text" id="name" name="name"/>
	邮箱：<input type="text" id="email" name="email"/>
	年龄：<input type="text" id="age" name="age"/><br/>
	<input type="button" id="bt1" value="添加"/>
	<hr/>
	<table id="t1" border="1" width="438">
		<tr>
			<th>姓名</th>
			<th>邮箱</th>
			<th>年龄</th>
			<th>操作</th>
		</tr>
		<tr>
			<td>陈冠希</td>
			<td>cgx@itheima.com</td>
			<td>28</td>
			<td>
				<input type="button" value="删除" onclick="del(this)"/>
			</td>
		</tr>
	</table>
</body>
</html>

注意：
Eclipse技巧：
点击文件，右键，Compare With——Local history找到历史记录。

实例13：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script type="text/javascript">
	//HTML DOM
	window.onload=function(){
		document.getElementById("toRight").onclick=function(){
			var leftSelectNode = document.getElementById("leftSelect");
			var index = leftSelectNode.selectedIndex;//当前选中的option的索引
			document.getElementById("rightSelect").add(leftSelectNode.options[index]);
		}
		document.getElementById("allToRight").onclick=function(){
			var leftSelectNode = document.getElementById("leftSelect");
			var options = leftSelectNode.options;//所有的选项
			var opLength = options.length;
			for(var i=0;i<opLength;i++){//控制次数
				document.getElementById("rightSelect").add(options[0]);
			}
		}

		//<input type="button" id="toLeft" value="<--"/><br/>
		//<input type="button" id="allToRight" value="<<"/><br/>		
	}
</script>
</head>
<body>
    <table width="438">
    	<tr>
    		<td>
    			<select id="leftSelect" size="7">
    				<option value="BJ">北京</option>
    				<option value="SD">山东</option>
    				<option value="HB">湖北</option>
    				<option value="GD">广东</option>
    				<option value="SX">山西</option>
    				<option value="XJ">新疆</option>
    			</select>
    		</td>
    		<td>
    			<input type="button" id="toRight" value="-->"/><br/>
    			<input type="button" id="allToRight" value=">>"/><br/>
    			<input type="button" id="toLeft" value="<--"/><br/>
    			<input type="button" id="allToRight" value="<<"/><br/>
    		</td>
    		<td>
    			<select id="rightSelect" size="7">
    			</select>
    		</td>
    	</tr>
    </table>
</body>
</html>