JavaScript(DOM对象)

最新推荐文章于 2023-12-23 00:22:28 发布
最新推荐文章于 2023-12-23 00:22:28 发布
阅读量164 收藏
点赞数
分类专栏： JavaScript 文章标签： javascript html5 html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/WildKingxue/article/details/120164810
版权

一.什么是DOM对象？

DOM--Document Object Model[文档对象模型]

当网页被加载时，浏览器会创建页面的文档对象模型。

 用HTML表示则：

<html>
  <head>
      <title>My title</title>
  </head>
  <body>
      <a href=””>My link</a>
      <h1>My header</h1>
  </body>
</html>

二. 查找 HTML 元素

查找HTML元素有三种方法：

1.getElementById(id属性值);通过 id 查找 HTML 元素

实例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>DOM 通过 id 查找 HTML 元素</title>
		<script type="text/javascript">
		//得到点击事件
			function testById(){
				//通过id属性值查找HTMl元素p1
				var test = document.getElementById("p1");
				//改变大小
				test.style.fontSize="30px";
				//通过id属性值查找HTMl元素p2
				var test = document.getElementById("p2");
				//改变颜色
				test.style.color="red";
			}
		</script>
	</head>
	<body>
		<p id="p1">请把我的字体大小放大</p>
		<p id="p2">请把我的字体颜色变红</p>
		<p id="p2">我是否与同等id属性值改变</p>
		<input type="button" value="测试id属性值" onclick="testById()"/>
	</body>
</html>

 

 点击按钮事件

 当有id值相等时，只等得到第一个元素。

2. getElementsByTagName(标签名)通过标签名查找 HTML 元素

通过getElementsByTagName方法得到的结果依然是数组【只有一个元素的时候也是数组】

 实例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>DOM 通过标签名查找 HTML 元素</title>
		<script type="text/javascript">
			function testByTagName(){
				var test = document.getElementsByTagName("p");
				test[0].style.color="red";
				test[1].style.color="brown";
				test[2].style.color="yellow";
			}
		</script>
	</head>
	<body>
		<p>我是第一个</p>
		<p>我是第二个</p>
		<p>我是第三个</p>
		<input type="button"value="测试标签名" onclick="testByTagName()"/>
	</body>
</html>

 

 点击按钮事件

3. getElementsByClassName(class属性值)通过类名找到 HTML 元素

通过getElementsByClassName(class属性值)方法得到的结果依然是数组

实例： 

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>DOM通过类名找到 HTML 元素</title>
		<script type="text/javascript">
			function testByClassName(){
				var test1 = document.getElementsByClassName("p1");
				test1[0].style.color="red";
				var test2 = document.getElementsByClassName("p2");
				test2[0].style.color="green";
				test2[0].style.fontSize="30px";
				test2[1].style.color="blue";
			}
		</script>
	</head>
	<body>
		<p class="p1">嗨！小可爱们！</p>
		<p class="p2">嗨！小可爱们！</p>
		<p class="p2">嗨！小可爱们！</p>
		<input type="button" value="测试标签名" onclick="testByClassName()"/>
	</body>
</html>

 点击按钮事件

 

 

三.DOM可以完成的功能

1.JavaScript 能够改变页面中的所有 HTML 元素

<1>.innerHTML 属性--改变页面中HTML 元素的文本内容

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript">
			function shao(){
				var x = document.getElementById("p1");
				alert(x.innerHTML);
			}
		</script>
	</head>
	<body>
		<p id="p1">我<a href="#">爱</a>你</p>
		<input type="button"value="测试"onclick="shao()" />
	</body>
</html>

 注意:innerHTML中设置的字符串内容中有html标记，那么这个被包含的html标记会被解释运行。

<2>.innerText 属性--改变页面中HTML 元素的文本内容

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript">
			function shao(){
				var x = document.getElementById("p1");
				alert(x.innerText);
			}
		</script>
	</head>
	<body>
		<p id="p1">我<a href="#">爱</a>你</p>
		<input type="button"value="测试"onclick="shao()" />
	</body>
</html>

 注意:innerText中设置的字符串内容中有html标记，那么这个被包含的html标记会被作为字符串输出。

2.JavaScript 能够改变页面中的所有 HTML 属性

属性在html和css中都有。

Html中的属性---是给浏览器解释运行html标记时通过附加信息。

              往往出现在html的开始标记中，如果有多个中间使用空格分离。

<1.>修改内容

使用innerHTML改变：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>innerHTML 属性</title>
		<script type="text/javascript">
			function shao(){
				var test = document.getElementsByTagName("p");
				test[0].innerHTML="我不喜欢你！";
			}
		</script>
	</head>
	<body>
		<p>我喜欢你！</p>
		<input type="button"value="改变内容" onclick="shao()"/>
	</body>
</html>

 

改变后：

  

 使用innerText改变：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>innerText 属性</title>
		<script type="text/javascript">
			function shao(){
				var test = document.getElementById("p1");
				test.innerText="I was a king of the wild!";
			}
		</script>
	</head>
	<body>
		<p id="p1">我是一名<a href="">野王</a>！</p>
		<input type="button"value="改为英文" onclick="shao()"/>
	</body>
</html>

 

改变后：

  

<2.>得到和修改属性

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>得到修改属性</title>
		<script type="text/javascript">
			function src1(){
				var img1 = document.getElementsByTagName("img");
				//得到图片路径
				alert(img1[0].src);
			}
			function src2(){
				var img2 = document.getElementsByTagName("img");
				img2[0].src="img/avatar2.png";
			}
		</script>
	</head>
	<body>
		<img src="img/avatar.png" >
		<input type="button"value="得到" onclick="src1()"/>
		<input type="button"value="修改" onclick="src2()"/>
	</body>
</html>

 得到路径：

原图：

 

修改后：

3.JavaScript 能够改变页面中的所有 CSS 样式

行内样式：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>图片显示与隐藏</title>
		<script type="text/javascript">
			function shao(){
				var img1 = document.getElementsByTagName("img");
				var src=img1[0].style.display;
				// img1[0].style.display="block";
				if(src=="block"){
					img1[0].style.display="none";
				}else{
					img1[0].style.display="block";
				}
			}
		</script>
	</head>
	<body>
		<input type="button"value="按钮" onclick="shao()"/><br>
		<img src="img/2048559.jpg" style="width: 300px;height: 300px;">
	</body>
</html>

 图片的显示与隐藏：

内嵌样式：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			.img2 {
				width: 100px;
				height: 100px;
				border: 10px solid rosybrown;
			} 
		</style>
		
		<script type="text/javascript">
			function shao() {
				var imgobj = document.getElementById("img1");
				imgobj.className = "img2";
			}
		</script>
	</head>
	<body>
		<img id="img1" src="img/avatar2.png" /><br>
		<input type="button" value="测试控制css" onclick="shao();">
	</body>
</html>

 

4.JavaScript 能够对页面中的所有事件做出反应

<1>页面初始化事件

第一种：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>页面初始化事件</title>
		<script>
			function shao() {
				alert("页面初始化事件");
			}
		</script>
	</head>
	<body onload="shao()">
	</body>
</html>

 第二种：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>页面初始化事件</title>
		<script type="text/javascript">
			window.onload = function() {
					alert("页面初始化事件");
					}
		</script>
	</head>
	<body>
	</body>
</html>

 都可以显示页面初始化事件。

 <2.>点击事件

第一种：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>点击事件</title>
		<script type="text/javascript">
			window.onload = function() {
				var inputobj = document.getElementsByTagName("input");
				inputobj[0].onclick = function() {
					alert("看见我没？")
				}
			}
		</script>
	</head>
	<body>
		<input type="button" value="按钮" />
	</body>
</html>

第二种：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>wangxing</title>
	</head>
	<body>
		<h1>我的第一个 Web 页面</h1>
		<p>我的第一个段落。</p>
		<button onclick="myFunction()">点我</button>
		<script>
			function myFunction() {
				document.write(Date());
			}
		</script>
	</body>
</html>

 <3.>文本框的聚焦/失焦

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>onfocus和onblur</title>
		<script type="text/javascript">
			window.onload = function() {
				//测试文本框的聚焦/失焦
				var testObj1 = document.getElementById("test1");
				//设置聚焦事件
				testObj1.onfocus = function(){
					//清空文本框
					testObj1.value="";
				}
				//设置失焦事件
				testObj1.onblur = function() {
					//清空文本框
					alert(testObj1.value);
				}
			}
		</script>
	</head>
	<body>
		<input id="test1" type="text" value="请输入账号" />
	</body>
</html>

<4.>表单提交事件

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript">
			function testsubmit() {
				alert("表单提交事件!");
				//return true;提交
				return false;//不提交
			}
		</script>
	</head>
	<body>
		<form action="login" method="get" onsubmit="return testsubmit();">
			<input type="text" name="username" /><br>
			<input type="password" name="password" /><br>
			<input type="submit" value="登陆" />
		</form>
	</body>
</html>

 当为true时，可以提交到后端。

当为false时，不可以提交到后端。

<5.>鼠标事件

第一种

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>鼠标进入移开</title>
		<script type="text/javascript">
			window.onload = function() {
				var imgObj = document.getElementById("img1");
				//进入
				imgObj.onmouseover=function(){
					imgObj.width="200";
					imgObj.height="200";
				}
				//移开
				imgObj.onmouseout=function(){
					imgObj.width="100";
					imgObj.height="100";
				}
			}
		</script>
	</head>
	<body>
		<img id="img1" src="img/2048559.jpg" width="100px" height="100px">
	</body>
</html>

第二种：

js文件

function fangda() {
	var imgdomobj = document.getElementById("new1");
	imgdomobj.width = "200";
	imgdomobj.height = "200";
}

function suoxiao() {
	var imgdomobj = document.getElementById("new1");
	imgdomobj.width = "100";
	imgdomobj.height = "100";
}

 html文件：


<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>HTML head 元素中的子元素</title>
		<script src="new1.js"></script>
	</head>
	<body>
		<h4>HTML head 元素中的子元素--script元素【为当前网页中添加javascript脚本程序】</h4>
		<img src="img/微信图片_20210812182844.jpg" id="new1"
		width="100px" height="100px" 
		onmouseover="fangda();" onmouseout="suoxiao();"/>
	</body>
</html>

<6.>键盘事件 

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>键盘事件</title>
		<script type="text/javascript">
			function testkey(event) {
				var code = event.keyCode;
				if (code == 37) {
					alert("向左");
				}
				if (code == 38) {
					alert("向上");
				}
				if (code == 39) {
					alert("向右");
				}
				if (code == 40) {
					alert("向下");
				}
				if (code == 13) {
					alert("暂停");
				}
			}
		</script>
	</head>
	<body onkeydown="testkey(event);">
	</body>
</html>

上键

 下键

左键

 

右键

 

四.创建和删除HTML 元素

1.创建appendChild

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>添加元素</title>
		<style type="text/css">
			#div1 {
				width: 300px;
				height: 300px;
				background-color: cadetblue;
			}
		</style>
		<script type="text/javascript">
			function shao() {
				//document.createElement("元素名称");  --  创建html元素
				//document.createTextNode("文本内容"); --  创建元素的文本内容
				//父元素的dom对象.appendChild(node); --  向父元素中追加元素
				var img1 = document.createElement("img");
				img1.src="img/avatar2.png";
				var divobj=document.getElementById("div1");
				divobj.appendChild(img1);
			}
		</script>
	</head>
	<body>
		<div id="div1">

		</div>
		<input type="button" value="添加元素" onclick="shao()" />
	</body>
</html>

 2.删除removeChild

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>删除元素</title>
		<style type="text/css">
			#div1{
				width: 300px;
				height: 300px;
				background-color: bisque;
			}
		</style>
		<script type="text/javascript">
			function shao(){
				var divobj=document.getElementById("div1");
				var hdom=document.getElementById("p1");
				divobj.removeChild(hdom);
			}
		</script>
	</head>
	<body>
		<div id="div1">
			<h4>我喜欢你</h4>
			<p id="p1">我喜欢你</p>
			<b>我喜欢你</b>
		</div>
		<input type="button"value="删除元素" onclick="shao()"/>
	</body>
</html>

 

WildKingxue
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
关于JavaScript(JS)的基本对象
weixin_44126720的博客
01-17 2158
JS中的对象分为三类：①.内置对象(静态对象)：js本身已经写好的对象，可以直接使用不需要定义。常见的内置对象有Global、Math(它们也是本地对象，根据定义的每个内置对象都是本地对象)。②.本地对象(非静态对象)：必须实例化才能使用其方法和属性的就是本地对象。常见的本地对象有Object、Function、Date、Array、String、Boolean、Number、RegExp、Error等。
前端学习之JavaScript——内置对象
Jane_xxxxxy的博客
08-11 759
1. 内置对象 JavaScript 中的对象分为3种：自定义对象 、内置对象、 浏览器对象 前面两种对象是JS 基础 内容，属于 ECMAScript； 第三个浏览器对象属于我们JS 独有的 内置对象就是指 JS 语言自带的一些对象，这些对象供开发者使用，并提供了一些常用的或是最基本而必要的功能（属性和方法） 内置对象最大的优点就是帮助我们快速开发 JavaScript 提供了多个内置对象：Math、 Date 、Array、String等 2. 查文档 2.1 MDN 学习一个内置对象的使用，只要
前端使用水印的代码实现
weixin_41848005的博客
03-17 1538
第一点 很好实现。我们create一个dom元素，插入到body中就可以了。 const divObj = document.createElement('div'); const styleStr = ` position:fixed; top:0; left:0; bottom:0; right:0;
JavaScript中DOM元素对象
weixin_52629158的博客
05-02 616
通过 HTML DOM，可访问 JavaScript HTML 文档的所有元素。一个窗口下面可以有很多的document对象。通过可编程的对象模型，JavaScript 获得了足够的能力来创建动态的 HTML。appendChild() 方法可向节点的子节点列表的末尾添加新的子节点。document 表示的是一个文档对象，windows 表示一个窗口对象。insertBefore() 方法可在已有的子节点前插入一个新的子节点。childNodes 属性返回包含被选节点的子节点的 NodeList。
JavaScript：DOM对象
最新发布
盒马的博客
12-23 1302
讲解JavaScript中的DOM对象，并介绍其获取，修改方式
JavaScript中的DOM对象
qq_44971635的博客
03-23 2443
文章目录 前言 一、DOM是什么？ 二、获取元素节点的方法 1.获取body和head节点 2.通过ID获取元素节点 3.通过class获取元素节点 4.通过name属性获取元素节点 5.通过标签名获取元素节点 6.通过css选择器获取元素节点 三、操作元素的属性 四、操作元素的样式属性 五、节点操作 六、节点的属性 六、其他 前言 提示：DOM DOM树理解。 一、DOM是什么？ 示例：DOM（document object mod...
JavaScript DOM 对象深入了解
10-21
在深入探讨JavaScript的DOM对象之前，让我们先了解什么是DOM。DOM即文档对象模型（Document Object Model），是W3C组织推出的关于浏览器编程的一套API标准接口。DOM的出现，使得我们可以利用像JavaScript这样的脚本...
javascript DOM对象的学习实例代码
10-29
JavaScript DOM（Document Object Model）对象是用于操作网页...总之，JavaScript DOM对象提供了一种强大的方式来动态地操作和更新网页内容。通过学习和实践DOM对象，开发者可以创建更丰富、交互性更强的Web应用程序。
JAVASCRIPTDOM对象介绍[定义].pdf
10-11
JavaScript DOM对象介绍主要涉及到网页与脚本交互的核心技术，它是一种标准，由W3C国际组织制定，全称为Document Object Model。DOM的本质是提供了一种结构化的表示HTML或XML文档的方式，让开发者可以通过编程接口来...
JavaScript学习手册四：JS对象
qq_45823118的博客
04-18 5332
JS对象引言A、对象的创建任务描述相关知识代码文件B、属性的增删改查任务描述相关知识代码文件C、属性的检测和枚举任务描述相关知识代码文件 引言 1、JavaScript是基于对象的语言，在JavaScript中，一切都可以被称为对象，包括字符串、数字、布尔型、HTML Element等。这些JavaScript中已有的对象称为内置对象，而用户自己定义的对象叫做自定义对象。自定义对象是数据和函数（也叫方法）的集合。 2、这里要特别提醒的是，JavaScript虽然也是一门基于对象的语言，但是它实现对象的
JavaScript对象
weixin_67224308的博客
09-20 370
indexOf("子字符串")方法返回一个整数值,表示string字符串对象内第1次出现子字符串的位置（索引值）。方法从字符串对象中返回单个字符，使用时通常会设置一个起始位置的参数，然后返回位于该位置的字符值。JavaScript把对象定义为:“无序属性的集合，其属性可以包含基本值、对象或者函数。常用的字符串截取函数有 slice()、substr()、substring()。属性是指对象包含的值，使用’对象名,属性名’的方式进行操作。在代码里，使用’对象名.方法名()’来调用该对象的方法。
Javascript学习之对象
m0_53450739的博客
03-31 179
在Javascript中，对象是一个复杂数据类型，是存储了一些基本数据类型的集合。对象就是一些键值对的集合，就像是我们准备一个房子，把我们想要的数据放进去，然后把房子的地址给到变量名，当我们需要某一个数据的时候，就可以根据变量名里面存储的地址找到对应的房子，然后去房子里面找到对应的数据。（1）方式一：字面量方式创建一个对象输出如下：（2）方式二：内置构造函数的方式创建对象。
JavaScript入门——（6）对象
weixin_48719464的博客
10-10 723
对象（object）：JavaScript里的一种数据类型可以理解为是一种无序的数据集合，注意数组是有序的数据集合用来详细的描述某个事物，例如描述一个人。
第三章 ，面向对象程序的开发
weixin_73656040的博客
09-19 462
属性、方法和事件属性属性是指对象包含的值,使用,对象名.属性名,的方式进行操作,如方法在代码里,使用,对象名.方法名()'来调用该对象的方法。事件响应用户操作、完成交互,如OnClick, OnKeyDown一般可以分为鼠标事件、键盘事件及其他事件通常情况下，我们可以通过一下两种方式来访问对象属性。（1）中括号表示法 ，如student【"name"】(2)点号表示法，如student.name。
JavaScript基础之对象
BradenHan的专栏
05-05 446
对象（object）是 JavaScript 语言的核心概念，也是最重要的数据类型。 什么是对象？简单说，对象就是一组“键值对”（key-value）的集合，是一种无序的复合数据集合。
JavaScript - 对象篇
qq_52499703的博客
07-02 374
为了成功地生活，少年人必须学习自立，铲除埋伏各处的障碍，在家庭要教养他，使他具有为人所认可的独立人格
DOM(文档对象模型)
m0_68870440的博客
06-23 1785
DOM(文档对象模型)
【JavaScript速成之路】JavaScript对象
小杨的博客
03-12 1275
JavaScript速成之路9：带你初识JavaScript中的对象，主要向大家介绍JavaScript中对象的相关内容，也就是对象的概念，对象的创建，访问，遍历等操作，以及内置对象这部分相关内容。
初学JavaScript：js中的对象（对象+原型对象）
lalala_dxf的博客
04-03 5483
js中的对象
JavaScript DOM对象编程：事件处理与Window方法详解
在JavaScript DOM对象模型编程的第一讲中，课程主要围绕浏览器文档对象模型(DOM)进行讲解。DOM是JavaScript中用于处理HTML和XML文档的标准API，它将网页文档视为由节点组成的一个树状结构，通过这些对象可以动态地...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值