javascript整理——DOM
DOM（Document Object Model ）：文檔對象模型，也是HTML和XML文檔的編程接口，簡單來說就是一個接口，只不過是用javascript來實現的
任意的文檔都可以繪制成樹狀結構，如下圖
document——>就是一個對象，這個對象指代的是這個文檔。
document對象下面有一些方法，這個方法可以獲取到某個或者某一組元素節點：
- document.getElementsById() //通過id獲取（IE8及以下，獲取元素ID不區分大小寫）
- document.getElementsByTagName() //通過標簽名獲取一組元素，哪怕只有一個元素，也會封裝到對象（類數組對象，可以直接當數組用）
- document.getElementsByName() //通過name屬性來進行獲取，老版本的瀏覽器只有部分標簽（指表單標簽）好使，本身name屬性在開發中只會添加到表單中
- document.getElementsByClassName() //通過類名來獲取一組元素，如果只想獲取其中的某一個那麽寫成document.getElementsByClassName()[x] x代表下標
- document.guerySelector("css選擇器") //如果有多個只會獲取第一個
- document.guerySelectorAll("css選擇器")
最後兩個方法有缺點，基本不會用：
1.IE7及以下不支持
2.非實時 以現在的狀態為標準，後面做增刪改查都不會發生變化，也就是非實時
在DOM中，文檔是由節點構成的集合，而節點又分為不同的類型。節點的三種類型：元素節點 文本節點 註釋節點
1.元素節點：比如<head> <title> <a> <body> <html> // <html>是<head>的父節點，<title>是<head>的子節點，<body>是<head>的兄弟節點
2.文本節點：寫入的文字 比如<div>內容</div> div為元素節點，而內容就是文本節點
3.註釋節點：也就是你註釋裏的文字
節點：
parentNode //父節點 firstChild //第一個子節點 lastChild //最後一個子節點 nextSibling //下一個兄弟節點 previousSibling //上一個兄弟節點 parentElement //父元素元素節點 children //子元素元素節點們 firstElementChild //第一個子元素節點 lastElementChild //最後一個子元素節點 previousElementSibling //上一個兄弟元素節點 nextElementSibling //下一個兄弟元素節點 children.length //子元素節點們的個數 childElementCount //就是個數
節點的屬性：
- nodeName 節點的名字 只能讀不能修改
- nodeValue 節點的內容 text節點和comment節點中的內容，可讀可修改
- nodeType 節點類型
元素節點——> 1 屬性節點——> 2 文本節點——>3 註釋節點——>8 document——>9 DocumentFragment——>文檔節點 碎片——>11
方法：hasChildNodes() 判斷是否有子節點
知道了節點的屬性和方法，那麽就來看看一個題：封裝一個函數，取出所有的元素節點，不能使用children
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <div> <span></span> <p></p> <a href=""></a> </div> </body> </html>
var div = document.getElementsByTagName("div")[0];//獲取元素節點 function getElement(div){ var nodes = div.childNodes;//獲取子節點們 var elementnode = []; //元素節點定義為數組 for(var i = 0;i<nodes.length;i++){ //循環節點 if(nodes[i].nodeType == 1){ //如果節點類型為1 elementnode.push(nodes[i]); //把節點為1的節點放進元素節點數組中 } } return elementnode; //返回元素節點數組 } console.log(getElement(div)) //輸出元素節點
dom方法存在的位置：
1. getElementById()定義在Document.prototype上面，Element上面不能使用
2.getElementsByName()定義在HTMLDocument.prototype上面，XML是不能使用這個方法
3.getELementsByTagName()定義在Document.prototype上面和Element.prototype上面
4.HTMLDocument.prototype上面定義了一些屬性body head
document.head——>指代head標簽
document.body——> 指代body標簽
5.Document.prototype上面定義了documentElement屬性
document.documentElement ——> 指代html標簽
6.getElementsByClassName(),querySelector(),querSelectoeAll()，Documenet,prototype和Elment.prototype上面都有定義
DOM操作
創建節點：（只是創建了節點，但是沒有插入到頁面中）
document.createElement() 創建元素節點
var div = document.createElement("div"); div.innerHTML = "這個是剛剛創建的div"
document.createTextNode() 創建文本節點
var text = document.createTextNode("hello world");
document.createcOMMENT() 創建註釋節點
var comment = document.createComment("this is comment")
插入操作：
parent.appendChild() //選擇父級元素，插入為最後一個子元素，插入頁面已有的元素，為剪貼操作
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <div class="divbox"> <span>this is span</span> <a href="">this is a</a> <p>this is p</p> </div> <div class="divbox2"> hello world </div> </body> </html>
var divbox = document.getElementsByClassName("divbox")[0];//獲取class為divbox的元素節點
var divbox2 = document.getElementsByClassName("divbox2")[0];//獲取class為divbox2的元素節點
divbox.appendChild(divbox2); //選擇divbox為父級，divbox2作為最後一個子元素插入
parent.insertBefore(a,b) 插入a在b之前
刪除操作：
parent.removeChild() 不是真正的刪除，而只是拿出來一下，有其他地方要用到這個節點又會自動還原
child.remove() 真正的刪除
替換操作：
parent.replaceChild(new,old) 用new去替換old
innerHTML、innerText和textContext的區別:
innerHTML：指元素裏的html判斷
innerText：純文本 老版本的火狐不支持
textContext：純文本 老版本的IE不支持
javascript整理——DOM