JavaScript之——DOM编程

洛洛虎虎生威

已于 2022-03-03 12:51:37 修改

阅读量458

点赞数 8

文章标签： javascript 前端

于 2022-03-02 23:13:54 首次发布

本文链接：https://blog.csdn.net/weixin_65975275/article/details/123242309

版权

上节课我们讲了BOM，这节课我们来讲讲DOM，啊哈哈，它们是不是长的差不多，接下来就让我就详细讲一讲吧！

一.DOM

DOM全称：Document Object Model

DOM就是文档对象模型

HTML中的关系图：

二.Element常用属性（Element 又称元素）

Element常用属性
Element.Children	获得该元素中的所有子元素标签
Element.ChildElementCount	获得该元素中的子元素的个数
Element.firstElementChild	获得第一个子元素
Element.lastElementChild	获得最后一个子元素
Element.nextElementSibling	获得下一个相邻元素
Element.previousElementSibling	获得上一个相邻元素
Element.parentElement	获得父级元素

浅补充一下吧：

HTML是最大的父类,它有两个儿子(子元素):head和body
网页中最大的父级元素(element)是:document

表格的三大部分:
thead tbody tfoot

接下来就看看关于Element常用属性的一些小案例

eg:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>案例1</title>
	</head>
	<body>
	
	<div id="div">
		<img id="y" src="img/1.gif">
		<img id="y1" src="img/2.gif">
		<img id="y2" src="img/3.gif">
	</div>	
		
	<script>
	//元素.parentElement 是获得父级元素的方法
	console.log(y.parentElement);
	
	//给y的父级元素设置一个背景颜色
	y.parentElement.style.background="yellow";
	
	//查询div中的所有元素
	console.log(div.children);
	
	//知道div中有几个子元素
	console.log(div.children.length);
	console.log(div.childElementCount);
	
	//知道div的第一个子元素和最后一个子元素
	console.log(div.firstElementChild,div.lastElementChild);
	
	//拿前一个元素
	console.log(y1.previousElementSibling);
	//拿后一个元素
	console.log(y1.nextElementSibling);
	
	
	
	function f1(){
	 	//先创建一个图片标签
		var i=document.createElement("img");
		//设置标签上的属性
	    //i.setAttribute("src","img/4.gif")
		i.src="img/4.gif";//如果是自定义的属性,那就不能用这个简写,那就要用上面那条
		//把img标签放到div中
		div.appendChild(i); //追加一个孩子,就是加一个子元素
		
	}
	
	//Node Element 看作是同一种东西 标签或者是元素
	 
	  function f2(){
		  //每点击一次,就删除最后一张
		var d=div.lastElementChild;
		//删除 通过父元素来删除子元素 
		div.removeChild(d);
	  }
	
	  function f3(){
		  //复制节点  cloneNode(boolean);
		  var d=div.cloneNode(true);
		  //节点复制的时候,把属性也带过去了,所以id重复了
		  //解决方法:把id改了
		  //d.id=""; //第一种方法
		  d.setAttribute("id","");//第二种方法
		  //加到body中
		  document.body.appendChild(d);
	  }
	 
	</script>	
		
	<img src="img/4.gif" alt="">	
	<button onclick="f1()">增加一张图片</button>	
	<button onclick="f2()">删除一张图片</button>	
	<button onclick="f3()">复制div</button>	
	</body>
</html>

得出来的结果就是这样的：

注：因为图片不能超过5M，所以复制div的那条就没有展现出来了

三.Element的常用方法以及使用JS操作表格

Node 也称元素！

接下来让我们看看”使用JS操作表格“有哪些方法吧

案例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>案例2</title>
	</head>
	<body>
		<table border="2" id=table>
			<tr>
				<td> <input type="checkbox" onclick="f(this.checked)"></td>
				<td> 商品名字</td>
				<td> 商品价格</td>
				<td> 商品操作</td>
			</tr>
			
			<tr>
				<td> <input type="checkbox" ></td>
				<td> 香蕉</td>
				<td> 34.0</td>
				<td><button>删除</button></td>
			</tr>
			
			<tr>
				<td> <input type="checkbox"></td>
				<td> 苹果</td>
				<td> 64.0</td>
				<td><button>删除</button></td>
			</tr>
			
			<tr>
				<td> <input type="checkbox" ></td>
				<td> 芒果</td>
				<td> 154.0</td>
				<td><button onclick="del(this)">删除</button></td>
			</tr>

		</table>
		
		<script>
		
		
		function load(){
			//css选择器来选择元素
			for(let i of document.querySelectorAll("td button")){
				//i是表格中每一个按钮
				i.onclick=del;
			}
		}
		
		
		
		/**
		 * 表格有三部分:
		 * thead     tbody    tfoot
		 */
		
		// //css选择器来选择元素
		// for(let i of document.querySelectorAll("td button")){
		// 	//i是表格中每一个按钮
		// 	i.onclick=del;
		// }
		
		    
		 function del(){
			 //找到tr
			 //this 谁调用了这个函数,this就是谁
			var t= this.parentElement.parentElement
			//根据tr拿到父元素   根据父元素删除tr
			t.parentElement.removeChild(t);
			// table.firstElementChild.removeChild(t);
			//t.innerHTML=""; 去除该标签中的内容,并没有删除tr标签 
			 t.outerHTML-"";//连tr标签一起删了
			 
		 }
		
		
		var f=(zt)=>{
			//找到页面中的所有输入框
			//去页面中拿元素:id,标签名,类名,名字
			 var is=document.getElementsByTagName("input");//根据标签名拿
			//设置状态和zt相同
			for(let i of is){
				i.checked=zt;
			}
		}
		
		function delLast(){
			if(table.rows.length>1){
				table.deleteRow(-1);
			}
		}
		
		function delAll(){
			while(table.rows.length>1){
				table.deleteRow(-1);
			}
			
		}
		
		function addRow () {
			var tr=table.insertRow();
			var t1=tr.insertCell();
			var t2=tr.insertCell();
			var t3=tr.insertCell();
			var t4=tr.insertCell();
			//内容
			t1.innerHTML='<input  type="checkbox">'
			t2.innerHTML="蓝莓"
			t3.innerHTML='90.0'
			t4.innerHTML='<button>删除</button>'
			load();
		}
		
		load();
		</script>
		
		<button onclick="delLast()">删除表格中最后一行</button>
		<button onclick="delAll()">删除表格中所有数据</button>
		<button onclick="addRow()">增加一行数据</button>
		
	</body>
</html>

运行结果为下：（可以删除一行，也可以删除所有，也可以增加，还可以在按钮上点击删除）