js 节点相关内容介绍创建、删除、复制节点

50 阅读 0 评论 33 点赞

我是靠谱客的博主个性枕头，最近开发中收集的这篇文章主要介绍js 节点相关内容介绍创建、删除、复制节点，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

1、节点介绍

1.为什么要学习节点
可以利用父子兄节点关系获取元素
逻辑性强,但是兼容性差.
2.节点概述
(1)网页中所有内容都是节点,用node表示.
(2)所有的节点都可以被修改,也可以创建或删除.
(3)节点至少拥有三个属性值: nodeType(节点类型) nodeName(节点名称) 和nodeValue(节点值)
(4)文本节点分类
i: 元素节点 nodeType为 1
ii: 属性节点 nodeType为 2
iii: 文本节点 nodeType为 3 (文本节点包含文字、空格、换行等)
(5)实际开发中，节点操作主要是操作元素节点。
3、节点层级
DOM树把节点划分为不同的层级关系，常见的是父子兄层级关系。
（1）父级关系
node.parentNode
得到的是离元素最近的父级节点，如果找不到父节点返回为空。
（1）子级关系
-parentNode.childNodes（标准）
得到所有节点，包含属性节点、文本节点、元素节点。
如果想要获取里面的元素节点，要经过循环处理，所以不提倡使用childNodes。
-parentNode.children（非标准）
实际开发中常用的。
-.firstChild
获取第一个元素节点，包含所有节点类型。
-lastChild
获取最后一个元素节点，包含所有节点类型。
-firstElementChild
返回第一个子元素节点；有兼容问题ie9以上可用
-lastElementChild
返回最后一个子元素节点；有兼容问题ie9以上可用。
-实际开发常用方法：
.children[0] ;获得第一个子元素。
.children[元素名.children.length] ;获得最后一个子元素。

2、案例-下拉菜单

<style>
			a {
				text-decoration: none;
				color: #999;
			}

			li {
				list-style: none;
			}

			.nav {
				width: 300px;
				height: 250px;
				margin: 20px auto;
			}

			.nav ul {
				padding-inline-start: 0px;
			}

			.nav ul li {
				float: left;
				margin-top: 10px;
			}

			.nav ul li a {
				position: relative;

				width: 50px;
				height: 30px;
				background-color: #eee;
				line-height: 30px;
				text-align: center;
				margin: 0 20px;
			}

			.nav ul li ul {
				display: none;
				position: relative;
				top: 10px;
				left: 22px;
				width: 30px;
				height: 20px;
				font-size: 12px;
				padding-inline-start: 0px;
			}

			.nav ul li ul li {
				width: 30px;
				height: 20px;
				border: 1px solid yellow;
			}
		</style>

<body>
		<div class="nav">
			<ul>
				<li>
					<a href="">微博</a>
					<ul class="con">
						<li>私信</li>
						<li>评论</li>
						<li>@我</li>
					</ul>
				</li>
				<li>
					<a href="">微博</a>
					<ul>
						<li>私信</li>
						<li>评论</li>
						<li>@我</li>
					</ul>
				</li>
				<li>
					<a href="">微博</a>
					<ul>
						<li>私信</li>
						<li>评论</li>
						<li>@我</li>
					</ul>
				</li>
				<li>
					<a href="">微博</a>
					<ul>
						<li>私信</li>
						<li>评论</li>
						<li>@我</li>
					</ul>
				</li>
			</ul>
		</div>

		<script>
			// 获得元素
			var nav = document.querySelector('.nav');
			var ul = nav.querySelector('ul');
			var lis = ul.children;
			console.log(lis)
			//  绑定元素 
			for (var i = 0; i < lis.length; i++) {
				lis[i].onmouseover = function() {
					this.children[1].style.display = 'block';
				}
				lis[i].onmouseout = function() {
					this.children[1].style.display = 'none';
				}
			}
		</script>
	</body>

3、兄弟节点

（1）.nextSibling
获取当前元素的下一个兄弟节点，找不到返回null，同样是包含所有节点。
（2）.previousSibling
获取当前元素的上一个兄弟节点，找不到返回null，同样是包含所有节点。
（3）.nextElementSibling
返回当前元素的下一个兄弟元素节点，找不到返回null。有兼容性问题，ie9以上支持。
（4）.previousElementSibling
返回当前元素的上一个兄弟元素节点，找不到返回null。有兼容性问题，ie9以上支持。
如何解决兼容性问题：
可以自己封装一个函数
function getNextElementSibling（element）{
var el=element；
while （el = el.nextSibling）{
if( el.nodeType===1){
return el;
}
}
return null;
}

4、创建节点

document.createElement(‘tagName’)
根据我们的需求动态生成的，所以我们也称为动态创建元素节点。
步骤：
（1）创建节点
（2）添加节点
node.appendChild(child)
node是父级，child是子级；后面追加元素
（3）添加元素的另一种方式
node.insertBefore(child,指定元素)
在指定元素的前面添加节点

5、案例-简单发布留言

分析：点击按钮后，生成一个li ,把li添加到ul里；添加li的同时，把文本域的内容通过li.innerHTML赋值给li

	<body>
		<textarea name="" id="" cols="30" rows="10"></textarea>
		<button>添加</button>
		<ul>
		</ul>
		<script>
			//获取元素
			var text = document.querySelector('textarea');
			var btn = document.querySelector('button');
			var ul = document.querySelector('ul');
			//注册事件 
			btn.onclick = function() {
				//创建节点li
				if(text.value==''){
					alert('请输入内容!');
					return false;
				}else{
					var li = document.createElement('li');
					//先有li,才能将文本域的内容赋值给li
					li.innerHTML = text.value;
					// ul.appendChild(li);
					//最新的评论添加到最上面
					ul.insertBefore(li,ul.children[0])
					text.value='';
				}	
			}
		</script>
	</body>

6、删除节点

node.removeChild(child)
从DOM中删除一个字节点，返回删除的节点。
案例：

<body>
		<button>删除</button>
		<ul>
			<li>熊大</li>
			<li>熊二</li>
			<li>关头强</li>
		</ul>
		<script>
			//获取元素
			var ul= document.querySelector('ul');
			var btn = document.querySelector('button');
			//注册事件 
			btn.onclick = function(){
				if(ul.children.length==0){
					this.disabled=true;
				}
				else{
					ul .removeChild(ul.children[0]);
				}
			}
		</script>
	</body>

发布留言并删除留言：
在案例5的基础上，创建li 的同时也要创建个a链接

<body>
		<body>
			<textarea name="" id="" cols="30" rows="10"></textarea>
			<button>添加</button>
			<ul>
			</ul>
			<script>
				//获取元素
				var text = document.querySelector('textarea');
				var btn = document.querySelector('button');
				var ul = document.querySelector('ul');
				//注册事件 
				btn.onclick = function() {
					//创建节点li
					if (text.value == '') {
						alert('请输入内容!');
						return false;
					} else {
						var li = document.createElement('li');
						//先有li,才能将文本域的内容赋值给li
						li.innerHTML = text.value + "<a href='javascript:;'>删除</a>";
						// ul.appendChild(li);
						//最新的评论添加到最上面
						ul.insertBefore(li, ul.children[0])
						text.value = '';
					}
					//删除元素 获取a链接
					var as= document.querySelector('a');
					//绑定事件
					as.onclick = function(){
						ul.removeChild(as.parentNode);
					}
				}
			</script>
		</body>

7、复制节点（克隆节点）

node.cloneNode()
复制之后页面并不存在，要添加后才会在页面中显示。node.appendChild(child)添加节点
注意：
1、如果参数括号为空或者为false，则是浅拷贝，只复制结点本身，不克隆里面的子节点。
2、如果参数括号为空或者为true，则是深拷贝，复制结点本身，并克隆里面的子节点。