JavaScript基础8

最新推荐文章于 2024-10-23 12:21:01 发布

折翼天使【*-*】

最新推荐文章于 2024-10-23 12:21:01 发布

阅读量231

点赞数

文章标签： javascript

本文链接：https://blog.csdn.net/weixin_52188375/article/details/109896636

版权

本文介绍了JavaScript中的DOM对象及其功能，包括如何查找HTML元素、改变元素的内容和属性，以及调整CSS样式。重点讲解了getElementById、getElementsByTagName、getElementsByClassName等方法，以及innerHTML、innerText属性和修改HTML属性的方法。此外，还阐述了如何用JavaScript控制CSS样式。

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

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

3.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.3. getElementsByClassName(class属性值)通过类名找到 HTML 元素

例如:

 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";
			 }
		  }

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

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

例如:

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;
				//注意:innerHTML中设置的字符串内容中有html标记，那么这个被包含的html标记会被解释运行。
			}

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

例如:

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标记会被作为字符串输出。
			}

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

属性在html和css中都有。

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

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

例如:

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

5.2. css中的属性----是用来改变html元素的样式。

1.在html开始元素中通过style属性

例如:

style---是html属性

width:100px;height:100px----css属性

2.在<style>元素中和“.css”文件中

选择器{

css中的属性

}

5.3. 控制 HTML 属性的格式:

1.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>

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

6.1. 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>