jsDom操作之节点操作

节点操作

父节点 parentNode

得到离元素最近的父级节点，如果找不到父节点则返回null

		<script type="text/javascript">
			var par = document.querySelector('.par');
			console.log(par);
			console.log(par.parentNode);
		</script>

子节点

childNodes 获得元素的所有子节点

包括元素节点 文本节点 等等

		<div>我是div</div>
		<span>我是span</span>
		<ul>
			<li>我是Li1</li>
			<li>我是Li2</li>
			<li>我是Li3</li>
			<li>我是Li4</li>
		</ul>
		<ol>
			<li>我是oli1</li>
			<li>我是oli2</li>
			<li>我是oli3</li>
			<li>我是oli4</li>
		</ol>
		<script type="text/javascript">
			var ul = document.querySelector('ul');
			console.log(ul.childNodes);
		</script>

如图所示获取了ul的9个节点【因为换行也算成一个节点-即是text节点】

children 获取的是元素的子节点

var ul = document.querySelector('ul');
//获取所有的ul标签界面的子元素节点
console.log(ul.children);
//获取第几个
console.log(ul.children[i]);

firstChild & lastChild

获取第一个和最后一个子节点 ，不管是元素节点还是文本节点

firstElementChild & lastElementChild

获取第一个 或者 最后一个子元素节点

nextSibling & previousSibing

获取 下一个 或者 上一个 兄弟节点 包括文本节点 和 元素节点

nextElementSibling previousElementSbling

获取兄弟元素节点

插入新的元素节点操作

我们如果想要添加一个新的元素

1、先要创建元素

2、再插入元素

		<ul>
			<li>123</li>
		</ul>
		<script type="text/javascript">
			//创建节点
			var li = document.createElement('li');
			var ul = document.querySelector('ul');
			//添加节点    node.appendChild(child) node 是父级  child是子级
			//在后面追加元素，类似数组的push
			ul.appendChild(li);	
			//在前面添加节点  node.insertBrfore(child,指定元素)
			var lili = document.createElement('li');
			ul.insertBefore(lili,ul.children[0]);
			
		</script>

留言板案例（重点）

		<style type="text/css">
			*{
				padding: 0;
				margin: 0;
			}
			.text{
				height: 400px;
				width: 800px;
				margin: auto;
			}
			ul{
				list-style: none;
			}
			li{
				background-color: #FAEBD7;
				width: 800px;
			}
			a{
				float: right;
			}
		</style>
		<textarea rows="20" cols="50" class="text">
			
		</textarea>
		<button type="button" class="btn">发布</button>
		<ul>
			
		</ul>
		<script type="text/javascript">
			//先获取元素值
			var btn = document.querySelector('.btn');
			var text = document.querySelector('.text');
			var ul = document.querySelector('ul');
		
			console.log(ul);
			console.log(text);
			btn.onclick = function(){
				//当文本输入框为空的时候   ，则就提示报错
				if(text.value == ''){
					alert("输入空");
					return false;
				}else{
					//创建li元素
					var li = document.createElement('li');
					li.innerHTML = text.value + "<a href='javascript:;'>删除</a>";					//然后把文本框的值传给li元素里面的内容
					ul.insertBefore(li,ul.children[0]);			//把li元素插入到留言板的前面
					//删除元素 删除的是当前连接的li 它的父亲
					var as = document.querySelectorAll('a');
					for(var i = 0;i < as.length;i++){
						as[i].onclick = function(){
							//要删除的是li 也就是说  是当前a所在的li   this.parentNode;
							//所以li的父节点是ul
							ul.removeChild(this.parentNode);
						}
					}
				}
				text.value = '';
			}
		</script>

删除元素removeChild

element.removeChild(element.children[i]) 要删除父节点（element）下面的第几个孩子

复制节点

浅拷贝 node.cloneNode() 括号为空时候就是false，（只复制标签，不复制里面的内容）

深拷贝 node.cloneNode(true), （复制标签 也复制里面的内容）

			//先获取父节点ul
			var ul = document.querySelector('ul');
			//将ul下面的孩子节点进行拷贝
			var lis = ul.children[0].cloneNode();
			//再将复制来的lis添加到父节点下面
			ul.appendChild(lis);

表单案例

		<style type="text/css">
			table{
				margin: auto;
				
			}
			thead{
				background-color: beige;
				
			}
			thead tr th{
				padding: 5px 20px;
			}
		</style>
		<table >
			<thead>
				<tr>
					<th>姓名</th>
					<th>年龄</th>
					<th>成绩</th>
					<th>操作</th>
				</tr>
			</thead>
			<tbody>
				
			</tbody>
		</table>
		</tbody>
		<script type="text/javascript">
			var data = [
				{
					name:'廖大侠',
					age:'21',
					sex:'boy',
				},
				{
					name:'张大侠',
					age:'18',
					sex:'boy',
				},
				{
					name:'李大侠',
					age:'19',
					sex:'girl',
				},
				{
					name:'王大侠',
					age:'29',
					sex:'boy',
				},
			];
			
			//往tbody里面创建行，  通过data的长度来判断
			var tb = document.querySelector('tbody');
			for(var i = 0;i < data.length;i++){
				//创建tr行
				var tr = document.createElement('tr');
				//父节点里面添加孩子
				tb.appendChild(tr);
				for(var k in data[i]){
					//创建单元格
					var td = document.createElement('td');
					//把对象里面的属性值data[i][k]传给td
					td.innerHTML = data[i][k];
					tr.appendChild(td);
					console.log('1');
				}
				var td = document.createElement('td');
				td.innerHTML = '<a href="javascript:;">删除</a>';
				tr.appendChild(td);
			}
			var as = document.querySelectorAll('a');
			 for(var i = 0; i < as.length;i++){
				 as[i].onclick = function(){
					 //this是指a标签，a标签得父节点是th(单元格) ，th得父节点是tr（行节点），所以父亲的父亲
					 tb.removeChild(this.parentNode.parentNode);
				 }
			 }
		</script>

三种动态创建元素的区别

document.write()

element.innerHTMlL

document.creatElement()

区别

document.write() 如果页面加载完之后再调用这句话，会导致页面重绘

innerHTML 是将内容写入到某个DOM节点，不会导致全部重绘 创建多个元素效率更高（采取数组形式拼接）

hild(this.parentNode.parentNode);
}
}

##### 三种动态创建元素的区别

> document.write()
>
> element.innerHTMlL
>
> document.creatElement()

###### 区别

document.write()   **如果页面加载完之后再调用这句话，会导致页面重绘**

innerHTML  **是将内容写入到某个DOM节点，不会导致全部重绘**     创建多个元素效率更高（采取数组形式拼接）