JS基礎-DOM Document對象

時間 2019-12-10

原文原文鏈接

DOM 節點

節點(Node)	釋義	對象
文檔節點	整個文檔	Document 對象
元素節點	每一個HTML元素	Eelement 對象
文本節點	HTML元素內的文本	Text 對象
屬性節點	每一個HTML的屬性	Attribute 對象
註釋節點	文檔的註釋內容	Comment 對象

Attributes屬性節點

屬性	釋義
nodeType	節點類型
nodeValue	節點值
nodeName	節點名稱
innerHTML	節點(元素)的文本值

導航屬性

屬性	釋義
parentNode	節點(元素)的父節點
firstChild	節點下第一個子元素
lastChild	節點下最後一個子元素
childNodes	節點(元素)的子節點

Document 對象方法

方法	描述
open()	打開一個流，以收集來自任何 document.write() 或 document.writeln() 方法的輸出。
close()	關閉用 document.open() 方法打開的輸出流，並顯示選定的數據。
write()	向文檔寫 HTML 表達式或 JavaScript 代碼。
writeln()	等同於 write() 方法，不一樣的是在每一個表達式以後寫一個換行符。
getElementById()	獲取指定 Id 的對象的引用。
getElementsByName()	返回帶有指定名稱的對象集合。
getElementsByTagName()	返回帶有指定標籤名的對象集合。
getElementsByClassName()	獲取指定 Class 的對象的引用。

document.getElementByID()

獲取指定 Id 的對象的引用html

<p id="p1">this is p1</p>

<script>
	var ele=document.getElementById("p1");		//獲取全部指定類名的元素
	console.log(ele.nodeName);					//節點名稱
	console.log(ele.nodeType);					//節點類型
	console.log(ele.nodeValue);					//節點值
	console.log(ele.innerHTML);					//節點文本信息
</script>

P
1
null
this is p1

document.getElementsByClassName()

獲取指定 Class 的對象的引用node

節點屬性

<p class="p1">this is p1</p>

<script>
	var ele=document.getElementsByClassName("p1")[0];	//獲取全部指定類名的第一個元素
	console.log(ele.nodeName);							//節點名稱
	console.log(ele.nodeType);							//節點類型
	console.log(ele.nodeValue);							//節點值
	console.log(ele.innerHTML);							//節點文本信息
</script>

P
1
null
this is p1

導航屬性

<div class="div1">
	<p class="p1"></p><p class="p2">this is <span>p2</span></br></p><p class="p3"></p>
</div>

<script>
	var ele=document.getElementsByClassName("p2")[0];	//獲取全部指定類名的第一個元素
	console.log(ele.parentNode);						//節點元素的父節點
	console.log(ele.children);							//全部子標籤
	console.log(ele.firstChild);						//文檔的首個子節點
	console.log(ele.firstElementChild);					//節點下第一個子元素
	console.log(ele.lastElementChild);					//節點下最後一個子元素
	console.log(ele.childNodes);						//節點(元素)的子節點
	console.log(ele.nextSibling);						//返回指定節點以後緊跟的節點
	console.log(ele.nextElementSibling);				//下一個兄弟標籤元素
	console.log(ele.previousElementSibling);			//上一個兄弟標籤元素
</script>

<div class="div1">…</div>
HTMLCollection(2) [span, br]
"this is "
<span>p2</span>
<br>
NodeList(3) [text, span, br]
<p class="p3"></p>
<p class="p3"></p>
<p class="p1"></p>

綁定事件

綁定事件的兩種不一樣格式，【this】特指標籤自己屬性this

<!DOCTYPE html>
<html>
<head></head>
<body>

<p onclick="func(this)">This is function 1</p>
<div>This is function 2</div>

<script>
	//方法一：
	function func(self){
		//顯示當前標籤
		alert('打印標籤自己屬性：' + self);
	}	

	//方法二：
	var ele=document.getElementsByTagName("div")[0];
	ele.onclick=function(){
		//顯示當前標籤
		alert('打印標籤自己屬性：' + this);
	}
</script>

</body>
</html>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。