JavaScript高级（3）

山i

于 2021-10-11 19:45:00 发布

阅读量185

点赞数

分类专栏： JavaScript 文章标签： javascript node.js html

本文链接：https://blog.csdn.net/zxcWh/article/details/120678928

版权

本文介绍了JavaScript如何操作DOM，包括通过id、标签名和类名查找元素，使用innerHTML和innerText改变元素内容，修改HTML属性，调整CSS样式，响应各种事件，以及创建和删除HTML元素的方法。

摘要由CSDN通过智能技术生成

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 DOM 模型被构造为对象的树

1.DOM可以完成的功能

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

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

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

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

2. 查找 HTML 元素

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

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

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

例如：

<script>   
		   //getElementsByTagName(标签名)通过标签名查找 HTML 元素
		   function testByTagName(){
			   /*
				var p=document.getElementsByTagName("p");
				//p---[object HTMLCollection] DOM对象的集合---数组
				//typeof p---object 数组也是对象所以typeof p值才会是object
				//p[5]---[object HTMLParagraphElement]  DOM对象
				var size=5;
				for(var i=0;i<p.length;i++){
					var fonts=size*i+size;
					p[i].style.fontSize=fonts+"px";
				}
				*/
			    //当元素在html文件中只有一个的时候，
				//通过getElementsByTagName方法得到的结果依然是数组
				var h2=document.getElementsByTagName("h2");
				//alert(h2); [object HTMLCollection] DOM对象的集合---数组
				if(h2.length==1){
					h2[0].style.color="blue";
				}
		   }
		</script>

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

例如:

function testByClassName(){

最低0.47元/天解锁文章

山i

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaScript高级（3）

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
复制链接

扫一扫

专栏目录