实例解读DOM结点操作

怼烎@ 2022-05-23 02:47 189阅读 0赞

DOM提供了丰富的方法来支持对结点的基本操作，即创建、添加、修改和删除结点。

# 一、创建元素结点 #

document.createElement('div'); //创建一个div元素

当使用createElement方法创建元素后，元素并没有被立即加入到当前的DOM树中，而是被存放在内存中。只有在使用添加结点的相关方法进行操作，才能真正将元素加入DOM树中。

# 二、创建文本节点 #

使用createTextNode方法可以创建一个文本结点，该方法接受一个字符串作为创建的文本结点的文本值。

document.createTextNode('It is a text node');

# 三、添加结点 #

Node对象提供了appendChild方法来将程序创建的结点添加到父结点的直属子结点列表的末尾。

node.appendChild(newNode);

现在结合上边介绍的创建和添加结点的方法，来制作一个简单的无刷新留言本程序。当然这不是一个真正的留言本，它没有与后台程序和数据库的数据交互，只是模拟客户端的效果，代码如下：

<!DOCTYPE html>
    <html lang="en">
    <head>
    	<meta charset="UTF-8">
    	<title>create & add node demo</title>
    	<style type="text/css">
    		*{margin:0;padding: 0;}
    		html{
    			background-color: #eee;
    			height: 100%;
    		}
    		body{
    			padding:15px;
    			font-size: 11px;
    			width:500px;
    			background-color: #fff;
    			height: 100%;
    			font-family: Tahoma;
    			border-left: 20px solid #ccc;
    		}
    		ul{
    			list-style: none;
    			border-top: 1px solid #999;
    			height: 350px;
    			overflow-x: auto;
    			overflow-y: scroll;
    		}
    		span{
    			font-weight: bold;
    			font-size: 12px;
    		}
    		li{
    			border-bottom: 1px dashed #666;
    			line-height: 20px;
    		}
    		form{
    			margin-top: 10px;
    			border-top: 1px solid #999;
    		}
    		label{
    			display: block;
    			line-height: 20px;
    			font-weight: bold;
    			cursor: pointer;
    			background-color: #999;
    			color: #fff;
    			margin:3px 0;
    			padding-left: 5px;
    			width: 100%;
    		}
    		#txtName, #txtContent{
    			width: 100%;
    			font-size: 11px;
    		}
    		#btnSubmit{
    			display: block;
    			margin-top: 3px;
    			border:1px solid #666;
    			padding:2px 5px;
    			width: 100%;
    		}
    	</style>
    	<script type="text/javascript">
    		function submitMsg(){
    			var name = document.getElementById('txtName').value;
    			var content = document.getElementById('txtContent').value;
    			var span = document.createElement('span');
    			var nameText = document.createTextNode(name);
    			span.appendChild(nameText);
    			var p = document.createElement('p');
    			var contentText = document.createTextNode(content);
    			p.appendChild(contentText);
    			var li = document.createElement('li');
    			li.appendChild(span);
    			li.appendChild(p);
    			document.getElementById('msgList').appendChild(li);
    		}
    	</script>
    </head>
    <body>
    	<h1>Guest Book</h1>
    	<ul id="msgList">
    		<li>
    			<span>Robin Chen</span>
    			<p>Welcome,My friends.</p>
    		</li>
    	</ul>
    	<form name="fmMsg" id="fmMsg" action="?" method="post">
    		<h2>Message</h2>
    		<label for="txtName">name</label>
    		<input type="text" name="txtName" id="txtName" value="guest" οnfοcus="this.select();"/>
    		<label for="txtContent">Message</label>
    		<textarea name="txtContent" rows="4" id="txtContent" οnfοcus="this.select();">something to say.....</textarea>
    		<input type="button" value="Click here to submit your message!" id="btnSubmit" οnclick="submitMsg();"/>
    	</form>
    </body>
    </html>

程序界面如下：

![70][]

填写留言表单：

![70 1][]

单击下面的Click here to submit your message!，所填写的留言立即被显示在上面的列表中，如下：

![70 2][]

# 四、插入子结点 #

Node对象提供了insertBefore方法来将新结点插入到指定子结点的前面，语法格式如下：

parentNode.insertBefore(newNode,childNode);

其中parentNode指的是父结点，newNode是需要插入的新结点，newNode会被作为parentNode的直属子结点，插入childNode的前面。

<!DOCTYPE html>
    <html lang="en">
    <head>
    	<meta charset="UTF-8">
    	<title>insertBefore demo</title>
    	<script type="text/javascript">
    		function addNode(){
    			var Pos = parseInt(document.getElementById('txtPos').value) || 0;
    			var li = document.createElement('li');
    			var text = document.createTextNode('new node');
    			li.appendChild(text);
    			li.style.backgroundColor = '#ff0';
    			var ul = document.getElementById('parent');
    			var lis = ul.getElementsByTagName('li');
    			if(Pos>=lis.length){
    				alert('error index');
    				return;
    			}
    			ul.insertBefore(li,lis[Pos]);
    		}
    	</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>
    	</ul>
    	<label for="txtPos">node position:</label>
    	<input type="text" id="txtPos"/>
    	<input type="button" value="add" οnclick="addNode();"/>
    </body>
    </html>

![70 3][]  ![70 4][]、

# 五、替换子结点 #

Node对象提供了replaceChild方法来使用一个新的结点替换一个子结点，语法格式如下：

parentNode.replaceChild(newNode,ChildNode);

其中parentNode为父结点，newNode为新结点，childNode为要被替换的子结点。

<!DOCTYPE html>
    <html lang="en">
    <head>
    	<meta charset="UTF-8">
    	<title>replaceChild demo</title>
    	<script type="text/javascript">
    		function addNode(){
    			var Pos = parseInt(document.getElementById('txtPos').value) || 0;
    			var li = document.createElement('li');
    			var text = document.createTextNode('new node');
    			li.appendChild(text);
    			li.style.backgroundColor = '#ff0';
    			var ul = document.getElementById('parent');
    			var lis = ul.getElementsByTagName('li');
    			if(Pos>=lis.length){
    				alert('error index');
    				return;
    			}
    			ul.replaceChild(li,lis[Pos]);
    		}
    	</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>
    	</ul>
    	<label for="txtPos">node position:</label>
    	<input type="text" id="txtPos"/>
    	<input type="button" value="add" οnclick="addNode();"/>
    </body>
    </html>

没有添加新结点，只做替换：

![70 5][]   ![70 6][]

# 六、复制结点 #

Node对象提供了cloneNode方法来得到Node对象的一个副本。cloneNode方法接受一个布尔值参数，来标识返回的结点副本中是否包含原结点的子结点。当参数为true时，则包含子结点；当参数为false时，则不包含子结点。

<!DOCTYPE html>
    <html lang="en">
    <head>
    	<meta charset="UTF-8">
    	<title>cloneNode demo</title>
    	<script type="text/javascript">
    		function clone(){
    			var p = document.body.getElementsByTagName('p')[0];
    			var newNode = p.cloneNode(false);
    			document.getElementById('container').appendChild(newNode);
    		}
    		function cloneWithChildNodes(){
    			var p = document.body.getElementsByTagName('p')[0];
    			var newNode = p.cloneNode(true);
    			document.getElementById('container').appendChild(newNode);
    		}
    	</script>
    	<style type="text/css">
    		p{
    			line-height: 20px;
    			background-color: #ff0;
    			height: 20px;
    			width:400px;
    		}
    	</style>
    </head>
    <body>
    	<h1>cloneNode demo</h1>
    	<div id="container">
    		<p>JavaScript cloneChild function demo</p>
    	</div>
    	<input type="button" value="clone node without child nodes" οnclick="clone();"/>
    	<input type="button" value="clone node with child nodes" οnclick="cloneWithChildNodes();"/>
    </body>
    </html>

![70 7][]![70 8][]![70 9][]

# 七、删除子结点 #

Node对象提供了removeChild方法来删除一个直属子结点，该方法接受一个参数，为需要参数的子结点的引用，语法如下：

parentNode.removeChild(childNode);

<!DOCTYPE html>
    <html lang="en">
    <head>
    	<meta charset="UTF-8">
    	<title>removeChild demo</title>
    	<script type="text/javascript">
    	// 删除选中的结点
    		function deleteSelectedItems(){
    			var cbs = document.getElementsByName('cb');
    			var list = document.getElementById('list');
    			var lis = list.getElementsByTagName('li');
    			var deleteItems = [];      //需要删除的结点的集合
    			for(var i=0;i<cbs.length;i++){
    				//如果li中的checkbox被选中，则将该li结点加入到deleteItems数组中
    				if(cbs[i].checked){
    					deleteItems.push(lis[i]);
    				}
    			}
    			for(var i=0;i<deleteItems.length;i++){
    				list.removeChild(deleteItems[i]);  //删除结点
    			}
    		}
    		document.onclick = function(e){
    			var evt = arguments[0] || event;
    			var elm = evt.target || evt.srcElement;
    			if(elm.type == 'button' && elm.className == 'btn'){
    				var li = elm.parentNode;
    				li.parentNode.removeChild(li);
    			}
    		}
    	</script>
    	<style type="text/css">
    		*{
    			margin:0;
    			padding:0;
    		}
    		body{
    			font-size: 12px;
    			font-family: Tahoma;
    			padding-left: 20px;
    		}
    		ul{
    			list-style: none;
    			border:1px solid #666;
    			background-color: #eee;
    			width: 400px;
    			padding: 10px;
    			margin:10px 0;
    		}
    		li{
    			width: 100%;
    			border-bottom: 1px dashed #666;
    			padding: 5px 0;
    		}
    		.btn{
    			float: right;
    		}
    	</style>
    </head>
    <body>
    	<h1>removeChild demo</h1>
    	<ul id="list">
    		<li>
    			<input type="button" value="delete" class="btn"/>
    			<input type="checkbox" name="cb"/>
    			<span>Wildfires May Bring Other Hardships</span>
    		</li>
    		<li>
    			<input type="button" value="delete" class="btn"/>
    			<input type="checkbox" name="cb"/>
    			<span>Wildfires May Bring Other Hardships</span>
    		</li>
    		<li>
    			<input type="button" value="delete" class="btn"/>
    			<input type="checkbox" name="cb"/>
    			<span>Wildfires May Bring Other Hardships</span>
    		</li>
    		<li>
    			<input type="button" value="delete" class="btn"/>
    			<input type="checkbox" name="cb"/>
    			<span>Wildfires May Bring Other Hardships</span>
    		</li>
    		<li>
    			<input type="button" value="delete" class="btn"/>
    			<input type="checkbox" name="cb"/>
    			<span>Wildfires May Bring Other Hardships</span>
    		</li>
    	</ul>
    	<input type="button" value="delete selected items" οnclick="deleteSelectedItems();"/>
    </body>
    </html>

![70 10][]

![70 11][]![70 12][]

![70 13][]![70 14][]

[70]: /images/20220523/0dcb5d857723472a9b67b2f110acbad4.png
[70 1]: /images/20220523/251a2d5bb5f64fc5b5cb68ca3858f352.png
[70 2]: /images/20220523/993f02f6d4f0467b840039f85c0505b1.png
[70 3]: https://img-blog.csdn.net/2018053121402712?watermark/2/text/aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0RGRjE5OTM=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70
[70 4]: /images/20220523/3a03992dc6a1412887fd973397f8c045.png
[70 5]: https://img-blog.csdn.net/20180531215108489?watermark/2/text/aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0RGRjE5OTM=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70
[70 6]: /images/20220523/0e88e4f257e642d9a3347d3b0c1b778c.png
[70 7]: https://img-blog.csdn.net/20180531220557275?watermark/2/text/aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0RGRjE5OTM=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70
[70 8]: https://img-blog.csdn.net/20180531220611508?watermark/2/text/aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0RGRjE5OTM=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70
[70 9]: /images/20220523/edf236edef1a41dfa8f71646fc1294e4.png
[70 10]: /images/20220523/369056f5f43a45f38ac4794230f9627c.png
[70 11]: https://img-blog.csdn.net/20180601100919229?watermark/2/text/aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0RGRjE5OTM=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70
[70 12]: /images/20220523/f509c91eecff4e52bf9128bebae19246.png
[70 13]: https://img-blog.csdn.net/20180601101006217?watermark/2/text/aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0RGRjE5OTM=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70
[70 14]: /images/20220523/039ab1b56c3147fa8be11a33d9309a8a.png