JavaScript基础知识点总结、八

最新推荐文章于 2023-10-24 22:05:07 发布

画_船_听_雨

最新推荐文章于 2023-10-24 22:05:07 发布

阅读量146

点赞数

分类专栏：入门文章标签： javascript

本文链接：https://blog.csdn.net/weixin_52192654/article/details/109895898

版权

JavaScript基础知识点总结、八

一、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>
   </body>
</html>

1.DOM可以完成的功能

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

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

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

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

2. 查找 HTML 元素

为了做到这件事情，您必须首先找到该元素。有三种方法来做这件事：

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

例如:

<!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>

最低0.47元/天解锁文章

画_船_听_雨

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaScript基础知识点总结、八

JavaScript基础知识点总结、八一、DOM对象DOM--Document Object Model[文档对象模型]当网页被加载时，浏览器会创建页面的文档对象模型。HTML DOM模型被构造为对象的树Html文件<html> <head> <title>My title</title> </head> <body> <a href=””...
复制链接

扫一扫