DOM的节点操作

回顾上一节内容：

1.如何获取页面上的元素（标签）

选择器优先：

1.1通过方法的形式去获取页面上的标签
 

document.getElementById();

document.getElementsByName();

document.getElementsByTagName();

document.getElementsByClassName('类名');

document.querySelector('选择器');

document.querySelectorAll('选择器'); 

2.完善全选框的例子：

 <input id="all" type="checkbox"> 全选
 <hr>
 <input name = "hobbys" type="checkbox" value = "1">
 <input name = "hobbys" type="checkbox" value = "2">
 <input name = "hobbys" type="checkbox" value = "3">
 <input name = "hobbys" type="checkbox" value = "4">
 <input name = "hobbys" type="checkbox" value = "5">
 <script type="text/javascript">

// 根据id属性获取元素
var all = document.getElementById('all');
//根据选择器获取元素（一组  伪数组）
// var inputs = document.querySelectorAll('input');

	// 为这个复选框设置一个点击事件 onclick
	all.onclick = function(){
		var inputs = document.getElementsByName('hobbys');
		// console.log(inputs)
		for(var i = 0;i<inputs.length;i++){
			inputs[i].checked = all.checked;
		}
	};
	var inputs = document.getElementsByName('hobbys');
	//完善全选
	for(var i = 0;i<inputs.length;i++){
		
		//设置点击
		inputs[i].onclick = function(){
			var flag = true;
			// console.log(this);
			//获取所有的子复选框
			var inputss = document.getElementsByName('hobbys');
			for(var i = 0;i<inputss.length;i++){
				if(inputss[i].checked === false){
					flag = false;
					break;
				}
			}
			all.checked = flag;
		};
	}

本节内容：

1.为什么学习节点操作？ ------主要原因：获取元素

1.1获取元素通常使用两种方式

第一种方式：利用DOM提供的方法获取元素 document.getElementById(); document.getElementsByTagName(); document.getElementsByName(); document.querySelector(); ... 逻辑性不强、繁琐。

第二种方式：利用节点层级关系获取元素 利用父子兄节点关系获取元素 逻辑性强，但是兼容性稍差

【总结】这两种方式都可以获取元素节点，我们后面都会使用，但是节点操作更简单。

2.节点概述

网页中的所有内容都是节点（标签、属性、文本、注释等），在DOM中，节点使用node来表示。

HTML DOM树中的所有节点均可通过JavaScript进行访问，所有HTML元素（节点）均可被修改，也可以创建或删除。

一般地，节点至少拥有nodeType（节点类型）、nodeName（节点名称）和nodeValue（节点值）这三个基本属性。

var oBox = document.querySelector('.oBox'); console.dir(oBox);

元素节点 nodeType -> 1 属性节点 nodeType -> 2 文本节点 nodeType -> 3（文本节点包含文字、空格、换行等）

【总结】我们在实际开发中，节点操作主要操作的是"元素节点"。

3.节点层次

利用DOM树可以把节点划分为不同的层次关系，常见的是：父子兄层级关系。

3.1父级节点 (node.parentNode )

parentNode属性可返回某节点的父节点，注意是最近的一个父节点

如果指定的节点没有父节点则返回null

//根据first节点获取父节点
		// console.log(first.parentNode);
		// console.log(first.parentElement);

3.2 子节点操作 (标准与非标准)

① parentNode.childNodes (标准）

返回包含指定节点的子节点的集合，该集合为即时更新的集合。

【注意】返回值里面包含了所有的子节点，包含元素节点、文本节点等。 如果只想要获得里面的元素节点，则需要专门处理。所以我们一般不提倡使用childNodes。

//获取指定节点下的所有子节点(包含文本节点)

var ul = document.querySelector('ul');
for(var i = 0;i<ul.childNodes.length;i++){
	if(ul.childNodes[i].nodeType == 1){
		console.log(ul.childNodes[i]);
	}
}

②parentNode.children (非标准）

该属性是一个只读属性，返回所有的子元素节点。它只返回子元素节点，其余节点不返回。

虽然children是一个非标准，但是得到了各个浏览器的支持，因此我们可以放心使用。

③根据指定的节点获取该节点下第一个子节点的标准方法：

parentNode.firstChild   ====   
非标准的方法   获取元素节点（不包含文本节点）
parentNode.firstElementChild （IE9以上支持）
 返回第一个子节点，找不到则返回null。同样，也是包含所有的节点。

④根据指定的节点获取该节点下最后一个子节点的标准方法：

parentNode.lastChild   ====   parentNode.lastElementChild （IE9以上支持）
        // innerHTML  获取非表单元素中的文本内容
        // value  获取表单元素中的文本内容
        // console.log(myDemo.lastElementChild.innerHTML);
    ** 返回最后一个子节点，找不到则返回null。同样，也是包含所有的节点。

【注意事项】实际开发中获取指定子元素的写法是通过children[下标]获取。能够解决兼容性问题。

（4）兄弟节点 node.nextSibling    ====    node.nextElementSibling     （IE9以上支持）
    ** 返回当前元素的下一个兄弟节点，找不到则返回null。同样，也是包含所有的节点。

（5）兄弟节点node.previousSibling    ====    node.previousElementSibling     （IE9以上支持）
    ** 返回当前元素的上一个兄弟节点，找不到则返回null。同样，也是包含所有的节点。

解决兼容性（少用）
function getNextElementSibling(element){
    var el = element;
    while(el = el.nextSibling){
        if(el.nodeType === 1){
            return el;
        }
        return null;
    }
}

4.节点操作之节点创建

document.createElement('tagName');

<ul class="oUl">
		<li>好好学习</li>
	</ul>
	<button id="oBtn">点击创建li添加到ul列表中</button>
	<button id="oBtn2">innerHTML</button>
	<button id="oBtn3">insertBefore</button>
	<script type="text/javascript">
		//获取按钮
		var oBtn = document.getElementById('oBtn');
		oBtn.onclick = function(){
			//创建元素节点   document.createElement();
			var newLi = document.createElement('li');
			console.log(newLi);
			//创建属性
			var myId = document.createAttribute('id');
			//在li标签上设置属性
			newLi.setAttributeNode(myId);
			//给创建的属性赋值
			newLi.id = 'sb';
			
			//创建一个文本节点
			var text = document.createTextNode('我用双手成就你的梦想');

5.节点操作之节点添加（前后的添加）

//将内容追加到新创建的li标签中

newLi.appendChild(text);
			//添加节点的方法（向指定的标签中添加标签）
			// appendChild 末尾追加
			//获取oUl
			var oUl = document.querySelector('.oUl');
			oUl.appendChild(newLi);
		};
var oBtn2 = document.getElementById('oBtn2');
		oBtn2.onclick = function(){
			var oUl = document.querySelector('.oUl');
			// 重新赋值
			oUl.innerHTML = "<li>'好好学习'<li>"
		};

//insertBefore  在指定的节点之前添加一个新的节点

node.insertBefore(child,指定元素)

// node.insertBefore(newNode,指定的节点)
		var oBtn3 = document.getElementById('oBtn3');
		oBtn3.onclick = function(){
			//需求：在ul之前追加一个p段落标签
			var oUl = document.querySelector('.oUl');
			var lis = oUl.firstElementChild;
			
			//创建一个p段落标签
			var newP = document.createElement('p');
			var textP = document.createTextNode('我是P段落');
			newP.appendChild(textP);
			
			console.log(oUl.insertBefore(newP,lis));
		};

6.删除节点

	node.removeChild(child)

7.复制节点 （也叫克隆clone）与替换节点

node.cloneNode(true|false);
replaceChild；


<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<h3>替换节点  克隆节点</h3>
		<ul id="oUl">
			<li>11111</li>
			<li>2222</li>
		</ul>
		<button onclick="myf();">点击替换</button>
		<button onclick="myb();">点击克隆</button>

<script type="text/javascript">
		function myf(){
			// replaceChild();
			//得到ul
			var oUl = document.getElementById('oUl');
			//获取内容为2222的li标签
			var li2 = oUl.lastElementChild;
			//创建p段落
			var newP = document.createElement('p');
			var textP = document.createTextNode('段落内容');
			newP.appendChild(textP);
			
			oUl.replaceChild(newP,li2);
		};
	
		// 克隆节点
		function myb(){
			var oUl = document.getElementById('oUl');
			//获取第一个子节点进行克隆
			var first = oUl.firstElementChild;
			//克隆节点
			// cloneNode()  如果没有参数就是浅拷贝（只复制结构，没有内容）
			// .cloneNode(true); 深拷贝
			var newFirst = first.cloneNode(true);
			// 将克隆的节点追加到末尾
			oUl.appendChild(newFirst);
		}
</script>
</body>

9.在li标签上设置、获得、移除元素的属性

setAttribute(); 设置元素的属性
			getAttribute();//获取元素的属性
			removeAttribute(); 移除元素的属性

10.创建文本节点

createTextNode

11.表格相关对象 ：

  table表格对象
    属性：row[]  返回包含表格中所有行的一个数组
    方法：
	insertRow()从表格中插入一个新行
	deleteRow()从表格中删除一行

tableRow表格行对象
属性：
cells():返回包含行中所有单元格的一个数组
rowIndex:返回该行在表中的位置
方法：
insertCell():在一行中的指定位置插入一个空的<td>标签
deleteCell()：删除行中指定的单元格

tableCell单元格行对象	cellIndex	返回单元格在某行单元格集合中的位置
innerHTML	设置或返回单元格的开始标签和结束标签之间的HTML
align	设置或返回单元格内部数据的水平排列方式
className	设置或返回元素的class属性


<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<!-- 表格的节点操作 -->
		<!-- 需求：当点击按钮时   生成一个tr标签 -->
		<table border="1" cellspacing="0" cellpadding="0" width="400">
			<tr>
				<td>编号</td>
				<td>姓名</td>
				<td>性别</td>
			</tr>
		</table>
		<hr>
		<button onclick="myf()">点击生成数据</button>
		<!-- js -->
		<script>
			function myf(){
				var table = document.querySelector('table');
				var tbody = table.querySelector('tbody');
				//创建tr
				var newTr = document.createElement('tr');
				//单元格
				for(var i = 0;i<3;i++){
					var cell = document.createElement('td');
					var str = window.prompt('请输入数据');
					var text = document.createTextNode(str);
					cell.appendChild(text);
					newTr.appendChild(cell);
				}
//追加到末尾 tr
			tbody.appendChild(newTr);
		}
	</script>

12.表格末尾新增--末尾新增tr

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<table border="1" cellpadding="0" cellspacing="0" width="500">
			<tr>
				<td>编号</td>
				<td>名称</td>
				<td>姓名</td>
				<td>操作</td>
			</tr>
		</table>
		<hr>
		<button onclick="myf();">末尾新增tr</button>
		<script type="text/javascript">
			function myf(){
				var table = document.querySelector('table');
				//获取表格的tr的长度
				var index = table.rows.length;
				//调用insertRow  传入一个参数   下标
				var newTr = table.insertRow(index);
				//id属性
				newTr.id = index;
// var first = table.rows[0];
			// alert(first.cells.length);
			// for(var i = 0;i<first.cells.length;i++){
				
			// }
			
			//单元格
			var c1 = newTr.insertCell(0);
			c1.innerHTML = '<input style = "width:60px;" value = "123">';
			var c2 = newTr.insertCell(1);
			c2.innerHTML = '<input style = "width:60px;" value = "456">';
			var c3 = newTr.insertCell(2);
			c3.innerHTML = '<input style = "width:60px;">'
			var c4 = newTr.insertCell(3);
			c4.innerHTML = "<button onclick = 'myconfirm("+newTr.id+")'>确定</button>"
		}
		
		function myconfirm(obj){
			// alert(obj)
			var tr = document.getElementById(obj);
				//1
				var cell1 = tr.cells[0].firstElementChild.value;
				// alert(cell1)
				//覆盖input输入项
				tr.cells[0].innerHTML = cell1;
				//2
				var cell2 = tr.cells[1].firstElementChild.value
				tr.cells[1].innerHTML = cell2;
				// 3
				var cell3 = tr.cells[2].firstElementChild.value
				tr.cells[2].innerHTML = cell3;
				 var btn = tr.cells[3].lastElementChild;
				//点击确定之后  确认按钮的内容  修改  事件
				btn.innerHTML = '修改';
				
				//修改事件
			
				btn.setAttribute("onclick","edit("+obj+")");
		}
	function edit(obj){
			// alert(obj)
			// alert(typeof(obj))
			// alert(obj.parentNode.parentNode.innerHTML);
			//根据id获取tr
			var tr = document.getElementById(obj);
			
			var c1 = tr.cells[0].innerHTML;
			alert(c1)
			tr.cells[0].innerHTML = "<input type = 'text' value = '"+c1+"'>"
			
			var btn = tr.cells[3].lastElementChild;
			btn.innerHTML = '确认';
			btn.setAttribute("onclick","myconfirm("+obj+")");
		}
	</script>
</body>
</html>

13.实现留言操作：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<h3>我的留言</h3>
		<hr>
		<textarea id="cc" rows="" cols="">
</textarea>
	<button id="obtn1">发表</button>
	<hr>
	<ul id="content">
	</ul>
	<script type="text/javascript">
		var obtn1 = document.getElementById('obtn1');
		obtn1.onclick = function() {
			//获取文本域的内容
			var cc = document.getElementById('cc');
			// console.log(cc.value);
			//获取oUl
			var oUl = document.getElementById('content');
			//创建一个li标签
			var newLi = document.createElement('li');
			var textLi = document.createTextNode(cc.value);
	newLi.appendChild(btn);
			//将li追加到ul
			oUl.appendChild(newLi);
		}
		//获取ul
		// var content = document.getElementById('content');
		// var btns = content.getElementsByTagName('button');
		// console.log(btns);
		
		function delLY(obj){
			// alert(obj.parentNode.innerHTML)
			// 删除节点   removeChild();
			//获取oUl
			var flag = confirm("你确定要删除吗？");
			if(flag == true){
				var oUl = document.getElementById('content');
				oUl.removeChild(obj.parentNode);
			}
		}
	</script>
</body>
			newLi.appendChild(textLi)
			var btn = document.createElement('button');
			var btncontent = document.createTextNode('删除');
			btn.appendChild(btncontent)
			
			//可以给每个按钮添加一个事件属性
			btn.setAttribute('onclick',"delLY(this)");

总结：

		/*
			节点的获取
				firstChild|firstElementChild
				lastChild|lastElementChild
				parentNode|parentElement
				childNodes|children
				
			节点的创建
				createElement();元素节点创建
				createTextNode();//文本节点创建
				createAttribute();属性节点创建
				
			添加节点
				appendChild
				insertBefore()
				
			替换节点
				replaceChild
				
			克隆节点 
				cloneNode
				
			删除节点
				removeChild
				
			setAttribute(); 设置元素的属性
			getAttribute();//获取元素的属性
			removeAttribute(); 移除元素的属性
		
		*/