JavaScript獲取元素的方法

時間 2019-12-10

標籤 javascript 獲取元素方法欄目 JavaScript 简体版

原文原文鏈接

獲取頁面元素的方式javascript

1.經過js的dom方法:可使用內置對象 document 上的 getElementById 方法來獲取頁面上設置了 id 屬性的元素,獲取到的是一個 html 對象,而後將它賦值給一個變量.html

獲取頁面元素那麼必須將獲取元素的代碼塊放置在事件中java

若是把 javascript 寫在元素的上面,就會出錯,由於頁面上從上往下加載執行的,javascript 去頁面上獲取元素 div1 的時候,元素 div1尚未加載,解決方法有兩種：數組

(1)將 javascript 語句放到 window.onload 觸發的函數裏面,獲取元素的語句會在頁面加載完後才執行.瀏覽器

注:屬性的操做包括bash

屬性的讀和寫。dom

操做屬性的方法函數

「.」操做
「[ ]」操做

屬性的寫法學習

一、html 的屬性和 js 裏面屬性寫法同樣

二、「class」 屬性寫成 「className」

三、「style」 屬性裏面的屬性，有橫槓的改爲駝峯式，好比：`font-size`，改爲 `style.fontSize`
複製代碼

經過.操做屬性：ui

經過[ ]操做屬性：

<script type="text/javascript">
	window.onload=function(){
		var div=document.getElementById('div1');
//		alert(div);//輸出結果爲[object HTMLDivElement]
		div.style.width=200+'px';
		div.style.height=200+'px';
		div.style.background='red';
//		div.style.border='5px dashed black';//兩種書寫格式
		div.style.borderWidth=5+'px';
		div.style.borderColor='red';
		div.style.borderStyle='dashed';
//		獲取頁面中div的值(innerHTML與innerTEXT)
		var divContent=div.innerHTML;//獲取頁面元素中的內容(包含元素中的HTML的子元素)
		alert(divContent);//輸出結果爲 Hello JavaScript<p>愛學習</p>
//		var divContent=div.innerText;//獲取頁面中文本內容
//		alert(divContent);
	}
</script>
<body>
		<div id="div1">Hello JavaScript<p>愛學習</p></div>
</body>
複製代碼

(2)：將 javascript 放到頁面最下邊 (寫入body中)

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title></title>		
</head>
	<body>
		<div class="div1"   id="div1">Hello JavaScript<p>愛學習</p></div>
		<script type="text/javascript">
			window.onload=function(){
				var div=document.getElementById('div1');
//				alert(div);  返回的結果爲: [object HTMLDIVElement]
				div.style.width=200+'px';
				div.style.height=200+'px';
				div.style.background='red';
//				div.style.border='10px dashed black';
				div.style.borderColor='black';
				div.style.borderWidth=10+'px';
				div.style.borderStyle='dashed';				
//				獲取頁面中div的值
//				innerHTML: 獲取頁面元素中的內容(包含元素中的html子元素)
				var divContent =div.innerHTML;		
//				innerText:獲取頁面元素中的文本內容
				var divContent=div.innerText;
//				alert(divContent);
//				var divWidth=div.innerWidth;
//				alert(divWidth);
				div.innerHTML='<a href="#">超連接</a>學的不只是技術'
//			}
		</script>
	</body>
</html>
複製代碼

2.經過getElementsByclassName()根據元素的class獲取元素由於getElementsByClassName()獲取到的結果是一個集合,要想獲取單個的元素使用索引的方式獲取

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript">
			window.onload=function(){
//				如下是根據索引獲取頁面中第二個div
				var div=document.getElementsByClassName('div1')[1];
//				alert(div);
				div.style.width=200+'px';
				div.style.height=200+'px';
				div.style.background='red';	
			}
		</script>
	</head>
	<body>
		<div class="div1"></div>
		<div class="div1"></div>
	</body>
</html>
複製代碼

3.經過getElementsByTagname():根據元素標籤名稱獲取元素(返回集合對象數組,能夠經過*方式獲取頁面上全部的元素)

<body>
<div id="div1">好好學習每天向上<p>請認真聽講</p></div>
<div id="div1">好好學習每天向上<p>請認真聽講</p></div>
<div id="div1">好好學習每天向上<p>請認真聽講</p></div>
<script type="text/javascript">
   var div=document.getElementsByTagName('*').innerHTML;
   alert(div1);
</script>
</body>
複製代碼

innerHTML和innerText的區別:

共同點：innerHTML和innerText都會把元素內內容替換掉。

不一樣點：