JavaScript04.DOM编程

也跌

已于 2022-03-03 11:17:15 修改

阅读量433

点赞数 5

文章标签： javascript html 前端

于 2022-03-02 21:00:12 首次发布

本文链接：https://blog.csdn.net/github_67177094/article/details/123239881

版权

本文介绍了JavaScript中的BOM（浏览器对象模型）编程，特别是DOM元素的操作，如获取子元素、子元素个数、相邻元素等属性，以及创建、修改和删除元素的方法。同时，通过实例详细讲解了如何使用JavaScript操作表格，包括添加、删除和修改表格行和列的方法。这些知识对于网页动态交互和数据操作至关重要。

摘要由CSDN通过智能技术生成

回顾：JavaScript03.BOM编程

前言:HTML 中的DOM是指文档对象模型(Document Object Model),通过 HTML DOM，JavaScript 能够访问和改变 HTML 文档的所有元素。

DOM树

document：是一个Element对象,它处于DOM树的最上级

Element：HTML标签对象,也是一个节点(Node)对象

Node：节点对象

Element常用属性

1.Element.children：获得该元素中所有的子元素标签

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div id="div">
			<input type="" name="" id="i1" value="" />
			<input type="" name="" id="i2" value="" />
			<button type="button" id="button" onclick="fn1()">获取所有子元素</button>
		</div>
		
		<script type="text/javascript">
			
			function fn1(){
				console.log(div.children)	//打印div标签下的所有子元素
			}
			
		</script>
		
	</body>
</html>

2.Element.childElementCound：获得该元素中的子元素个数

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div id="div">
			<input type="" name="" id="i1" value="" />
			<input type="" name="" id="i2" value="" />
			<button type="button" onclick="fn2()">查看子元素个数</button>
		</div>
		
		<script type="text/javascript">
			
			function fn2(){
				console.log(div.childElementCount)	//控制台打印div标签下的子元素个数
			}
			
		</script>
		
	</body>
</html>

4.Element.firstElementChild：获得第一个子元素

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div id="div">
			<input type="" name="" id="i1" value="" />
			<input type="" name="" id="i2" value="" />
			<button type="button" onclick="fn3()">查看第一个子元素</button>
		</div>
		
		<script type="text/javascript">
			
			function fn3(){
				console.log(div.firstElementChild)	//控制台打印div标签下的第一个子元素
			}
			
		</script>
		
	</body>
</html>

3.Element.lastElementChild：获得最后一个子元素

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div id="div">
			<input type="" name="" id="i1" value="" />
			<input type="" name="" id="i2" value="" />
			<button type="button" onclick="fn4()">查看最后一个子元素</button>
		</div>
		
		<script type="text/javascript">
			
			function fn4(){
				console.log(div.lastElementChild)	//控制台打印div标签下的最后一个子元素
			}
			
		</script>
		
	</body>
</html>

5.Element.nextElementSibiling：获得下一个相邻的元素

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div id="div">
			<input type="" name="" id="i1" value="" />
			<input type="" name="" id="i2" value="" />
			<button type="button" onclick="fn5()">查看i1标签下一个相邻的元素</button>
		</div>
		
		<script type="text/javascript">
			
			function fn5(){
				console.log(i1.nextElementSibling)	//控制台打印i1标签下一个相邻的元素
			}
			
		</script>
		
	</body>
</html>

6.Element.previousElementSibling：获得上一个相邻的元素

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div id="div">
			<input type="" name="" id="i1" value="" />
			<input type="" name="" id="i2" value="" />
			<button type="button" onclick="fn3()">查看i2标签上一个相邻的元素</button>
		</div>
		
		<script type="text/javascript">
			
			function fn3(){
				console.log(i2.previousElementSibling)	//控制台打印i2标签上一个相邻的元素
			}
			
		</script>
		
	</body>
</html>

7.Element.parentElement：获得父级元素

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div id="div">
			<input type="" name="" id="i1" value="" />
			<input type="" name="" id="i2" value="" />
			<button type="button" onclick="fn3()">查看i2标签的父级元素</button>
		</div>
		
		<script type="text/javascript">
			
			function fn3(){
				console.log(i2.parentElement)	//控制台打印i2的父级元素
			}
			
		</script>
		
	</body>
</html>

Element常用方法

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

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div id="div">
			<img src="img/1.gif" id="i1">
		</div>
		<button type="button" onclick="fun1()">点我添加图片</button>
		<button type="button" onclick="fun2()">点我替换第一张图片</button>
		<button type="button" onclick="fun3()">点我复制div</button>
		<script type="text/javascript">
			
			var num=2;
			function fun1(){
				var image=document.createElement("img");	//通过createElement添加img标签
				image.src="img/"+num%5+".gif"		//每隔3张图片换一次
				image.setAttribute("id","i"+num);//将新添加的图片设置id
				num++;	
				div.appendChild(image);		//让div标签添加子节点i
			}
			
			function fun2(){
				var a1=document.getElementById("i1");
				var a2=document.getElementById("i2");
				div.replaceChild(a2,a1);	//替换第一张图片
			}
			
			function fun3(){
				div.cloneNode(true);	//复制节点并复制子节点
			}
	
		</script>
		
	</body>
</html>

使用JS操作表格

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

table.rows：表格中的行集合

row.cells：一行中的列集合

table.insertRow(i)：在表格中为i的位置插入一行

row.insertCell(i)：在行中为i的位置插入一列

table.deleteRow(i)：删除第i行

案例：

!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>网上订单</title>
<style type="text/css">
body{
	font-size:13px;
	line-height:25px;
	}
table{
	border-top: 1px solid #333;
	border-left: 1px solid #333;
	width:400px;
}
td{
	border-right: 1px solid #333;
	border-bottom: 1px solid #333;
	text-align:center;
	}
.title{	
	font-weight:bold;
	background-color: #cccccc;
}

      
</style>
<script type="text/javascript">
function addRow(){
   var addTable=document.getElementById("order");
   var row_index=addTable.rows.length-1;       //新插入行在表格中的位置
   var newRow=addTable.insertRow(row_index);  //插入新行
   newRow.id="row"+row_index;                 //设置新插入行的ID
   
   var col1=newRow.insertCell(0);
   col1.innerHTML="<input id='a"+row_index+"' style='width:160px;' type='text' />";
   
   var col2=newRow.insertCell(1);
   col2.innerHTML="<input id='b"+row_index+"' style='width:30px;' type='text' />";
   
   var col3=newRow.insertCell(2);
   col3.innerHTML="<input id='c"+row_index+"' style='width:30px;' type='text' />";
   
   var col4=newRow.insertCell(3);
   col4.innerHTML="<input name='del"+row_index+"' type='button' value='删除' onclick=\"delRow('row"+row_index+ "')\" />&nbsp;<input id='edit"+row_index+"' type='button' value='确定' onclick=\"upRow('row"+row_index+ "')\" />";

	}
	
function delRow(rowId){
	var row=document.getElementById(rowId).rowIndex;   //删除行所在表格中的位置
	document.getElementById("order").deleteRow(row); 
	}
	
function editRow(rowId){
	var row=document.getElementById(rowId).rowIndex;   //修改行所在表格中的位置
	var col=document.getElementById(rowId).cells;
	var texta=col[0].innerHTML;
	col[0].innerHTML="<input name='a"+row+"' style='width:160px;' type='text' value='"+texta+"' />";
	var textb=col[1].innerHTML;
	col[1].innerHTML="<input name='b"+row+"' style='width:30px;' type='text' value='"+textb+"' />";
	var textc=col[2].innerHTML;
	col[2].innerHTML="<input name='b"+row+"' style='width:30px;' type='text' value='"+textc+"' />";
	
	col[3].lastChild.value="确定";
	col[3].lastChild.setAttribute("onclick","upRow('"+rowId+ "')");

	}	

function upRow(rowId){
	var row=document.getElementById(rowId).rowIndex;   //修改行所在表格中的位置
	var col=document.getElementById(rowId).cells;
	var texta=col[0].firstChild.value;
	var textb=col[1].firstChild.value;
	var textc=col[2].firstChild.value;
	col[0].innerHTML=texta;
	col[1].innerHTML=textb;
	col[2].innerHTML=textc;
	
	col[3].lastChild.value="修改";
	col[3].lastChild.setAttribute("onclick","editRow('"+rowId+ "')");


	}
</script>
</head>

<body><table width="100%" border="0" cellspacing="0" cellpadding="0" id="order">
  <tr class="title">
    <td>商品名称</td>
    <td>数量</td>
    <td>单价</td>
     <td>操作</td>
  </tr>
  <tr id="row1">
    <td>苹果</td>
    <td>5</td>
    <td>&yen;48</td>
    <td><input name="del" type="button" value="删除" onclick="delRow('row1')" />
     <input name="edit" type="button" value="修改"  onclick="editRow('row1')" /></td>
  </tr>
  <tr>
    <td style="text-align:center; height:30px;" colspan="4">
    <input name="bsn" type="button" value="增加定单" onclick="addRow()" /></td>
  </tr>
</table>

</body>
</html>

你要尽全力保护你的梦想。那些嘲笑你梦想的人，他们注定失败，他们想把你变成和他们一样。我坚信，只要心中有梦想，我就会与众不同。你也是。

也跌

关注

5
点赞
踩
0

收藏

觉得还不错? 一键收藏
2
评论
JavaScript04.DOM编程

回顾：JavaScript03.BOM编程前言:HTML 中的DOM是指文档对象模型(Document Object Model),通过 HTML DOM，JavaScript 能够访问和改变 HTML 文档的所有元素。DOM树document：是一个Element对象,它处于DOM树的最上级Element：HTML标签对象,也是一个节点(Node)对象Node：节点对象Element常用属性Element常用方法使用JS操作表格你.
复制链接

扫一扫