JavaScript--DOM

已于 2022-04-10 22:00:04 修改
阅读量450 收藏 1
点赞数
文章标签： java javascript 前端
于 2022-04-07 22:22:49 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/m0_63223374/article/details/124027785
版权
本文详细讲解了JavaScript CoreDOM的基本操作，如节点访问、属性管理、节点创建与增删，以及HTMLDOM特有的表格操作，包括HTMLDOM对象属性、table对象、表格结构与实例应用，以及订单管理的示例。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

JS-DOM

1.DOM概念

1.1什么是DOM

对于JavaScript，为了能够使JavaScript操作Html，JavaScript就有了一套自己的dom编程接口。
对于Html，dom使得html形成一棵dom树，类似于一颗家族树一样，一层接一层，子子孙孙。

在这里插入图片描述

1.2什么是DOM树

HTML中的每个标签元素，属性，文本都能看做是一个DOM的节点，这些dom节点构成了一个树形结构
DOM树

  • W3C规定的三类DOM标准接口
  • Core DOM（核心DOM），适用于各种结构化文档
  • XML DOM 专用于XML文档
  • HTML DOM，专用于HTML文档
  • 选用DOM标准接口，结合支持的编程语言访问DOM树，如Java、-JavaScript、C#等

1.3总结

dom操作有用原生js的dom操作，也可以用对js封装过的jquery等插件来更加方便的进行dom操作

2.Core DOM的操作

2.1查看节点

2.1.1 访问指定节点的方法

  • getElementById( ) ：返回一个节点对象
  • getElementsByName( )：返回多个（节点数组）
  • getElementsByTagName( ) ：返回多个（节点数组）

2.1.2 查看/修改属性节点

  • getAttribute(“属性名”)

  • setAttribute(“属性名”,“属性值”)

  • 根据层次关系查找节点
    parentNode
    firstChild
    lastChild

直接上代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>获取属性</title>
	</head>
	<body>
		<input type="text" name="na" id="da" class="ca" />
		<br>
		<hr>
		<button type="button" onclick="fa()">获取input标签的属性值</button>
		<button type="button" onclick="fb()">修改input标签的属性值</button>
		<hr>
		<div id="">
			<!-- 要获取 span的父标签 -->
			<span id="da">1</span>
			<span id="da">1</span>
			<span id="da">1</span>
			<span id="da">1</span>
			<span id="da">1</span>
		</div>
	</body>
	<script type="text/javascript">
		function fa() {
			//　获取 input标签
			var da = document.getElementById("da");
			// 获取 id属性值
			var id = da.getAttribute("id");
			// 获取 name属性值
			var name = da.getAttribute("name");
			// 获取 class属性值
			var ca = da.getAttribute("class");
			// 获取 value属性值
			var value = da.value;
			// 获取 type属性值
			var tp = da.getAttribute("type");

			console.info("id = " + id)
			console.info("name = " + name)
			console.info("class = " + ca)
			console.info("value = " + value)
			console.info("type = " + tp)
		}

		function fb() {
			//　获取 input标签
			var da = document.getElementById("da");
			console.info("da = " + da)
			var sb = document.getElementById("sb");
			console.info("sb = " + sb)
			// 修改id type name class属性
			da.setAttribute("id", "sb");
			da.setAttribute("type", "button");
			da.setAttribute("name", "sn");
			da.setAttribute("class", "sc");
			da.setAttribute("value", "按钮");
		}
	</script>
</html>

2.2创建和增加节点

2.2.1创建和增加节点的方法

  • createElement（）：创建节点
  • appendChild（）：末尾追加方式插入节点
  • insertBefore（）：在指定节点前插入新节点
  • cloneNode（）：克隆节点

2.2.2创建和增加节点

//创建和增加节点
<body>
		<img id="da" border="8px" src="img/logo1.png" width="300px"  height="300px">
		<hr >
		<button type="button" onclick="zjiatup()">增加图片</button>
		<button type="button" onclick="fa()">复制图片</button>
	</body>
	<script type="text/javascript">
		function zjiatup(){
			//动态创建一个img标签用来存放图片
			var newImg=document.createElement("img");
			//给新建的img标签newImg添加src属性
			newImg.setAttribute("src","img/logo2.png");
			//获取原先的图片
			var da=document.getElementById("da");
			//将newImg插入到da的前面
			document.body.insertBefore(newImg,da);
		}
		
		function fa(){
			//获取要复制的图片
			var da=document.getElementById("da");
			var newDa=da.cloneNode(false);//克隆da参数：true表示把该标签里面的子标签也进行克隆；false，则不克隆子标签
			//将要克隆的新节点newDa追加到
			//将body子节点的末尾追加
			document.body.appendChild(newDa);
		}
	</script>

2.3删除和替换节点

2.3.1删除和替换节点的方法

removeChild（）：删除节点
replaceChild( ) ：替换节点

2.3.2删除和替换节点

<body>
		<button type="button" onclick="fa()">替换图片</button>
		<button type="button" onclick="fb()">删除图片</button>
		<hr>
		<img id='da' border="8px" src="img/logo1.png" width="200px" height="200px" />
		<img id="db" border="8px" src="img/logo2.png" width="300px" height="300px">
	</body>
	<script type="text/javascript">
		function fa() {
			// 1.获取被替换的节点
			var da = document.getElementById("da");
			// 2.创建新节点，并设置节点的相关属性。
			var newImg = document.createElement("img");
			newImg.setAttribute("src", "img/黑头.gif");
			newImg.setAttribute("width", "200px");
			newImg.setAttribute("height", "200px");
			// 3.用新节点替换被替换的节点:newImg替换da
			document.body.replaceChild(newImg, da);
		}
		
		function fb(){
			//获取要删除的节点
			var db=document.getElementById("db");
			document.body.removeChild(db);
		}
	</script>

3.HTML DOM的特有对象和操作

HTML文档中的每个节点都是DOM对象，每类对象都有1套属性、方法。
最常用的是

表格和各类表单元素对象
在这里插入图片描述

3.1HTML DOM对象 的属性访问

不再使用setAttribute（）/ getAttribute（）方法
简化为对象名.属性值进行读取或修改

function change(){
  var imgs=document.getElementById("s1");
  imgs.src="images/grape.jpg";
}
function show(){
  var hText=document.getElementById("s1").alt;
  alert("图片的alt是："+hText)
}

3.2HTML DOM对象-table对象

1、使用Core DOM标准操作获取表格对象
2、使用HTML DOM的table相关对象的属性、方法、事件操作表格
在这里插入图片描述

3.3表格相关对象

3.3.1table表格对象

属性:

  • rows //返回包含表格中所有行的一个数组

方法:

  • insertRow() //在表格中插入一个新行
  • deleteRow() //从表格中删除一行
//用法示例代码 
tableObject.rows[ ]
 tableObject.insertRow(index)
deleteRow(index)

3.3.2tableRow表格行对象

属性:

  • cells //返回包含行中所有单元格的一个数组
  • rowIndex //返回该行在表中的位置

方法:

  • insertCell() //在一行中的指定位置插入一个空的标签
  • deleteCell() //删除行中指定的单元格
//用法示例 
tableRowObject.insertCell(index);
tableRowObject.deleteRow(index);

3.3.3tableCell单元格对象

属性：

  • cellIndex //返回单元格在某行单元格集合中的位置

  • innerHTML //设置或返回单元格的开始标签和结束标签之间的HTML

  • align //设置或返回单元格内部数据的水平排列方式

  • className //设置或返回元素的class属性

//用法示例
cell2.innerHTML=“改变单元格的HTML内容";
cell2.align="center";

3.4用table对象实现表格

//先写一个
		<input id="d1" type="button" value="增加一行" onclick="addRow()"/>
		<input id="b2" type="button" value="删除第二行" onclick="delRow()" />
		<input id="b3" type="button" value="修改标题样式" onclick="updateRow()"/>
		<input id="b4" type="button" value="复制最后一行" onclick="copyRow()"/>
	</body>
	<script type="text/javascript">
	//增加一行
	// 增加一个行对象，然后插入单元格，最后设置单元格 内容
		function addRow(){
			var sa=document.getElementById("myTable");//获取要操作的表格
			var sb=sa.insertRow(3);//插入(根据下标来确定位置)
			var sc=sb.insertCell(0);//插入第一个单元格(根据下标来确定位置)
				sc.innerHTML="我就是我， 不一样的我";//设置第一个单元格的内容
				var sd=sb.insertCell(1);//插入第二个单元格(根据下标来确定位置)
				sd.innerHTML="88.8";//设置第二个单元格的内容
				sd.align="center";//设置第二个单元格内容居中
			}
			
				// 修改标题样式
				// 使用class样式属性直接修改标题样式
			function updateRow(){//修改标题样式方法
				var sa=document.getElementById("row1");//获取第一行
				sa.className="title";//把样式表title赋给sa
				}
			
			//删除第二行
			function delRow(){
			    var sa=document.getElementById("myTable");
				sa.deleteRow(2);
				}
				
				// 复制最后一行
			function copyRow(){
				var sa=document.getElementById("row3");//访问要复制的行
				var sb=sa.cloneNode(true);//复制执行的行及子节点
				document.getElementById("myTable").appendChild(sb);//在指定节点的末尾添加行
			}
	</script>

3.5订单的删除和增加与修改

  • 使用insertRow()插入行

实现思路和关键代码:

//使用集合rows和属性length计算当前表格中的行数
 var addTable=document.getElementById("order");
 var row_index=addTable.rows.length-1;//索引从0开始，所以总长度-1

//使用tableRow对象插入新行时，设置行id属性，方便后续删除
//插入ID号，产生效果为：<tr id=“row1”>，方便后续传递行号参数给删除函数delRow(rowId)
newRow.id="row"+row_index;

实现思路 :

  • “修改”按钮函数editRow()、 “确定”按钮函数upRow()，两个函数传递的参数都是当前行的id号
  • 函数editRow()：使用lastChild访问最后一个单元格中的“修改”按钮，并改变value值为“确定”
  • 函数upRow()：使用firstChild和value获取当前数量值， 同样改变按钮上显示的文本和调用的函数

以下就是订单的删除和增加与修改的所有代码：

		<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;
			}
			input text {
				width: 100px;
			}
		</style>
		<script type="text/javascript">
			//增加
			function addRow() {
				var sa = document.getElementById("order"); //获取表格
				var sum = sa.rows.length - 1; //获取总行数，不包括最后按钮一行
				var sb = sa.insertRow(sum); //在表格最后位置插入一行
				sb.id = "row" + sum; //给插入的行取一个id
				
				var ca = sb.insertCell(0); //插入第0列
				ca.innerHTML = "<input type='text'>";
				var cb = sb.insertCell(1); //插入第0列
				cb.innerHTML = "<input type='text' style='width:20px'>";
				var cc = sb.insertCell(2); //插入第0列
				cc.innerHTML = "<input type='text' style='width:20px'>";
				var cd = sb.insertCell(3); //插入第0列
				cd.innerHTML = "<input type='button' value='删除' οnclick=\"delRow('" + sb.id +
					"')\"> <input type='button' value='确定' οnclick=\"qdRow('" + sb.id + "')\">";
			}
			//删除
			function delRow(rid) {
				var va = document.getElementById("order"); //根据id获取表格对象
				var sa = document.getElementById(rid); //根据id获取你要删除的行对象
				var index = sa.rowIndex; //根据sa找到该行对象对应的下标
				va.deleteRow(index); //开始删除行
			}
			//确定
			function qdRow(rid) {
				var sa = document.getElementById(rid); //根据id获取你要确定的行
				var sum = sa.cells; //获取该行所有列(文本框)的集合
				//alert(sum.length);
				//alert(sum[0].lastChild.value);
				var ca = sum[0].lastChild.value;
				sum[0].innerHTML = ca;
				var cb = sum[1].lastChild.value;
				sum[1].innerHTML = cb;
				var cc = sum[2].lastChild.value;
				sum[2].innerHTML = cc;

				sum[3].lastChild.value = "修改";
				sum[3].lastChild.setAttribute("onclick", "editRow('" + rid + "')");
			}
			//修改
			function editRow(rid) {
				var sa = document.getElementById(rid);
				var sum = sa.cells;

				var ca = sum[0].innerHTML;
				sum[0].innerHTML = "<input type='text' value='" + ca + "'>";
				var cb = sum[1].innerHTML;
				sum[1].innerHTML = "<input type='text' style='width:20px' value='" + cb + "'>";
				var cc = sum[2].innerHTML;
				sum[2].innerHTML = "<input type='text' style='width:20px' value='" + cc + "'>";

				sum[3].lastChild.value = '确定';
				sum[3].lastChild.setAttribute("onclick", "qdRow('" + rid + "')");
			}
		</script>
	</head>

	<body>
		<table 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>12</td>
				<td>&yen;568.50</td>
				<td><input name="rowdel" type="button" value="删除" onclick='delRow("row1")' />
					<input name="edit" type="button" value="修改" onclick='editRow("row1")' />
				</td>
			</tr>
			<tr>
				<td colspan="4" style="height:30px;">
					<input name="addOrder" type="button" value="增加订单" onclick="addRow()" />
				</td>
			</tr>
		</table>
萧磊y
关注
JavaScript DOM 对象详解
xycxycooo的博客
07-16 1137
在 JavaScript 编程中，DOM（Document Object Model）是指文档对象模型，它提供了一组用于与 HTML 文档进行交互的对象。DOM 是一种跨平台的、独立于语言的接口，它将 HTML 或 XML 文档表示为一个树形结构，其中每个节点都是一个对象，代表文档的一部分（如元素、属性、文本等）。通过 DOM，开发者可以添加、删除、修改和查询文档中的元素和内容。通过本文的详细讲解，相信你已经对 JavaScript 中的 DOM 对象有了全面的了解。方法可以通过元素的标签名获取元素集合。
JavaScript-DOM学习归纳总结
sen_03的博客
10-22 373
JavaScript-DOM学习归纳总结 现在所说的JavaScript包含了三个部分 ECMAScript：js的语法规范 DOM：操作网页的功能 BOM：操作浏览器的功能 DOM（Document Object Model文档对象模型）： 1.概念 DOM 是 W3C（万维网联盟）的标准。 （1）W3C DOM 标准被分为 3 个不同的部分： ① 核心 DOM - 针对任何结构化文档的标准模型 ② XML DOM - 针对 XML 文档的标准模型 ③ HTML DOM - 针对 HTML 文档的标准
JavaScript 的 DOM 技术
weixin_74141222的博客
09-18 1351
通过 JavaScript 的 DOM 技术，可以实现用户与浏览器页眉的实时动态交互，以及页面元素的实时更新。算是从开发静态页面跳跃到了开发动态交互页面的提升了。以上就是 JavaScript 的 DOM技术，本文简单介绍了 DOM 技术对页面开发的动态交互，而DOM技术是一种强大且灵活的技术，它可以帮助开发人员更好地控制和操作网页的结构和内容，提供了丰富的功能和灵活性，有补充或指正的内容，欢迎在评论区中留言。
JavaScript — DOM 操作详解
最新发布
善良的小乔的博客
03-27 209
DOM是 JavaScript 操作 HTML 和 XML 文档的编程接口。它把网页内容当作树形结构，可以动态修改页面内容、样式、结构等。如果有很多子元素，需要监听同一个事件，建议使用。这样，即使后来动态添加按钮，也能触发事件。添加/删除 CSS 类（推荐）
JavaScript之DOM
qq_43751200的博客
06-05 1832
DOM
Javascript进阶 ----- DOM技术
weixin_65489884的博客
04-20 982
dom事件的学习
JavaScript-DOM--:JavaScript DOM编程艺术源代码
03-24
在"JavaScript DOM编程艺术"这本书中，作者深入探讨了如何利用JavaScript有效地操纵DOM以实现动态网页效果。 首先，DOM的核心是将HTML或XML文档解析为一系列可编程的对象。每个HTML元素、属性、文本节点等都有对应...
JavaScript-DOM---Interactive-and-Dynamic-[removed]JavaScript DOM的代码存储库-交互式和动态JavaScript，由Packt发布
05-27
JavaScript-DOM-交互式和动态JavaScript JavaScript DOM的代码存储库-交互式和动态JavaScript，由Packt发布 JavaScript DOM-交互式和动态JavaScript 这是发布的的代码存储库。 它包含从头到尾完成视频课程所需的...
Javascript-dom-manipulation
05-01
在这个"Javascript-dom-manipulation"主题中，我们将深入探讨如何使用JavaScript有效地进行DOM操作。 1. **获取DOM元素** - `getElementById`: 通过ID查找唯一元素。 - `getElementsByClassName`: 获取指定类名的...
javascript-dom-exercises-2.3
03-18
在这个“javascript-dom-exercises-2.3”项目中，我们聚焦于DOM操作的进阶技巧和实践。这个练习集可能是为了帮助开发者巩固对JavaScript DOM API的理解，特别是如何使用它来修改、添加和删除页面元素。 1. **DOM...
Javascript-DOM编程艺术研究.docx
11-17
在实际应用中，JavaScript-DOM编程的艺术不仅包括理解和掌握DOM的基本概念，还包括优化DOM操作以提高性能，比如减少DOM遍历，利用文档碎片（DocumentFragment）进行批量操作，以及使用事件委托等技术。学习DOM编程...
Javascript之dom
weixin_51767056的博客
09-03 1155
文档对象模型(Document Object Model，简称DOM)，是W3C组织推荐的处理可扩展标记语言(HTML或XML)的标准编程接口。W3C已经定义了一系列的DOM接口，通过这些DOM接口可以改变网页的内容，结构和样式。element . 属性例如：div . idelement . getAttribute('属性') //自己定义的
JavaScript(JS)的DOM对象(JS的Document对象)----什么是DOM对象?
No8g攻城狮的博客
04-02 7900
1、概念： Document Object Model 文档对象模型：将标记语言文档的各个组成部分，封装为对象。可以使用这些对象，对标记语言文档进行CRUD（增删改查）的动态操作。 通过 HTML DOM（如图所示），可访问 JavaScript HTML 文档的所有元素。 当网页被加载时，浏览器会创建页面的文档对象模型（Document Object Model）。HTML DOM 模型被...
前端javascript的DOM对象操作技巧，全场景解析
景天科技苑
03-09 2809
JavaScript中，dom是一套操作文档内容的方法，可以完成查、增、删、改（先删后增）的操作。而且dom的开发效率很高，还可以用于服务器渲染、weex 开发等。本文向大家介绍JavaScript中的dom。
JavaScript-DOM详解
__猫玖__的博客
11-24 1091
在 JavaScript 中，DOM（文档对象模型）是表示和操作 HTML 或 XML 文档的标准接口。DOM 提供了一种在代码中动态访问和更新文档的方式。文档节点是 DOM 中的最顶层节点，代表整个文档。下面详细说明文档节点的一些概念和操作，并提供相应的示例。在 JavaScript 中，事件是与文档或浏览器交互时发生的事情的表示。这些事件可以是用户的操作，也可以是浏览器或文档本身的状态变化。包含有关事件的详细信息。事件从目标元素冒泡至根元素。将事件处理程序添加到父元素，利用事件冒泡减少处理程序数量。
JavaScript 之 DOM (入门 详细）
m0_74279984的博客
08-13 953
DOM Document Object Model 文档对象模型
JavaScript DOM操作(超详细)
wu_ry的博客
03-14 2917
在JavaScript中，"-"表示减号，如果样式属性名称中带有"-"号，则要省去"-",并且"-"后的首字母要大写，因此font-size对应的style对象的属性名称应为fontSize.微软公司为每个元素提供了一个currentStyle对象，它包含了所有元素的style对象的特性和任何未被覆盖的CSS规则的style特性，currentStyle对象与style对象的使用方式一样，语法格式如下所示。使用style属性和className属性设置元素的样式，想要获取某个元素的属性值，应该如何实现呢？
JavaScript的三大组成部分之DOM
m0_74315688的博客
03-23 1013
欢迎关注辉辉，持续更新中~
JavaScriptDOM总结（有序整理）史上最全最详细（建议收藏）
编程教培一线讲师
04-09 1177
在学习JavaScript时,DOM和BOM都是重点内容 在学习加复习的情况下 理解了浅层内容 下面是展示 一：DOM简介 文档对象模型（Document Object Model，简称 DOM），是 W3C 组织推荐的处理可扩展标记语言（HTML 或者XML）的标准编程接口。 W3C 已经定义了一系列的 DOM 接口，通过这些 DOM 接口可以改变网页的内容、结构和样式。  文档：一个页面就是一个文档，DOM 中使用 document 表示  元素：页面中的所有标签都是元素，DOM 中使用 ele.
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值