实例解读DOM结点的引用

最新推荐文章于 2024-02-28 15:47:52 发布

杜小白Zero

最新推荐文章于 2024-02-28 15:47:52 发布

阅读量662

点赞数

分类专栏： AJAX 文章标签： getElementById getElementsByName getElementsByTagName parentNode和childNodes previousSibling和nextSibling

本文链接：https://blog.csdn.net/DFF1993/article/details/80519924

版权

AJAX 专栏收录该内容

16 篇文章 1 订阅

订阅专栏

DOM，Document Object Module文档对象模型，今天主要介绍DOM中对结点的引用操作。

 
 根据id属性引用结点
根据name属性引用结点
根据标签名引用结点
引用父结点
引用子结点
引用相邻的结点
 

一、根据id属性引用结点

通过document对象的getElementById方法来查找拥有指定id属性值的结点。

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>getElementById</title>
	<script type="text/javascript">
		window.onload = function(){         //页面加载完成之后函数体内的代码
			var topic = document.getElementById("topic"); //获取id为topic的结点的引用
			alert(topic.innerHTML);           //弹出对话框显示该结点内的HTML内容
		}
	</script>
</head>
<body>
	<h1 id="topic">topic</h1>
	<p>something<strong>important</strong></p>
</body>
</html>

程序中，在页面加载完成后，首先通过getElementById方法获取了id为topic的结点的引用，然后用对话框显示该结点内的HTML内容。

二、根据name属性引用结点

通过document对象的getElementsByName方法可以取得文档中所有具有指定name属性的结点的集合，该方法返回的是一个数组。例如，在读取一个表单数据时，可以通过该方法取得表单中所有checkbox控件并读取选中控件的值。

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>getElementsByName</title>
	<script type="text/javascript">
		function showCheckedDate(){
			var elms = document.getElementsByName('demo');
			var values = [];
			for(var i=0;i<elms.length;i++){
				if(elms[i].checked){
					values.push(elms[i].value);
				}
			}
			alert(values.join(','));
		}
	</script>
</head>
<body>
	<form action="" method="post">
		<label>1:<input type="checkbox" name="demo" value="1"/></label>
		<label>2:<input type="checkbox" name="demo" value="2"/></label>
		<label>3:<input type="checkbox" name="demo" value="3"/></label>
		<label>4:<input type="checkbox" name="demo" value="4"/></label>
		<label>5:<input type="checkbox" name="demo" value="5"/></label><br/>
		<input type="button" value="show checked data" οnclick="showCheckedDate();"/>
	</form>
</body>
</html>

三、根据标签名引用结点

document对象支持getElementsByTagName方法来查找所有标签名与给定参数一致的下属结点，该方法返回一个数组。

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>getElementsByTagName</title>
	<script type="text/javascript">
		function modifyLinksBgColor(){
			var links = document.body.getElementsByTagName('a');
			for(var i=0;i<links.length;i++){
				links[i].style.backgroundColor = '#FF0';
			}
		}
	</script>
</head>
<body>
	<p><a href="http://www.robchen.cn">AJAX从入门到精通</a></p>
	<p><a href="http://www.robchen.cn">AJAX从入门到精通</a></p>
	<p><a href="http://www.robchen.cn">AJAX从入门到精通</a></p>
	<p><a href="http://www.robchen.cn">AJAX从入门到精通</a></p>
	<p><a href="http://www.robchen.cn">AJAX从入门到精通</a></p>
	<p><a href="http://www.robchen.cn">AJAX从入门到精通</a></p>
	<br/>
	<input type="button" id="btnModify" value="Modify links background color" οnclick="modifyLinksBgColor();"/>
</body>
</html>

四、引用父结点

Node对象提供了parentNode属性来引用当前结点的父结点。

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>parentNode demo</title>
	<script type="text/javascript">
		window.onload = function(){
			var lis = document.body.getElementsByTagName('li');
			for(var i=0;i<lis.length;i++){
				lis[i].onclick = function(){
					document.getElementById('msg').innerHTML = 'the current node\'s parent is:<strong>'+this.parentNode.id+'</strong>';//this指针指向当前对象，在这里指向lis[i]
				}
			}
		}
	</script>
	<style type="text/css">
		li{cursor: pointer;}
		#msg{background-color: #FF0;}
	</style>
</head>
<body>
	<h1>ParentNode Demo</h1>
	<h2>Navigation</h2>
	<ul id="navigation">
		<li>Home</li>
		<li>Products</li>
		<li>GuestBook</li>
	</ul>
	<h3>Sub Navigation</h3>
	<ul id="subNavigation">
		<li>World News</li>
		<li>Company News</li>
	</ul>
	<div id="msg"></div>
</body>
</html>

五、引用子结点

Node对象提供了3个属性来引用其直属子结点，分别是childNodes、firstChild和lastChild。childNodes属性来引用其所有的直属子结点，firstChild属性等于childNodes返回的元素集合中的第一个元素，lastChild属性等于childNodes返回的元素集合中的最后一个元素。

在下面的实例中，首先获取文档中的ul元素，然后通过firstChild、lastChild和childNodes属性给第一个li结点和最后一个li结点以及剩下的其他结点设置3种不同的背景色。

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>childNode demo</title>
	<script type="text/javascript">
		window.onload = function(){
			var ul = document.getElementById('parent');
			for(var i=0;i<ul.childNodes.length;i++){//在chrome浏览器下，ul的直属子元素不仅仅是li元素，也包含了一些空白的文本节点，作此处理
				if(ul.childNodes[i].nodeType == 3){
					ul.childNodes[i].parentNode.removeChild(ul.childNodes[i]);
				}
			}
			ul.firstChild.style.backgroundColor = '#FF0';
			ul.lastChild.style.backgroundColor = '#F00';
			for(var i=1;i<ul.childNodes.length-1;i++){
				ul.childNodes[i].style.backgroundColor = '#eee';
				}
			}
	</script>
</head>
<body>
	<ul id="parent">
		<li>child node</li>
		<li>child node</li>
		<li>child node</li>
		<li>child node</li>
		<li>child node</li>
		<li>child node</li>
		<li>child node</li>
		<li>child node</li>
		<li>child node</li>
		<li>child node</li>
	</ul>
</body>
</html>

六、引用相邻的结点

Node对象的previousSibling和nextSibling属性保存了结点的上一个和下一个兄弟结点的引用。在下面的实例中，通过给li结点定义事件处理程序，使得当鼠标划过li结点时，li结点本身的背景色变为红色，其相邻两个li结点的背景色变为黄色，当鼠标划离li元素时，恢复原样。

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>previousSibling nextSibling</title>
	<script type="text/javascript">
		window.onload = function(){
			var ul = document.getElementById('parent');
			for(var i=0;i<ul.childNodes.length;i++){
				if(ul.childNodes[i].nodeType == 3)
					ul.childNodes[i].parentNode.removeChild(ul.childNodes[i]);
			}
			for(var i=0;i<ul.childNodes.length;i++){
				ul.childNodes[i].onmouseover = function(){
					if(this.previousSibling){
						this.previousSibling.style.backgroundColor = '#ff0';
					}
					if(this.nextSibling){
						this.nextSibling.style.backgroundColor = '#ff0';
					}
					this.style.backgroundColor = '#f00';
				}
				ul.childNodes[i].onmouseout = function(){
					if(this.previousSibling){
						this.previousSibling.style.backgroundColor = '#fff';
					}
					if(this.nextSibling){
						this.nextSibling.style.backgroundColor = '#fff';
					}
					this.style.backgroundColor = '#fff';
				}
			}
		}
	</script>
</head>
<body>
	<ul id="parent">
		<li>child node</li>
		<li>child node</li>
		<li>child node</li>
		<li>child node</li>
		<li>child node</li>
		<li>child node</li>
		<li>child node</li>
		<li>child node</li>
		<li>child node</li>
		<li>child node</li>
	</ul>
</body>
</html>