DOM对象

最新推荐文章于 2024-08-27 14:57:53 发布
最新推荐文章于 2024-08-27 14:57:53 发布
阅读量4.9k 收藏 33
点赞数 3
分类专栏： 笔记 文章标签： js javascript html dom
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45649686/article/details/113246332
版权

1.Html DOM

1.DOM是Document Object Model文档对象（网页中的标签）模型的缩写。
2.通过html DOM，可用javaScript操作html文档的所有标签。
3.DOM对象：指的是一类对象的总称。
4.DOM：在js对网页进行操作时，认为网页中的每个标签就是一个对象，使用面向对象的思想来操作，js中提供了一个document对象，表示整个html文档对象，网页加载后会自动生成表示此文档的document对象，通过document提供的方法精确获得网页中要操作的标签。

2.查找元素

要操作，先得到。
四种方式查找：
1.通过id找到html标签：
document.getElementById(“id”);
2.通过标签名找到html标签：
document.getElementsByTagName(“p”);
3.通过类名找到html标签：
document.getElementsByClassName(“p”);
4.通过name找到html标签：
document.getELementsByName(“name”).

3.js对网页操作

1.标签属性操作：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript">
			/*
			DOM对象：指的是一类对象的总称
			DOM：在js对网页进行操作时，认为网页中的每个标签就是一个对象，使面向对象的思想来操作
			js提供了一个document对象，表示整个html文档对象，网页加载后会自动生成表示此文档的document
			对象，通过document对象中提供的方法精确获得网页中要操作的标签。
			
			1.js对网页操作---标签属性操作
			*/
			function oper(){
				var a = document.getElementById("text1");//通过标签的id获得标签
				var b = document.getElementById("text2");
				var obj = document.body;//获得body标签对象
				b.value = a.value;
				a.value = "";
			}
		</script>
	</head>
	<body>
		<!-- 点击操作按钮，将第一个文本框的值，赋给第二个文本框，然后将第一个文本框清空 -->
		<input id="text1" type="text" value="" /><br />
		<input id="text2" type="text" value="" /><br />
		<input type="button" value="操作" onclick="oper()" />
	</body>
</html>

2.标签体内容操作

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript">
			/*
			DOM对象：指的是一类对象的总称
			DOM：在js对网页进行操作时，认为网页中的每个标签就是一个对象，使面向对象的思想来操作
			js提供了一个document对象，表示整个html文档对象，网页加载后会自动生成表示此文档的document
			对象，通过document对象中提供的方法精确获得网页中要操作的标签。
			
			1.js对网页操作---标签属性操作
			2.js对网页操作---标签内容操作
			*/
			function oper(){
				var dObj1 = document.getElementById("div1");
				var dObj2 = document.getElementById("div2");
				console.log(dObj1.innerHTML);//innerHTML获得标签内HTML内容（包含标签，解析标签）
				console.log(dObj2.innerText);//innerText获得标签内的文本内容（纯文本，不解析标签）
			}
		</script>
	</head>
	<body>
		<div id="div1">
			<b>这是一个div</b>
		</div>
		<div id="div2">
			<b>这是一个div</b>
		</div>
		<input type="button" value="操作" onclick="oper()" />
	</body>
</html>

3.标签的css样式操作

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript">
			/*
			DOM对象：指的是一类对象的总称
			DOM：在js对网页进行操作时，认为网页中的每个标签就是一个对象，使面向对象的思想来操作
			js提供了一个document对象，表示整个html文档对象，网页加载后会自动生成表示此文档的document
			对象，通过document对象中提供的方法精确获得网页中要操作的标签。
			
			1.js对网页操作---标签属性操作
			2.js对网页操作---标签内容操作
			3.js对网页操作---标签样式（css属性）操作
			*/
			function oper(){
				var dObj = document.getElementById("div1");
				dObj.style.backgroundColor="red"
			}
		</script>
	</head>
	<body>
		<div id="div1">
			<b>这是一个div</b>
		</div>
		<input type="button" value="操作" onclick="oper()" />
	</body>
</html>

4.事件操作

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript">
			/*
			DOM对象：指的是一类对象的总称
			DOM：在js对网页进行操作时，认为网页中的每个标签就是一个对象，使面向对象的思想来操作
			js提供了一个document对象，表示整个html文档对象，网页加载后会自动生成表示此文档的document
			对象，通过document对象中提供的方法精确获得网页中要操作的标签。
			
			1.js对网页操作---标签属性操作
			2.js对网页操作---标签内容操作
			3.js对网页操作---标签样式（css属性）操作
			4.js对网页操作---事件操作
			*/
			function loadBody(){
				//先需要让网页中的标签加载，然后获得标签，绑定处理函数
				var iObj = document.getElementById("in");
				iObj.onclick=oper;
				/* iObj.οnclick=function(){
					console.log("aaa")
				} */
				
			}
			function oper(){
				console.log("aaa")
				var dObj = document.getElementById("div1");
				dObj.style.backgroundColor="blue";
			}
		</script>
	</head>
	<body onload="loadBody()">
		<div id="div1">
			<b>这是一个div</b>
		</div>
		<input type="button" id="in" value="操作" />
	</body>
</html>

5.批量操作

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript">
			/*
			DOM对象：指的是一类对象的总称
			DOM：在js对网页进行操作时，认为网页中的每个标签就是一个对象，使面向对象的思想来操作
			js提供了一个document对象，表示整个html文档对象，网页加载后会自动生成表示此文档的document
			对象，通过document对象中提供的方法精确获得网页中要操作的标签。
			
			1.js对网页操作---标签属性操作
			2.js对网页操作---标签内容操作
			3.js对网页操作---标签样式（css属性）操作
			4.js对网页操作---事件操作
			*/
			
			function oper(flag){
				//通过标签名称来获得标签对象，返回的是一个集合/数组
				/* var objs = document.getElementsByTagName("input");
				for(var i=0;i<objs.length;i++){
					console.log(objs[i].value)
				} */
				
				//通过标签的name属性值获得标签对象
				var objs =document.getElementsByName("check");
				for(var i=0;i<objs.length;i++){
					objs[i].checked = flag; //true/"checked"
				}
				
				//通过标签的类属性获得标签对象
				/* var objs = document.getElementsByClassName("c1");
				for(var i=0;i<objs.length;i++){
					console.log(objs[i].value)
				} */
			}
		</script>
	</head>
	<body>
		<input type="checkbox" class="c1" name="check" value="java" />java
		<input type="checkbox" class="c1" name="check" value="sql" />sql
		<input type="checkbox" name="check" value="html" />html
		<input type="checkbox" name="check" value="css" />css
		<input type="button" id="in" value="全选" onclick="oper(true)" />
		<input type="button" id="in" value="全不选" onclick="oper(false)" />
	</body>
</html>

6.批量为多个标签绑定事件及处理函数

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript">
			/*
			DOM对象：指的是一类对象的总称
			DOM：在js对网页进行操作时，认为网页中的每个标签就是一个对象，使面向对象的思想来操作
			js提供了一个document对象，表示整个html文档对象，网页加载后会自动生成表示此文档的document
			对象，通过document对象中提供的方法精确获得网页中要操作的标签。
			
			1.js对网页操作---标签属性操作
			2.js对网页操作---标签内容操作
			3.js对网页操作---标签样式（css属性）操作
			4.js对网页操作---事件操作
			*/
			
			//批量的为多个标签绑定事件及处理函数
			window.onload=function(){
				var objs = document.getElementsByTagName("input");
				for(var i=0;i<objs.length;i++){
					objs[i].onclick=function(){
						console.log(this.value)
					}
				}
			}
		</script>
	</head>
	<body>
		<input type="button"  value="操作1"  />
		<input type="button"  value="操作2"  />
		<input type="button"  value="操作3"  />
	</body>
</html>

4.表单验证

1.JavaScript可用来在数据被送往服务器前对HTML表单中的这些输入数据进行验证；
2.被JavaScript验证的这些典型表单数据有：
（1）用户是否已填写表单中的必填项目（内容长度）？
（2）用户输入的内容格式是否合法？

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript">
			/*
			提交表单时，对表单内容进行验证，不符合要求的阻止表单提交
			onsubmit事件，当点击submit按钮时触发，调用处理函数，函数返回true提交表单，false不提交
			如果按钮不是submit类型，但是要提交，使用在js中提交表单的方式
			document.getElementById("formID").submit()
			*/
		   function checkFrom(){
				var account = document.getElementById("accountID").value;
				var password = document.getElementById("passwordID").value;
				if(account.length == 0){
					alert("账号不能为空！")
					return false;
				}
				if(password.length == 0){
					alert("密码不能为空！")
					return false;
				}
				return true;
		   }
		</script>
	</head>
	<body>
		<form action="server.html" method="get" onsubmit="return checkFrom()" id="formID" >
			账号：<input type="text" id="accountID" value="" /><br />
			密码：<input type="text" id="passwordID" value="" /><br />
			<input type="submit" value="提交" id="submitID" />
		</form>
	</body>
</html>

3.正则表达式验证
^匹配以指定字符开头的字符串
$匹配以指定字符结尾的字符串
*匹配前面的字符式零次或多次
{n}匹配确定的 n 次
{n,}至少匹配n 次
{n,m}匹配n-m次，包含n和m
[0-9]表示0-9之间的任意字符
\d 匹配一个数字字符。等价于 [0-9]
\D 匹配一个非数字字符。等价于 [^0-9]
[a-z]匹配 ‘a’ 到 ‘z’ 范围内的任意小写字母字符
[A-Z]匹配 ‘A’ 到 ‘Z’ 范围内的任意大写字母字符
[^a-z]匹配任何不在 ‘a’ 到 ‘z’ 范围内的任意字符
x|y匹配 x 或 y
\w等价于’[A-Z,a-z,0-9,]‘
\W 等价于 '[^A-Z,a-z,0-9,]‘
只能输入汉字:[\u4e00-\u9fa5]

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript">
			/*
			正则表达式
			*/
		   function checkFrom(){
				/* var account = document.getElementById("accountID").value; */
				var password = document.getElementById("passwordID").value;
			/* 	var reg1 = new RegExp("^[1][3,5,7,8,9][0,1,2,5,7,8,9][0-9]{8}$");
				var res1 = reg1.test(account); */
				var reg2 = new RegExp("^\\w{8,18}$")
				var res2 = reg2.test(password);
				/* console.log(res1); */
				console.log(res2);
		   }
		</script>
	</head>
	<body>
		<form action="server.html" method="get" id="formID" >
			账号：<input type="text" id="accountID" value="" onblur="checkFrom(this)" /><br /> <!-- 鼠标出时触发 -->
			密码：<input type="text" id="passwordID" value="" onblur="checkFrom(this)" /><br />
			<input type="submit" value="提交" id="submitID" />
		</form>
	</body>
</html>
段茜琳
关注
专栏目录
DOM对象（一）——DOM对象介绍、获取元素、事件和样式操作（包括案例：仿京东显示密码 点击关闭二维码等）
m0_53619602的博客
07-14 1086
## 常见的鼠标事件 |鼠标事件| 触发条件 | |--|--| | onclick | 鼠标点击左键触发 | | onmouseover |鼠标经过触发 | | onmouseout | 鼠标离开触发 | | onfocus |获得鼠标焦点触发 | |onblur |失去鼠标焦点触发 | |onmousemove | 鼠标移动触发 | |onmouseup | 鼠标弹起触发 | |onmousedown |鼠标按下触发 |...
jQuery对象和DOM对象之间相互转换的方法介绍
10-24
在Web开发中，经常需要在jQuery对象和DOM对象之间进行转换，以便可以利用各自对象的方法优势进行高效编程。jQuery对象是包装了DOM对象的类数组对象，它们之间的转换虽然看似简单，但在实际操作中却非常重要。 首先...
Dom对象
weixin_33972649的博客
10-25 122
Dom对象 全称 document object model 文档对象模型 Dom主要研究html中的节点（标签）对节点进行操作，改变标签属性，改变css样式，添加事件等。Dom研究的对象是document 操作流程： 　　　　1、选择你要操作的节点 　　　　　　document.getElementById("idname") 通过id名获取元素 　　　　　　document...
DOM-详解
最新发布
huangzitaoyyds的博客
08-27 689
DOM是JS操作网页的接口，全称为“文档对象模型”（Document Object Model）。它的作用是将网页转为 一个JS对象，从而可以用脚本进行各种操作（比如增删内容）。文档对象模型（DOM）是网页的编程接口。它给文档（结构树）提供了一个结构化的表述并且定义了一 种方式——程序可以对结构树进行访问，以改变文档的结构，样式和内容。要改变页面的某个东西，JS就需要获得对网页中所有元素进行访问的入口。这个入口，连同对HTML元 素进行添加、移动、改变或移除的方法和属性，都是通过DOM来获得的。
JavaScript-DOM
03-11 274
DOM DOM 是 W3C 标准（是 HTML 文档对象模型的英文缩写，Document Object Model ）。 DOM 定义了用于 HTML 的一系列标准的对象，以及访问和处理 HTML 文档的标准方法。 通过 DOM，可以访问所有的 HTML 元素，连同它们所包含的文本和属性。可以对其中的内容进行修改和删除，同时也可以创建新的元素。 DOM 独立于平台和编程语言。它可...
HTML DOM
weixin_30800987的博客
01-04 107
DOM对象介绍 2009-07-21 13:49 一、DOM简述DOM—Document Object Model,它是W3C国际组织的一套Web标准。它定义了访问HTML文档对象的一套习属性、方法和事件。 DOM是以层次结构组织的节点或信息片断的集合。文档对象模型（Document Object Model）是给HTML与XML文件使用的一组API。DOM的本质是建立网页与脚...
jquery对象和javascript对象即DOM对象相互转换
12-09
jQuery对象和JavaScript对象（DOM对象）虽然在很多方面都是互补的，但它们在功能和使用上有着明显的区别。理解如何在这两者之间进行转换是编写高效、简洁的jQuery代码的关键。 首先，jQuery对象是通过调用jQuery...
解决JS内存泄露之js对象和dom对象互相引用问题
01-19
该问题涉及到作用域链，js对象和dom对象互相引用的问题。  因为对于匿名函数而言，其作用域链包含三个对象：匿名函数的变量对象、doTry()的变量对象和全局变量对象。此时doTry函数对象中btn变量引用了dom对象，即do...
遍历DOM对象内的元素属性示例代码
09-04
当需要遍历DOM对象内的元素属性时，通常是为了获取或修改元素的各种特性。这个过程可以通过JavaScript来实现，特别是当我们需要获取特定ID的元素并检查其所有属性时。以下将详细介绍如何遍历DOM对象内的元素属性，并...
DOM — DOM对象继承关系1
08-08
DOM 对象继承关系 DOM（Document Object Model）是 HTML 和 XML 文档的编程接口，它允许开发者使用脚本语言来访问和修改文档的结构和内容。DOM 中的对象继承关系是指不同类型的 DOM 对象之间的继承关系，了解这些...
什么是HTML DOM对象
阿飞
03-10 2345
HTML DOM 对象 HTML DOM Document 对象 Document 对象 每个载入浏览器的 HTML 文档都会成为 Document 对象。 Document 对象使我们可以从脚本中对 HTML 页面中的所有元素进行访问。 提示：Document 对象是 Window 对象的一部分，可通过 window.document 属性对其进行访问。 HTML DOM Element 对象...
dom对象是什么--乐字节大数据
qq_38461388的博客
07-15 416
DOM对象 ​ <font color="red">DOM</font>：Document Object Model 文档对象模型 ​ 要实现页面的动态交互效果，bom 操作远远不够，需要操作 html 才是核心。如何操作 htm，就是 DOM。简单的说，dom 提供了用程序动态控制 html 接口。DOM即文档对象模型描绘了一个层次化的节点树，运行开发人员添加、移除和修改页面的某一部分。dom 处于javascript 的核心地位上。 ​ 每个载入浏览器的 HTML 文档都会
什么是DOM对象？如何获取DOM对象？
zy1992As的博客
06-13 2340
DOM对象本质上是浏览器根据html标签生成的 JS对象，它的所有的标签属性都可以在这个 JS对象上面找到，修改这个对象的属性会自动映射到标签身上。DOM的核心思想是把网页内容当做对象来处理。其中document 对象是DOM 里提供的一个对象，所以它提供的属性和方法都是用来访问和操作网页内容的，网页中所有的内容在document里面。document与其他网页中各个节点元素关系如下：将 HTML 文档以树状结构直观的表现出来，我们称之为文档树或 DOM 树。文档树模型直观的体现了标签与标签之间的关系。
JS之DOM对象
Ven
05-18 497
1.什么是DOM 文档对象模型（Document Object Model，简称DOM） 节点 根据 DOM，HTML 文档中的每个成分都是一个节点。 DOM 是这样规定的： 整个文档是一个文档节点 每个 HTML 标签是一个元素节点 包含在 HTML 元素中的文本是文本节点 每一个 HTML 属性是一个属性节点 注释属于注释节点 Node 层次 节点彼此都有等级关系。 HTML 文档中的所有节点...
Dom对象是什么？
qq_40396568的博客
07-10 288
一、DOM对象 DOM，全称“Document Object Model（文档对象模型）”，它是由W3C组织定义的一个标准。 在前端开发时，我们往往需要在页面某个地方添加一个元素或者删除元素，这种添加元素、删除元素的操作就是通过DOM来实现的。 说白了，DOM就是一个接口，我们可以通过DOM来操作页面中各种元素，例如添加元素、删除元素、替换元素等。这下大家就懂了吧。记住，DOM就是文档对象模型，文档对象模型就是DOM，很多人在学习DOM的时候看到“文档对象模型”还不知道是什么？ <!DOCT
JavaScript DOM对象选择器详解及实现
本文将详细介绍如何根据给定的选择器类型，如ID、标签名、类名或属性，来选取第一个匹配的DOM对象。 首先，明确目标是根据提供的选择器字符串（如`$("#adom")`、`$("a")`等）找出文档中符合特定条件的第一个元素。...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值