DOM文档对象模型（二）

一、节点关系查找

<div id="parent">
	<p>我是第一个</p>
	<p id="p2">我是第二个</p>
	<p>我是第三个</p>
	<h5>我是最后一个</h5>
</div>

// parent的第一个子节点
var frist = parent.firstElementChild; 

 //parent的第一个最后一个子节点
 var last = parent.lastElementChild; 

//parentElement,表示元素的父节点元素
console.log('p2的父节点',p2.parentElement) 

//previousElementSibling表示p2的上一个兄弟元素节点
console.log('p2的上一个兄弟',p2.previousElementSibling); 

//nextElementSibling表示p2的下一个兄弟元素节点
console.log('p2的下一个兄弟',p2.nextElementSibling); 

二、属性的修改 

<h1>属性修改</h1>
<img src="../img/分组%2035%20(1).png" alt="图片">
<br>
<br>
<button type="button" onclick="changeImg()">修改图片</button>
<script type="text/javascript">
	function changeImg(){
		var img=document.querySelector("img")

        //setAttribute设置属性
		img.setAttribute("src","../img/分组%2035%20(2).png")

        //removeAttribute移除属性
		img.removeAttribute("alt")
	}
</script>

三、节点信息 

• nodeName：节点名称，元素节点返回的是元素标签名大写。 
• nodeType：节点类型，如：1代表元素，3代表文本节点。
• nodeValue：节点值，元素节点的nodeValue为null。

四、创建和插入节点 

function create1Img(){

	//通过js创建一张图片
	var img = document.createElement("img");

	//给图片的src一个指定的路径
	img.setAttribute("src","../img/分组%2035%20(1).png")

	//获取要插入得位置
	var h5 = document.getElementById('h5')

	//插入到获取得位置的前面
	document.body.insertBefore(img,h5)

}

 五、复制节点和删除节点

function copy(){

	//获取要复制得照片
	var pic1 = document.getElementById('pic1')

	//复制照片，false只是当前节点，true包含子节点
	var img = pic1.cloneNode(false);

	//将图片插入到body标签中
	document.body.appendChild(img)

}

function del(){
	//获取到要删除得对象
	var pic = document.querySelector('img:last-of-type')

	//删除，自己删除自己
	pic.remove();

	//通过父节点来删除
	// pic.parentElement.removeChild(pic);

}

 六、dom中表格操作

		<table border="" cellspacing="" cellpadding="">
			<tr>
				<td>书名</td>
				<td>价格</td>
				<td>操作</td>
			</tr>
			<tr>
				<td>精通JS</td>
				<td>30.0</td>
				<td><button type="button" onclick="del(this)">删除</button></td>
			</tr>
			<tr>
				<td>精通JS</td>
				<td>30.0</td>
				<td><button type="button" onclick="del(this)">删除</button></td>
			</tr>
		</table>
		<button type="button" onclick="addRow()">增加一行</button>
		<button type="button" onclick="delRow()">删除一行</button>
		<button type="button" onclick="changeTitle()">修改标题</button>
		<script type="text/javascript">
			function addRow() {
				//获取标签名table获取
				var table = document.getElementsByTagName('table')[0];
				//在table中插入行（2）表示插入的位置
				var row = table.insertRow(2)
				//一行插曲三列
				var td1 = row.insertCell(0);
				var td2 = row.insertCell(1);
				var td3 = row.insertCell(2);
				td1.innerText = '精通Vue3.0';
				td2.innerText = '19.8';
				td3.innerHTML = '<button type="button">删除</button>';
			}
			function delRow(){
				var table = document.getElementsByTagName('table')[0];
				//删除表格的第二行
				table.deleteRow(1);
			}
			function changeTitle(){
				var table = document.getElementsByTagName('table')[0];
				//table默认会添加一个tbody标签
				//table的第一个元素子节点为tbody，tbody的第一个元素子节点为tr
				var row = table.firstElementChild.firstElementChild;
				row.style.backgroundColor='red'
			}
			function del(btn){
				var tr = btn.parentElement.parentElement;
				tr.remove();
			}
		</script>