JavaScript基础_8(DOM对象1)

最新推荐文章于 2022-10-13 10:59:24 发布
最新推荐文章于 2022-10-13 10:59:24 发布
阅读量86 收藏
点赞数
分类专栏： javascript基础 文章标签： javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44906261/article/details/109897398
版权

DOM对象

1、DOM对象

（1）DOM–Document Object Model[文档对象模型]
（2）当网页被加载时，浏览器会创建页面的文档对象模型。
（3）HTML DOM 模型被构造为对象的树，如下图所示：
在这里插入图片描述

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

2、 DOM可以完成的功能

（1）JavaScript 能够改变页面中的所有 HTML 元素
（2）JavaScript 能够改变页面中的所有 HTML 属性
（3）JavaScript 能够改变页面中的所有 CSS 样式
（4）JavaScript 能够对页面中的所有事件做出反应

3、查找 HTML 元素

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

  • 注意;
    当id属性值相同时,只能得到第一个元素

    	<!DOCTYPE html>
	<html>
		<head>
			<meta charset="utf-8">
			<title></title>
			<script>
				//getElementById(id属性值);通过 id 查找 HTML 元素
				function testByID(){
					var p1=document.getElementById("p1");
					//p1--[object HTMLParagraphElement];  DOM对象
					p1.style.fontSize="50px";
					var p2=document.getElementById("p2");
					//p2--[object HTMLParagraphElement] DOM对象
					p2.style.color="red";
					//当id属性值相同时,只能得到第一个元素
					var p3=document.getElementById("p3");
					//p3---[object HTMLParagraphElement] DOM对象
					p3.style.fontSize="50px";
					p3.style.color="red";
				}
			</script>
		</head>
		<body>
			<p id="p1">p元素测试getElementById(id属性值)</p>
			<p id="p2">p元素测试getElementById(id属性值)</p>
			<p id="p3">p元素测试getElementById(id属性值)</p>
			<p id="p3">p元素测试getElementById(id属性值)</p>
			<input type="button" value="测试getElementById(id属性值)" 
			onclick="testByID();">
		</body>
	</html>

在这里插入图片描述

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

  • 注意;
    当元素在html文件中只有一个的时候，通过getElementsByTagName方法得到的结果依然是数组

    	<!DOCTYPE html>
	<html>
		<head>
			<meta charset="utf-8">
			<title></title>
			<script>   
					   //getElementsByTagName(标签名)通过标签名查找 HTML 元素
					   function testByTagName(){
						   var p=document.getElementsByTagName("p");
						   var size=10;
						   for(var i=0;i<p.length;i++){
								var fonts=size*i+size;
								p[i].style.fontSize=fonts+"px";
								p[i].style.color="red";
						   }
					   }
			</script>
		</head>
		<body>
			<p>getElementsByTagName(标签名)通过标签名查找 HTML 元素</p>
			<p>getElementsByTagName(标签名)通过标签名查找 HTML 元素</p>
			<p>getElementsByTagName(标签名)通过标签名查找 HTML 元素</p>
			<p>getElementsByTagName(标签名)通过标签名查找 HTML 元素</p>
			<p>getElementsByTagName(标签名)通过标签名查找 HTML 元素</p>
			<input type="button" value="测试getElementsByTagName(标签名)" onclick="testByTagName()">
		</body>
	</html>

在这里插入图片描述

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

	<!DOCTYPE html>
	<html>
		<head>
			<meta charset="utf-8">
			<title></title>
			<script type="text/javascript">
				function testByClassName(){
							 var p1= document.getElementsByClassName("p1");
							 //alert(p1); //[object HTMLCollection]
							 for(var i=0;i<p1.length;i++){
								 p1[i].style.color="red";
							 }
							 var h= document.getElementsByClassName("h");
							 //alert(h); //[object HTMLCollection]
							 for(var i=0;i<h.length;i++){
							 	h[i].style.color="blue";
							 }
						  }
			</script>
		</head>
		<body>
			<p class="p1">getElementsByClassName(class属性值)通过标签名查找 HTML 元素</p>
			<p class="p1">getElementsByClassName(class属性值)通过标签名查找 HTML 元素</p>
			<p class="p1">getElementsByClassName(class属性值)通过标签名查找 HTML 元素</p>
			
			<h2 class="h">getElementsByClassName(class属性值)通过标签名查找 HTML 元素</h2>
			<h2 class="h">getElementsByClassName(class属性值)通过标签名查找 HTML 元素</h2>
			<h2 class="h">getElementsByClassName(class属性值)通过标签名查找 HTML 元素</h2>
			
			<input type="button" value="getElementsByClassName" onclick="testByClassName()" />
		</body>
	</html>

在这里插入图片描述

4、JavaScript 能够改变页面中的所有 HTML 元素[元素的文本内容]

（1）innerHTML 属性–改变页面中HTML 元素的文本内容

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

    <!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script>
			function  testinnerHTML(){
				var text1=document.getElementById("text1");
				var h1=document.getElementsByTagName("h1")[0];
				//h1--[object HTMLHeadingElement]  Dom对象
				var textvalue=text1.value;
				h1.innerHTML=textvalue;
				//h1.innerHTML=text1.value;
				//h1.innerHTML=document.getElementById("text1").value;
			}
		</script>
	</head>
	<body>
		<h1>innerHTML测试</h1>
		<input type="text" id="text1" />
		<input type="button" value="innerHTML测试" onclick="testinnerHTML()" />
	</body>
</html>

在这里插入图片描述

（2）innerText 属性–改变页面中HTML 元素的文本内容

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

    <!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script>
			function  testinnerText(){
				var text1=document.getElementById("text1");
				var h1=document.getElementsByTagName("h1")[0];
				//h1--[object HTMLHeadingElement]  Dom对象
				var textvalue=text1.value;
				h1.innerText=textvalue;
				//注意:innerText中设置的字符串内容中有html标记，那么这个被包含的html标记会被作为字符串输出。
			}
		</script>
	</head>
	<body>
		<h1>欢迎使用Javascript</h1>
		<input id="text1" type="text" ><br>
		<input type="button" value="innerText 属性" onclick="testinnerText();">
	</body>
</html>

在这里插入图片描述

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

  • 控制 HTML 属性的格式:
    dom对象.具体的html属性名称=属性名称对应的属性值
    例如：

    <!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script>
			function testattribute(){
				//dom对象.具体的html属性名称=属性名称对应的属性值；
				var imgdoc=document.getElementsByTagName("img")[0];
				//alert(imgdoc); [object HTMLImageElement]
				imgdoc.src="imgs/avatar2.png";
				//imgdoc---dom对象
				//src--具体的html属性名称
				//"imgs/avatar2.png"---属性名称对应的属性值;
			}
		</script>
	</head>
	<body>
		<img src="imgs/avatar.png" />
		<input type="button" value="控制html属性" onclick="testattribute();">
	</body>
</html>

在这里插入图片描述

  •     属性在html和css中都有。
    （1）Html中的属性—是给浏览器解释运行html标记时通过附加信息。往往出现在html的开始标记中，如果有多个中间使用空格分离。
    例如:

    	<img ></img>--<img />
	<img src=”” width=”” height=”” />

    src=”” width=”” height=””----Html标记中的属性

     （2）css中的属性----是用来改变html元素的样式。

               (2)-1、在html开始元素中通过style属性
               例如:

		<div style=”width:100px;height:100px”></div>
		style---是html属性
		width:100px;height:100px----css属性

               (2)-2、在style元素中和“.css”文件中

			选择器{
			     css中的属性 
			}

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

  • 格式：
    dom对象.style.具体的css属性名称=属性名称对应的属性值；

    <!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script>
			function  testCss(){
				//dom对象.style.具体的css属性名称=属性名称对应的属性值；
				var imgdoc=document.getElementsByTagName("img")[0];
				var button=document.getElementById("but1");
				var hdoc=document.getElementsByTagName("h1")[0];
				//alert(hdoc.innerText);
				//alert(hdoc.innerHTML);
				var buttext=button.value;
				//alert(buttext);
				if(buttext=="隐藏"){
					button.value="显示";
					imgdoc.style.display="none";
				}
				if(buttext=="显示"){
					button.value="隐藏";
					imgdoc.style.display="block";
				}
			}
		</script>
	</head>
	<body>
		<h1>hello<a href="#">test</a></h1>
		<img src="imgs/avatar.png" />
		<input id="but1" type="button" value="隐藏" onclick="testCss();">
	</body>
</html>

在这里插入图片描述
在这里插入图片描述

进击的菜鸟@
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
DOM.zip_JavaScript dom_it
09-24
总的来说，理解并熟练掌握JavaScript DOM对于JavaScript开发者来说至关重要，因为它是实现动态网页和富互联网应用的基础。通过“DOM.chm”这份资源，你可以深入学习DOM的各个方面，提高你的前端开发技能。
JavaScript基础知识点总结、八
weixin_52192654的博客
11-21 153
JavaScript基础知识点总结、八 一、DOM对象 DOM--Document Object Model[文档对象模型] 当网页被加载时，浏览器会创建页面的文档对象模型。 HTML DOM模型被构造为对象的树 Html文件 <html> <head> <title>My title</title> </head> <body> <a href=””...
JavaScript入门--08
sinat_50855580的博客
11-21 123
JavaScript_8 1.DOM对象 DOM–Document Object Model[文档对象模型] 当网页被加载时，浏览器会创建页面的文档对象模型。 HTML DOM 模型被构造为对象的树 2.DOM可以完成的功能 1.JavaScript 能够改变页面中的所有 HTML 元素 2.JavaScript 能够改变页面中的所有 HTML 属性 3.JavaScript 能够改变页面中的所有 CSS 样式 4.JavaScript 能够对页面中的所有事件做出反应 3. 查找 HTML 元素 为了
JavaScript DOM操作
打工人 打工魂
09-07 188
认识DOM 文档对象模型 Document Object Model，定义访问和处理HTML文档的标准方法。 DOM将HTML文档呈现为带有元素、属性和文本的树结构。 HTML文档可以说是由节点构成的集合，三种常见的DOM节点: 1. 元素节点：<html>、<body>、<p>等都是元素节点，即标签。 2. 文本节点:向用户展示的内容，如<li>...</li>中的JavaScript、DOM、CSS等文本。 3. 属性节点:元素属性
JavaScript高级（3）
zxcWh的博客
10-11 187
DOM--Document Object Model[文档对象模型] 当网页被加载时，浏览器会创建页面的文档对象模型。 html文件 <html> <head> <title>My title</title> </head> <body> <a href=””>My link</a> <h1>My header</h1> </body> </html> H
前端基础之《JavaScript（6）—JS DOM对象》
最新发布
csj50的专栏
10-13 568
document.documentElement //html标签。obj.textContent //获取元素标签内的text内容。obj.innerHTML //获取元素标签内的html内容。obj.outerHTML //获取元素标签外的html内容。obj.tagName //获取元素对象的标签名。document //文档流。一、已经用过的js dom对象。二、获取元素对象方法。三、元素对象常用属性。因为点不包含很多属性。
javascript学习基础笔记之DOM对象操作
01-19
这个API允许开发者通过编程的方式访问和修改页面的结构、内容和样式。DOM是一个与语言无关的标准，意味着它不仅仅适用于JavaScript，任何支持DOM的编程...因此，深入学习DOM对象和操作是每个前端开发者必备的技能之一。
JavaScript基础语法、dom操作树及document对象
10-25
### JavaScript基础语法 1. **数据类型**：JavaScript中的基本数据类型包括字符串（String）、数字（Number，其中包含小数和整数）、布尔值（Boolean）、以及特殊的对象类型，比如日期（Date）。 2. **变量**：...
JavaScript DOM 对象深入了解
10-21
在深入探讨JavaScript的DOM对象之前，让我们先了解什么是DOM。DOM即文档对象模型（Document Object Model），是W3C组织推出的关于浏览器编程的一套API标准接口。DOM的出现，使得我们可以利用像JavaScript这样的脚本...
javascript简要理解DOM；js动态获取屏幕尺寸然后设置元素高度
奔跑的菜鸡
02-29 1215
DOM 是Document Object Model( 文档对象模型 )的缩写。 DOM是把html里面的各种数据当作对象进行操作的一种思路。 比如一个超链，作为一个DOM对象，就可以使其隐藏，修改其href指向的地址。 节点概念 DOM把所有的html都转换为节点 整个文档 是一个节点 元素 是节点 元素属性 是节点 元素内容 是节点 注释 也是节点 如本例 通过document.getElem...
《前端》疑难杂症--控制台打印出Object HTML***Element-看不出什么结果--2020年7月15日
BelleDiao的博客
07-15 3561
Object HTMLDivElement、object HTMLInputElement等 说明打印的参数是集合， 解决办法有： 1、获取值的时候需要先使用数组下标的格式，再通过value属性获取用户输入的信息 ，如下： console.log("First Name : " + n_fname[0].value); 2、或者如果不是数组，尝试一下打印innerHTML: console.log("option"+o.innerHTML) 3、如果是字符串 ...
html object上层加div,JS详解[Object HTMLDivElement]和[Object Object]
weixin_35664081的博客
06-10 1144
【JS】☆★之详解[Object HTMLDivElement]和[Object Object]htmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">无标题文档$(function(){vartemp=$(".one");/...
JavaScript基础（三）
weixin_43958460的博客
07-03 145
JavaScript对DOM的操作关于DOM获取文档节点通过ID获取元素节点通过标签名称获取元素节点通过类名获取元素节点通过表单元素的name获取元素节点获取属性节点获取子节点DOM节点的属性 关于DOM DOM 是Document Object Model( 文档对象模型 )的缩写。 DOM是把html里面的各种数据当作对象进行操作的一种思路。 比如一个超链，作为一个DOM对象，就可以使其隐藏...
HTML元素（标签）在TS中的类型表示
Ama_Lee的博客
04-02 7655
HTML元素（标签）在TS中的类型表示 在node_modules/typescript/lib/lib.dom.d.ts 中定义了有关DOM元素的接口，是可以直接使用的 在我们定义类型时输入HTML也会有相关的提示： 具体类型如下： 一般均为HTMLElement，特殊的为HTML+标签名+Element ，当然也有些标签名为单字母的例如h1-h6，他们的类型为HTMLHeadingElement。 "a": HTMLAnchorElement; "abbr": HTMLElement;
JavaScript_8(DOM对象)
weixin_45872868的博客
11-22 197
1.DOM对象 DOM–Document Object Model[文档对象模型] 当网页被加载时，浏览器会创建页面的文档对象模型。 HTML DOM 模型被构造为对象的树 Html文件 <html> <head> <title>My title</title> </head> <body> <a href=””>My link</a> <h1>My header</h1> <
javascript DOM学习
毕业势必进大厂的博客
09-23 188
通过ID获取元素 语法：document.getElementById(“id”) 结果:null或[object HTMLParagraphElement] 获取的元素是一个对象，如想对元素进行操作，我们要通过它的属性或方法。 例： <!DOCTYPE HTML> <html> <head> <meta http-equiv="Conten...
JavaScript笔记
weixin_58678214的博客
10-18 781
第一章：JavaScript 什么是JavaScript JavaScript是一种基于对象和事件驱动的、跨平台的、并具有安全性能的脚本语言 JavaScript特点 向HTML页面中添加交互行为 脚本语言，语法和Java类似 解释性语言，边执行边解释 JavaScript的基本结构 语法： <script type="text/javascript"> <!— JavaScript 语句; —&g...
关于网页显示[object HTML标签名Element]的问题
qq_44960253的博客
06-21 3675
关于网页显示[object HTML标签名Element]的问题 今天学习在 JS红宝书上的 10.1.8 节关于 DocumentFragment 类型时，按照实例，大致上敲了一遍代码想要看看效果。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initia
Jquery基础
zxcWh的博客
10-15 128
Jquery基础 您需要具备的基础知识 在您开始学习 jQuery 之前，您应该对以下知识有基本的了解： HTML CSS JavaScript jQuery简介 1.什么是 jQuery ？ jQuery是一个轻量级的"写的少，做的多"的JavaScript函数库。[独立的javascript文件] jQuery库包含以下功能： 1.HTML元素选取 2.HTML元素操作 3.CSS 操作 4.HTML 事件函数 5.JavaScript 特效和动画[元素的隐藏和显示] .
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值