DOM類型

Node類型

Node接口是DOM1級就定義了，Node接口定義了12個數值常量以表示每個節點的類型值。除了IE之外，所有瀏覽器都可以訪問這個類型。以下是常用的Node常量。

<script type="text/javascript">
	//IE不支持，我們可以模擬一個類，讓IE也支持。
	if (typeof Node == 'undefined') {
		window.Node = {
			ELEMENT_NODE:1,
			ATTRIBUTE_NODE:2,
			TEXT_NODE:3,
			COMMENT_NODE:8,
			DOCUMENT_NODE:9,
			DOCUMENT_TYPE_NODE:10
		};
	}
	console.log(Node.ELEMENT_NODE);//1
	console.log(Node.ATTRIBUTE_NODE);//2
	console.log(Node.TEXT_NODE);//3
	console.log(Node.COMMENT_NODE);//8
	console.log(Node.DOCUMENT_NODE);//9
	console.log(Node.DOCUMENT_TYPE_NODE);//10
</script>

Document類型

Document類型表示文檔，或文檔的根節點，而這個節點是隱藏的，沒有具體的元素標籤

//元素
document.documentElement;//html
document.body;//body
document.doctype;//<!DOCTYPE>，ie8之前會返回null
//屬性
document.title;//獲取和設置<title>標籤的值
document.URL;//獲取URL路徑
document.domain;//獲取域名，服務器端
document.referrer;//獲取上一個URL，服務器端

//對象集合
document.anchors;//獲取文檔中帶name屬性的<a>元素集合
document.links;//獲取文檔中帶href屬性的<a>元素集合
document.applets;//獲取文檔中<applet>元素集合，已不用
document.forms;//獲取文檔中<form>元素集合
document.images;//獲取文檔中<img>元素集合

Text類型

Text類型用於表現文本節點類型，文本不包含HTML，或包含轉義後的HTML。文本節點的nodeType爲3

<script type="text/javascript">
	var box = document.createElement('div');
	var text = document.createTextNode('Mr.');
	var text2 = document.createTextNode('Lee!');
	box.appendChild(text);
	box.appendChild(text2);
	document.body.appendChild(box);
	console.log(box.childNodes.length);
	//2，在同時創建兩個同一級別的文本節點的時候，會產生分離的兩個節點,其實是換行了
	
	box.normalize();//合併成一個節點，其實是把換行去掉了

	box.firstChild.splitText(3);//有合併就有分離，以三個字符爲距離進行換行

	//除了上面的兩種方法外，Text還提供了一些別的DOM操作的方法如下：
	box.firstChild.deleteData(0,2);	//刪除從0位置的2個字符
	box.firstChild.insertData(0,'Hello.');//從0位置添加指定字符
	box.firstChild.replaceData(0,2,'Miss');//從0位置用Miss替換掉2個指定字符,如果第二個參數是0，則是添加Miss
	box.firstChild.substringData(0,2);//從0位置獲取2個字符，直接輸出
	console.log(box.firstChild.nodeValue);//Missllo..,輸出結果
</script>

Comment類型

Comment類型表示文檔中的註釋。nodeType是8，nodeName是#comment，nodeValue是註釋的內容。

<script type="text/javascript">
	console.log(document.body.firstChild.nodeType);//8
	console.log(document.body.firstChild.nodeValue);//this is comment

	//在IE中，註釋節點可以使用！當作元素來訪問。
	//var comment = document.getElementsByTagName('!');
</script>

DOM擴展

呈現模式

從IE6開始開始區分標準模式和混雜模式(怪異模式)，主要是看文檔的聲明。IE爲document對象添加了一個名爲compatMode屬性，這個屬性可以識別IE瀏覽器的文檔處於什麼模式如果是標準模式，則返回CSS1Compat，如果是混雜模式則返回BackCompat。

<script type="text/javascript">
	if (document.compatMode == 'CSS1Compat') {
		console.log(document.documentElement.clientWidth);
	} else {
		console.log(document.body.clientWidth);
	}
</script>

後來Firefox、Opera和Chrome都實現了這個屬性。從IE8後，又引入documentMode新屬性，因爲IE8有3種呈現模式分別爲標準模式8，仿真模式7，混雜模式5。所以如果想測試IE8的標準模式，就判斷document.documentMode > 7 即可。

滾動

scrollIntoView(alignWithTop) 函數用來滾動瀏覽器窗口或容器元素，以便在當前視窗的可見範圍看見當前元素。如果alignWithTop爲true，或者省略它，窗口會儘可能滾動到自身頂部與元素頂部平齊

<!DOCTYPE html>
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<a onClick="onc()" hef="#">click here</a>
	<div style="height:400px; background-color:blue"></div>
	<div id="nn" style="background-color: red;height:900px;"></div>
</body>
<script type="text/javascript">
	//作爲一個事件的函數來被調用
	function onc () {
		var dd = document.getElementById("nn").scrollIntoView(true);//這個意思其實就是將這個元素滾動到瀏覽器窗口的頂部來顯示
	}
</script>
</html>

children屬性

由於子節點空白問題，IE和其他瀏覽器解釋不一致。雖然可以過濾掉，但如果只是想得到有效子節點，可以使用children屬性，幾乎所有瀏覽器都支持。

<!DOCTYPE html>
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<div id="div">
		<span>hello1</span>
		<span>hello2</span>
		<span>hello3</span>
	</div>
</body>
<script type="text/javascript">
	console.log(document.getElementById("div").children.length);//3
	console.log(document.getElementById("div").children[0].innerHTML);//hello1
</script>
</html>

contains()方法

判斷一個節點是不是另一個節點的後代，我們可以使用contains()方法。這個方法是IE率先使用的，開發人員無須遍歷即可獲取此信息

<script type="text/javascript">
	var div = document.getElementById("div")
	console.log(div.contains(div.firstChild));//true
</script>

早期的Firefox不支持這個方法，新版的支持了，其他瀏覽器也都支持，Safari2.x瀏覽器支持的有問題，無法使用。所以，必須做兼容

在Firefox的DOM3級實現中提供了一個替代的方法compareDocumentPosition()方法。這個方法確定兩個節點之間的關係。

<script type="text/javascript">
	var div = document.getElementById("div")
	console.log(div.compareDocumentPosition(div.firstChild));//20
</script>

DOM操作內容

innerText屬性

<!DOCTYPE html>
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<div id="div">
		<span>hello1</span>
		<span>hello2</span>
		<span>hello3</span>
	</div>
</body>
<script type="text/javascript">
	var div = document.getElementById("div")
	console.log(div.innerText);//獲取文本內容(如有html直接過濾掉)
	div.innerText = 'Mr.Lee';//設置文本(如有html轉義)

	//DOM3新屬性
	console.log(div.textContent)
	div.innerText = '<html>';
</script>
</html>

innerHTML屬性

<script type="text/javascript">
	document.getElementById('div').innerHTML;//獲取文本(不過濾HTML)
	document.getElementById('div').innerHTML = '<b>123</b>';//可解析HTML
</script>

雖然innerHTML可以插入HTML，但本身還是有一定的限制，也就是所謂的作用域元素，離開這個作用域就無效了

<script type="text/javascript">
	document.getElementById("div").innerHTML = "<script>alert('Lee');</script"+">";//<script>元素不能被執行
</script>

outerText屬性

outerText在取值的時候和innerText一樣，但是賦值方法相當危險，他不單替換了文本內容，還將元素直接抹去。

<!DOCTYPE html>
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<div id="div">
		<span>hello1</span>
		<span>hello2</span>
		<span>hello3</span>
	</div>
</body>
<script type="text/javascript">
	var div = document.getElementById("div")
	console.log(div.outerText);//獲取文本內容(如有html直接過濾掉)
	div.outerText = 'Mr.Lee';//設置文本(如有html轉義)
	console.log(document.getElementById("div"));//null
</script>
</html>

outerHTML屬性

outerHTML屬性在取值和innerHTML一致，但和outerText也一樣，很危險，賦值的之後會將元素抹去。

<script type="text/javascript">
	var div = document.getElementById("div")
	console.log(div.outerHTML);//獲取文本內容(如有html直接過濾掉)
	div.outerHTML = '<b>124</b>';//設置文本(如有html轉義)
	console.log(document.getElementById("div"));//null
</script>

關於最常用的innerHTML屬性和節點操作方法的比較，在插入大量HTML標記時使用innerHTML的效率明顯要高很多。因爲在設置innerHTML時，會創建一個HTML解析器。這個解析器是瀏覽器級別的(C++編寫)，因此執行JavaScript會快的多。但，創建和銷燬HTML解析器也會帶來性能損失。最好控制在最合理的範圍內，如下：

for (var i = 0; i < 10; i ++) {
ul.innerHTML = '<li>item</li>';//避免頻繁
}
//改
for (var i = 0; i < 10; i ++) {
a = '<li>item</li>';//臨時保存
}
ul.innerHTML = a;

javascript筆記--（第二十章）DOM進階

DOM類型

Node類型

Document類型

Text類型

Comment類型

DOM擴展

呈現模式

滾動

children屬性

contains()方法

DOM操作內容

innerText屬性

innerHTML屬性

outerText屬性

outerHTML屬性

SQL優化-20231016

javascript筆記--（第二十三章）動態加載腳本和樣式

javascript筆記--（第二十四章）事件

javascript筆記--（第十六章）匿名函數和閉包

javascript筆記--（第十七章）BOM

ps如何獲取段落框的寬高

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結