JS DOM document、element 物件
阿新 • • 發佈：2019-01-11
document 物件
當瀏覽器載入 HTML 文件, 它就會成為 Document 物件，即是 HTML 文件的根節點， Document 物件可以從指令碼中對 HTML 頁面中的所有元素進行訪問。
PS：Document 物件是 Window 物件的一部分，可通過 window.document 屬性對Document 物件自身進行訪問。
element 物件
在 HTML DOM 中, 元素物件代表著一個 HTML 元素。NodeList 物件代表了節點列表，類似於 HTML元素的子節點集合。元素的屬性是屬性節點。
| 方法 | 描述 |
|---|---|
| document.write() | 向文件寫 HTML 表示式 或 JavaScript 程式碼。 |
| document.writeln() | 等同於 write() 方法，不同的是在每個表示式之後寫一個換行符。 |
| document.getElementById() | 返回對擁有指定 id 的第一個物件的引用，如：document.getElementById(“demo”) 沒有指定 ID時返回 null，多個指定ID返回 undefined。 |
| document.getElementsByName() | 返回帶有指定名稱的物件的集合 |
| document.getElementsByTagName() | 返回帶有指定標籤名的物件集合。 |
| element.getElementsByTagName() | 返回指定標籤名的所有子元素集合。 |
| document.getElementsByClassName() | 返回文件中所有指定類名的元素集合，作為 NodeList 物件。 |
| element. getElementsByClassName() | 返回文件中所有指定類名的元素集合，作為 NodeList 物件。 |
| document.createAttribute() | 建立一個屬性節點 |
| element.removeAttribute() | 從元素中刪除指定的屬性 |
| element.removeAttributeNode() | 刪除指定屬性節點並返回移除後的節點。 |
| document.addEventListener() | 向文件新增控制代碼 ，可以使用 document.removeEventListener()方法來移除 addEventListener() 方法新增的事件控制代碼。使用 element.addEventListener() 方法為指定元素新增事件控制代碼。 |
| element.addEventListener() | 向指定元素新增事件控制代碼 |
| document.removeEventListener() | 移除文件中的事件控制代碼(由 addEventListener() 方法新增)；// 在文件中新增事件控制代碼document.addEventListener(“mousemove”, myFunction);// 移除文件中的事件控制代碼document.removeEventListener(“mousemove”, myFunction); |
| element.removeEventListener() | 移除由 addEventListener() 方法新增的事件控制代碼 |
| document.createTextNode() | 建立文字節點。 |
| element.appendChild() | 為元素新增一個新的子元素 |
| element.cloneNode(deep) | 克隆某個元素，返回這個節點的副本（包括屬性）。如果deep的值為true，則複製所有包含的節點；否則只複製這個節點 |
| element.focus() | 設定文件或元素獲取焦點，為元素設定焦點（如果可以設定）。提示：使用 .blur() 方法來移除元素焦點。 |
| element.hasChildNodes() | 返回一個元素是否具有任何子元素 |
element.insertBefore(newChild,refChild) |
在現有節點refChild之前插入節點newChild |
| element.getAttribute() | 返回指定元素的屬性值 |
| element.getAttributeNode() | 返回指定屬性節點 |
element.removeChild(oldChild) |
刪除一個子元素，將子節點列表中的子節點oldChild刪除，並返回oldChild節點 |
element.replaceChild(newChild，oldChild) |
替換一個子元素，將子節點列表中的子節點oldChild換成newChild，並返回oldChild節點 |
| element.setAttribute() | 設定或者改變指定屬性值。 |
| element.setAttributeNode() | 設定或者改變指定屬性節點。 |
| 屬性 | 描述 |
|---|---|
| document.embeds | 返回文件中所有嵌入的內容（embed）集合 ，var x = document.embeds.length;可以計算HTML中嵌入了多少個<embeds> 元素 |
| document.forms | 返回對文件中所有 Form 物件引用。document.write(document.forms.length);可以返回文件中表單數量 |
| document.images | 返回當前文件中所有圖片的陣列。 |
| element.attributes | 返回一個元素的屬性陣列 |
| element.childNodes | 返回元素的一個子節點的陣列 |
| element.children | 返回元素的子元素的集合 |
| element.classList | 返回元素的類名，作為 DOMTokenList 物件。add()增添類，contains()判斷是否包含類，remove() 移除類 |
| element.innerHTML | 設定或者返回元素的內容。 |
| element.className | 設定或返回元素的class屬性 |
| element.firstChild | 返回元素的第一個子節點 |
| element.lastChild | 返回的最後一個子元素 |
| element.nextSibling | 返回該元素緊跟的一個節點 |
| element.nextElementSibling | 返回指定元素之後的下一個兄弟元素（相同節點樹層中的下一個元素節點）。 |
| element.nodeName | 返回元素的標記名（大寫，只讀）。元素節點的 nodeName 與標籤名相同，屬性節點的 nodeName 與屬性名相同，文字節點的 nodeName 始終是 #text，文件節點的 nodeName 始終是 #document |
| element.nodeType | 返回元素的節點型別，元素型別NodeType；元素：1，屬性：2，文字：3，註釋：8，文件：9 |
| element.nodeValue | 返回元素的節點值， 元素節點的 nodeValue 是 undefined 或 null ，文字節點的 nodeValue 是文字本身，屬性節點的 nodeValue 是屬性值 |
| element.parentNode | 返回元素的父節點 |
| element.previousSibling | 返回某個元素緊接之前元素 |
| element.previousElementSibling | 返回指定元素的前一個兄弟元素（相同節點樹層中的前一個元素節點）。 |
| element.textContent | 設定或返回一個節點和它的文字內容，設定節點文字內容:node.textContent=text；返回節點文字內容:node.textContent |
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
.divClass{ background-color: greenyellow;width: 100px;height: 100px;}
</style>
</head>
<body>
<ul> <li>China</li> <li>English</li> <li>Australia</li> </ul>
</body>
<script>
var body = document.getElementsByTagName('body')[0]
//createDocumentFragment()建立一個虛擬的節點，其本身不會顯示在頁面
var div_1 = document.createDocumentFragment();
//createDocumentFragment()方法建立的不能使用setAttribute()方法,否則報錯
//div_1.setAttribute("style","width: 10px;height: 10px;background:black;")
body.appendChild(div_1)
//createElement()建立一個元素節點，會顯示在頁面
var div_2 = document.createElement('div')
div_2.setAttribute("style","width: 10px;height: 10px;background:black;")
body.appendChild(div_2)
//createDocumentFragment()作為一個虛擬節點，可以更安全改變文件的結構及節點
var div_3 = document.createDocumentFragment("div")
var li = document.getElementsByTagName('li')[0]
//將獲取到的 body 的 li 的元素節點，增添到建立的虛擬節點後，body 中的該節點立即不顯示了
div_3.appendChild(li)
//現在的虛擬節點的 節點值nodeValue 成為了 字串 country
div_3.childNodes[0].childNodes[0].nodeValue = "country"
//addEventListener()新增一個事件控制代碼
var btn = document.createElement("button")
btn.setAttribute("style","width: 100px;")
btn.setAttribute("type","button")
var btn_text =document.createTextNode("button")
btn.appendChild(btn_text)
body.appendChild(btn)
// 使用 addEventListener() 方法向元素節點中新增點選事件，不要使用 "on" 字首
btn.addEventListener("click",func_frag)
function func_frag(){
//將從 body 中取到的 li元素節點，賦值到 body 的子節點中
body.appendChild(div_3)
}
</script>
</html>
<script>
function getfocus() {
//.focus()獲取焦點
document.getElementById("myAnchor").focus();
}
//.blur()移除焦點
function losefocus() {
document.getElementById("myAnchor").blur();
}
function myFunction(){
var itm=document.getElementById("myList2").lastChild;
//如果cloneNode(deep)的deep引數為假，只有一個空的標籤元素將被克隆，在此例中，是克隆了標籤元素本身，以及其內部包含的所有節點
var cln=itm.cloneNode(true);
document.getElementById("myList1").appendChild(cln);
}
function myFunction(){
var c=document.getElementsByTagName("BUTTON")[0];
var x=document.getElementById("demo");
//如果設定了 textContent的屬性，任何子節點都可以被移除
//或者被 指定的字串的文字節點 替換
x.innerHTML=c.textContent;
}
</script>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
.divClass{ background-color: greenyellow;width: 100px;height: 100px;}
</style>
</head>
<body>
</body>
<script>
var body = document.getElementsByTagName('body')[0]
//setAttributeNode()設定屬性節點
var div_1 = document.createElement("div")
body.appendChild(div_1)
//建立屬性節點“class”
var a = document.createAttribute('class')
//對建立的屬性節點“class”進行賦值
//a.value = 'divClass' 與a.nodeValue = 'divClass' 的效果相等
a.value = 'divClass'
//設定建立的 div_1 的屬性節點
div_1.setAttributeNode(a)
//setAttribute()設定屬性值
var div_2 = document.createElement('div')
body.appendChild(div_2)
//設定節點的屬性值
div_2.setAttribute("style","background-color: yellow;width: 150px;height: 150px;")
</script>
</html>