javaScript_8 11-21

最新推荐文章于 2024-07-30 22:36:34 发布

weixin_44907496

最新推荐文章于 2024-07-30 22:36:34 发布

阅读量77

点赞数

文章标签： javascript

本文链接：https://blog.csdn.net/weixin_44907496/article/details/109897016

版权

JavaScript_8

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

2.DOM可以完成的功能

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

3. 查找 HTML 元素

为了做到这件事情，您必须首先找到该元素。有三种方法来做这件事：
3.1. getElementById(id属性值);通过 id 查找 HTML 元素
例如:

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>通过id查找HTML元素</title>
	<script>
		//getElementById(id属性值);通过id查找HTML元素
		function testById(){
			var p1=document.getElementById("p1");
			//alert(p1);
			p1.style.fontSize="30px";
		    p1.style.color="red";
		    p2.style.color="blue";
		    var p3=document.getElementById("p3");
		    //当id属性值相同时,只能得到第一个元素
		    p3.style.fontSize="30px";
		    ps.style.color="green";
		}
	</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>

在这里插入图片描述
3.2. getElementsByTagName(标签名)通过标签名查找 HTML 元素
例如:

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

在这里插入图片描述
3.3. getElementsByClassName(class属性值)通过类名找到 HTML 元素
例如:

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>通过类名找到HTML元素</title>
	<script>
		function testByClassName(){
			var p1=document.getElementsByClassName("p1");
			for(var i=0;i<p1.length;i++){
				p1[i].style.color="red";
			}
			var h=document.getElementsByClassName("h");
			for(i=0;i<h.length;i++){
				h[i].style.color="green";
			}
		}
		
	</script>
</head>
<body>
	<p class="p1">getElementsByClassName(class属性值)</p>
	<p class="p1">通过标签名查找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>
	<input type="button" value="getElementsByClassName(class属性值)" onclick="testByClassName()">
</body>
</html>

在这里插入图片描述
4.JavaScript 能够改变页面中的所有 HTML 元素[元素的文本内容]
innerHTML 属性–改变页面中HTML 元素的文本内容
例如:

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>innerHTML属性---改变页面中HTML元素的文本内容</title>
	<script>
		function testinnerHTML(){
			var text1=document.getElementById("text1");
			var h1=document.getElementsByTagName("h1")[0];
			h1.innerHTML=text1.value;
		}
		function testinnerText(){
			var text1=document.getElementById("text1");
			var h1=document.getElementsByTagName("h1")[0];
			h1.innerText=text1.value;
		}
	</script>
</head>
<body>
	<h1>改变页面中HTML元素的文本内容</h1>
	<input  type="text" id="text1"><br>
	<input type="button" value="testinnerHTML" onclick="testinnerHTML();"><br>
	<input type="button" value="testinnerText" onclick="testinnerText();">
</body>
</html>

在这里插入图片描述

注意:innerText中设置的字符串内容中有html标记，那么这个被包含的html标记会被作为字符串输出。
5.JavaScript 能够改变页面中的所有 HTML 属性
属性在html和css中都有。
Html中的属性—是给浏览器解释运行html标记时通过附加信息。
往往出现在html的开始标记中，如果有多个中间使用空格分离。
例如:
< img >< /img>–< img />
< img src=”” width=”” height=”” />
src=”” width=”” height=””----Html标记中的属性
css中的属性----是用来改变html元素的样式。

在html开始元素中通过style属性
例如:
< div style=”width:100px;height:100px”>< /div >
style—是html属性
width:100px;height:100px----css属性
在< style>元素中和“.css”文件中
选择器{
css中的属性
}
控制 HTML 属性的格式:
dom对象.具体的html属性名称=属性名称对应的属性值；
例如:

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>控制HTML属性的格式</title>
	<script>
		function testattribute(){
			var imgdoc=document.getElementsByTagName("img")[0];
		imgdoc.src="imgs/12.jpg";
		}

	</script>
</head>
<body>
	<img src="imgs/11.jpg" />
		<input type="button" value="控制HTML属性" onclick="testattribute();">
</body>
</html>

在这里插入图片描述
6.JavaScript 能够改变页面中的所有 CSS 样式
dom对象.style.具体的css属性名称=属性名称对应的属性值；
例如：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>javascript能够改变页面中的所有css样式</title>
	<script>
		function testCss(){
			var imgdoc=document.getElementsByTagName("img")[0];
			var button=document.getElementById("but1");
			var  hdoc=document.getElementsByTagName("h1")[0];
			var butttext=button.value;
			if(butttext=="隐藏"){
				button.value="显示";
				imgdoc.style.display="none";
			}
			if(butttext=="显示"){
				button.value="隐藏";
				imgdoc.style.display="block";
			}
		}
	</script>
</head>
<body>
	<h1>hello <a href="#">test</a></h1>
	<img src="imgs/11.jpg" alt="">
	<input id="but1" type="button" value="隐藏" onclick="testCss();">
</body>
</html>

在这里插入图片描述

weixin_44907496

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
javaScript_8 11-21

JavaScript_81.DOM对象DOM–Document Object Model[文档对象模型]当网页被加载时，浏览器会创建页面的文档对象模型。HTML DOM 模型被构造为对象的树Html文件<html><head><title>My title</title></head><body><a href=””>My link</a><h1>My header</
复制链接

扫一扫