DOM编程

什么是DOM？

DOM是文档对象模型，是Document Object Model 的简称。通过DOM可以动态的改变文档内容，动态改变文档内容的原理是通过解析文档（如HTML）并生成DOM树。通过DOM标准接口+编程语言改变文档内容。

目录

一、DOM树

二、元素常用属性

三、元素常用的方法

1.增加一个图片 

2.删除一个图片

3.替换子节点

4.复制div 

四、使用js操作表格

---

一、DOM树

document也是一个元素（Element）对象，document是网页中最大的父级元素。

 

二、元素常用属性

Element.children	获得该元素中的所有子元素标签
Element.childElementCount	获得该元素中的子元素的个数
Element.firstElementChild	获得第一个子元素
Element.lastElementChild	获得最后一个子元素
Element.nextElementSibling	获得下一个相邻元素
Element.previousElementSibling	获得上一个相邻元素
Element.parentElement	获得父级元素

以上表格是Element常用属性，需用元素的id调用属性，运用如下代码所示 

<div id="div">
	<img src="img/1.gif" >
	<img id="img" src="img/2.gif" >
	<img src="img/3.gif" >
</div>

//获得该元素中的所有子元素标签
console.log(div.children)

//通过子级id拿到父级元素
console.log(img.parentElement) //<div id="div" style="background: lightgoldenrodyellow;"></div>

//查询div有几个子元素
console.log(div.childElementCount); //3
console.log(div.children.length);
			
//第一个子节点
console.log(div.firstElementChild) //<img src="img/1.gif">
//最后一个子节点
console.log(div.lastElementChild) //<img src="img/3.gif">
			
//获得下一个相邻元素
console.log(img.nextElementSibling) //<img src="img/3.gif">
//获得上一个相邻元素
console.log(img.previousElementSibling) //<img src="img/1.gif">

三、元素常用的方法

document.createElement(TagName)	根据标签名创建Element元素
Element.getAttribute(name)	获取标签中的属性
Element.setAttribute(name,value)	设置标签中的属性
Element.appendChild(Node)	在内容末尾添加子节点
Element.insertBefore(Node1,Node2)	将Node1插入在Element中的子元素Node2前面，Node2为null即可实现末尾插入
Element.after(Node)	在节点后面添加节点
Element.before(Node)	在节点前面添加节点
Element.cloneNode(boolean)	复制节点(是否复制子节点)
Element.removeChild(Node)	移除子节点
Element.replaceChild(Node1,Node2)	替换Node1替换子节点Node2

Element.cloneNode(boolean)，boolean默认是false，如果不填写值或者填写false，只会复制自己本身，不复制子节点。

以下是代码展示和执行效果

<div id="div">
	<img src="img/1.gif" >
	<img id="img" src="img/2.gif" >
	<img src="img/3.gif" >
</div>
<button onclick="fun01()">增加一张图片</button>
<button onclick="fun02()">删除一张图片</button>
<button onclick="fun03()">复制div</button>
<button onclick="fun04()">替换子元素</button>

原图  

1.增加一个图片 

在原图的基础上，我们给他添加一个图片，代码如下 

//向div中增加一张图片的方法
function fun01(){
	//先创建一个图片标签
	var i=document.createElement("img")
	//设置标签上的属性
	i.setAttribute("src","img/5.gif")
	//把图片标签放到div中
	div.appendChild(i)
}
// i.src="img/5.gif"  //这个也是设置标签属性，但这种方式不是所有的属性都能用

 

 每点击一次增加按钮，就会增加一个图片，后面两个就是我们增加上去的图片

2.删除一个图片

 我们再来一个删除，在原图的基础给它删除一个，代码如下

//删除div中的最后一张图片
function fun02(){
	//获得div的最后一个元素
	var i=div.lastElementChild
	//删除 通过父元素来删除子元素
	div.removeChild(i)
}

 

 没点击一次删除按钮，就会删除最后一个图片，直到没图片可删

3.替换子节点

我们接下来用一张图片替换原图中id为img的图片，代码如下

function fun04(){
	//先创建一个图片标签
	var i=document.createElement("img")
	//设置标签上的属性
	i.setAttribute("src","img/4.gif")
	//用i替换id为img的图片
	div.replaceChild(i,img)
}

替换后网页显示为

4.复制div 

//复制div
function fun03(){
        //复制节点
	    var d=div.cloneNode(true) //节点复制的时候把属性也复制了
		//id不能重复，复制的时候要把id改了
		d.setAttribute("id","")
		//添加到body中
		document.body.appendChild(d)
}

 

如果所需复制的div进行了一系列的操作后再复制的话，那么所复制出来的是div执行操作之后的样子

四、使用js操作表格

DOM结构中,table标签的子节点是tbody。

table.rows	表格中的行的集合
row.cells	一行中的列的集合
table.insertRow(i)	在表格中为i的位置插入一行
row.insertCell(i)	在行中为i的位置插入一列
table.deleteRow(i)	删除第i行

以下是使用js操作表格的实例

<table border id="table">
	<tr>
		<td><input type="checkbox" onclick="fun01(this.checked)"/></td>
		<td>商品名称</td>
		<td>商品价格</td>
		<td>商品操作</td>
	</tr>
	<tr>
		<td><input type="checkbox"/></td>
		<td>🍍🍍🍍🍍</td>
		<td>12.9</td>
		<td><button>删除</button></td>
	</tr>
	<tr>
		<td><input type="checkbox"/></td>
		<td>🍋🍋🍋🍋</td>
		<td>10.9</td>
		<td><button>删除</button></td>
	</tr>
	<tr>
	    <td><input type="checkbox"/></td>
		<td>🍓🍓🍓🍓</td>
		<td>39.9</td>
		<td><button>删除</button></td>
	</tr>
	<tr>
		<td><input type="checkbox"/></td>
		<td>🥑🥑🥑🥑</td>
		<td>20.9</td>
		<td><button>删除</button></td>
	</tr>
	<tr>
		<td><input type="checkbox"/></td>
		<td>🍑🍑🍑🍑</td>
		<td>24.9</td>
		<td><button>删除</button></td>
	</tr>
</table>
		
<button onclick="delLast()">删除表格最后一行</button>
<button onclick="delAll()">删除表格所有数据</button>
<button onclick="addRow()">增加表格数据</button>

		<script>
			//全选功能
			var fun01=(status)=>{
				//找到页面中所有的多选框
				var is=document.getElementsByTagName("input")
				for(let i of is){
					i.checked=status
				}
			}
			
			//删除功能
			function del(){
				//找到tr
				var tr=this.parentElement.parentElement
				//根据tr拿到父元素 根据父元素删除
				tr.parentElement.removeChild(tr)
			}
			
			function load(){
				//拿到表格中所有的按钮
				var but=document.querySelectorAll("td button")
				for(let i of but){
					//i是表格中每一个按钮
					i.onclick=del //给每个按钮都具备del方法
				}
			}
			
			//增加一行数据
			function addRow(){
				//在表格中插入一行
				var tr=table.insertRow()
				//在一行中插入列
				var d1=tr.insertCell()
				var d2=tr.insertCell()
				var d3=tr.insertCell()
				var d4=tr.insertCell()
				//内容
				d1.innerHTML='<input type="checkbox">'
				d2.textContent="🍉🍉🍉🍉"
				d3.textContent="11.9"
				d4.innerHTML="<button>删除</button>"
				load() //给新增的按钮设置点击事件
			}
			
			//删除最后一行数据
			function delLast(){
				if(table.rows.length>1){
					table.deleteRow(-1)
				}
			}
			
			//删除全部数据
			function delAll(){
				while(table.rows.length>1){
					table.deleteRow(-1)
				}
			}
			
			load() //调用方法，让按钮生效
		</script>

网页显示如下图所示 ：

 

 今天的分享就到这里了，下次再给大家分享一些有趣的代码