JavaScript--DOM

已于 2022-04-10 22:00:04 修改
阅读量420 收藏 1
点赞数
文章标签： java javascript 前端
于 2022-04-07 22:22:49 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_63223374/article/details/124027785
版权

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学习归纳总结
sen_03的博客
10-22 314
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 对象详解
xycxycooo的博客
07-16 911
在 JavaScript 编程中，DOM（Document Object Model）是指文档对象模型，它提供了一组用于与 HTML 文档进行交互的对象。DOM 是一种跨平台的、独立于语言的接口，它将 HTML 或 XML 文档表示为一个树形结构，其中每个节点都是一个对象，代表文档的一部分（如元素、属性、文本等）。通过 DOM，开发者可以添加、删除、修改和查询文档中的元素和内容。通过本文的详细讲解，相信你已经对 JavaScript 中的 DOM 对象有了全面的了解。方法可以通过元素的标签名获取元素集合。
JavaScript中操作DOM对象重点总结
妖精小狗的博客
08-31 6829
DOM： Document Object Model（文档对象模型）   节点和节点关系： 访问节点： 使用getElement系列方法访问指定节点：getElementById( )、getElementsByName( )、getElementsByTagName( ) 根据层次关系访问节点 节点的属性： 属性名称 描述 ...
JavaScript--DOM--通过DOM-style属性来设置样式，并由此获取样式
norang的博客
06-07 2117
通过style 属性获取样式有很大的局限性。 style 属性只能返回内嵌样式。换句话说，只有把CSS style 属性插入到标记里，才可以用DOM style 属性去查询那些信息： <p id="example" style="color: grey; font: 12px 'Arial',sans-serif;"> 这可不是使用样式的好办法——表现信息与结构混杂在一起了。更好的 办法是用一个外部样式表去设置样式： p#example { color: grey; font: 12p
JavaScript-DOM-属性节点
十二的博客
04-27 2057
JavaScript-DOM-属性节点
JavaScript-DOM练习
weixin_45515107的博客
03-18 4110
1、手风琴，实现页面切换，背景也随着切换 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"&g
JavaScript-DOM编程
qq_46096136的博客
09-30 7325
那么邮箱地址的正则表达式和邮箱地址进行匹配，能匹配成功，表示合法，反之表示不合法。第三：要能够独立的从网络当中搜索到你想要的正则表达式（搜索能力要有）[a-zA-Z0-9]{3,} 前面这堆中的任意字符至少出现3个。注意：数量永远匹配的都是前面的那个字符出现的次数。\W 匹配任意不是字母，数字，下划线，汉字的字符。[a-z]{1} a到z所有的字符中的任意1个。正则表达式是有一堆特殊的符号组成的一个表达式。[1-9] 没有指定数量的时候，默认是1个。其实在JS中，字符串String也是支持正则表达式的。
JavaScript--删除DOM
热门推荐
天行健 君子以自强不息，地势坤 君子以厚德载物。
07-15 1万+
1. 删除DOM 删除一个DOM节点就比插入要容易得多。插入DOM 要删除一个节点，首先要获得该节点本身以及它的父节点，然后，调用父节点的 removeChild 把自己删掉： <!-- HTML结构 --> <div id="list"> <p id="java">Java</p> <p id="python">Python</p> <p id="scheme">Scheme</p>
JavaScript-dom继承树
wust_cyl的博客
04-17 1151
DOM document object mobleDOM 定义了表示和修改文档所定义的方法。DOM对象即宿主对象，由浏览器厂家商定义，用来操作HTML和XML功能的集合。也有人称dom为html和xml的接口。友情提示：因为所学知识有限，部分内容没有说明（比如XML)，以后会补充说明。1 document  HTMLDocument  Document的关系看如下操作:情况很明显了。documen...
JavaScript--更新DOM
天行健 君子以自强不息，地势坤 君子以厚德载物。
07-14 2736
1. 更新DOM 1.1 更新节点 拿到一个DOM节点后，我们可以对它进行更新。 可以直接修改节点的文本，方法有两种： 一种是修改 innerHTML 属性，这个方式非常强大，不但可以修改一个DOM节点的文本内容，还可以直接通过HTML片段修改DOM节点内部的子树： 使用innerHTML设置文本 <body> <div id="item"></div> </body> <script> let item = documen
JavaScript-DOM--:JavaScript DOM编程艺术源代码
03-24
在"JavaScript DOM编程艺术"这本书中，作者深入探讨了如何利用JavaScript有效地操纵DOM以实现动态网页效果。 首先，DOM的核心是将HTML或XML文档解析为一系列可编程的对象。每个HTML元素、属性、文本节点等都有对应...
Javascript-dom-manipulation
05-01
在这个"Javascript-dom-manipulation"主题中，我们将深入探讨如何使用JavaScript有效地进行DOM操作。 1. **获取DOM元素** - `getElementById`: 通过ID查找唯一元素。 - `getElementsByClassName`: 获取指定类名的...
JavaScript-DOM---Interactive-and-Dynamic-[removed]JavaScript DOM的代码存储库-交互式和动态JavaScript，由Packt发布
05-27
JavaScript-DOM-交互式和动态JavaScript JavaScript DOM的代码存储库-交互式和动态JavaScript，由Packt发布 JavaScript DOM-交互式和动态JavaScript 这是发布的的代码存储库。 它包含从头到尾完成视频课程所需的...
Javascript-DOM编程艺术研究.docx
11-17
在实际应用中，JavaScript-DOM编程的艺术不仅包括理解和掌握DOM的基本概念，还包括优化DOM操作以提高性能，比如减少DOM遍历，利用文档碎片（DocumentFragment）进行批量操作，以及使用事件委托等技术。学习DOM编程...
javascript-dom-exercises-2.3
03-18
在这个“javascript-dom-exercises-2.3”项目中，我们聚焦于DOM操作的进阶技巧和实践。这个练习集可能是为了帮助开发者巩固对JavaScript DOM API的理解，特别是如何使用它来修改、添加和删除页面元素。 1. **DOM...
工厂模式的介绍及实现
户伟伟的博客
09-25 102
工厂模式（Factory Pattern）是一种创建型设计模式，提供了一种创建对象的接口，而无需显式指定对象的具体类。在这种模式中，我们通过定义一个工厂类，专门负责生产各种类型的对象，这样我们可以避免直接在代码中实例化具体类，使代码更具扩展性、灵活性和维护性。解耦：客户端代码与具体的类解耦，避免了对象创建逻辑的重复。简化对象创建：通过工厂统一管理对象的创建逻辑，使代码更清晰易懂。扩展性强：新增类时，只需在工厂中增加创建逻辑，而不必修改现有的业务代码。
Spring Boot 学习和使用
cesske的博客
09-24 1029
Spring Boot是一款开源的Java Web应用框架，旨在简化Spring应用的初始搭建以及开发过程。Spring Boot通过整合Spring技术栈中的诸多关键组件，为开发者提供了一种快速、简便的Spring应用开发方式。它遵循“约定优于配置”的原则，通过自动配置、起步依赖和内置的Servlet容器，极大地简化了传统Spring应用的配置和部署过程。Spring Boot通过其自动化配置、起步依赖、内嵌服务器等特性，极大地简化了Spring应用的开发和部署过程。
基于Hive和Hadoop的哔哩哔哩网站分析系统
最新发布
图南的博客
09-27 254
本项目是一个基于大数据技术的哔哩哔哩平台分析系统，旨在为用户提供全面的哔哩哔哩视频数据和深入的用户行为分析。系统采用 Hadoop 平台进行大规模数据存储和处理，利用 MapReduce 进行数据分析和处理，通过 Sqoop 实现数据的导入导出，以 Spark 为核心进行高效的数据处理。整个系统结合了大数据处理技术，为用户提供精准的内容推荐和深入的用户兴趣分析，帮助平台更好地了解视频趋势和用户需求。
DOM-XSS漏洞挖掘与攻击面全面解析
DOM-XSS（Document Object Model Cross-Site Scripting）是一种特殊的跨站脚本攻击，针对的是浏览器解析和执行JavaScript的能力，而非传统的HTTP响应头部。这种漏洞主要利用了HTML文档对象模型（DOM）的动态特性，...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值