JavaScript基礎8

nana478發表於2020-11-21
JavaScript

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的開始標記中，如果有多箇中間使用空格分離。

例如:

          <img ></img>--<img />

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

           src=”” width=”” height=””----Html標記中的屬性

     5.2. css中的屬性----是用來改變html元素的樣式。

          1.在html開始元素中通過style屬性

 例如:

                <div style=”width:100px;height:100px”></div>

                  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>

 

 

 

 

 

 

 

 

相關文章