DOM
Document Object Model(文檔對象模型)
定義了表示和修改文檔所需的方法。
DOM對象即為宿主對象，由瀏覽器廠商定義，用來操作html和xml功能的一類對象的集合。也有人稱DOM是對html以及xml的標准編程接口。
是一種與瀏覽器、平台、語言的接口，使用該接口可以輕松的訪問頁面中所有的標准組件。
DOM又分為三部分：DOM CORE（核心）、HTML-DOM、 CSS-DOM
HTML-DOM可以理解為API.他將網頁中的各個元素都看作一個對象，從而是網頁中的元素也可以被計算機語言獲取或編輯。
例如：element.src
CSS-DOM是針對CSS的操作，主要作用是獲取和設置style對象的各種屬性
例如：element.style.color = “red”
在了解DOM前我們還要知道一個小知識哦---節點
在HTML-DOM中HTML文檔中所有內容都被視為節點，DOM被視為節點樹的HTML
1) 整個文檔為一個文檔節點
2) 每一個HTML元素為元素節點
3) HTML元素中的文本視為文本節點
4) 每個HTML屬性為屬性節點
5) 注釋為注釋節點
節點類型
元素節點 1 以下數值表示節點屬性-nodeType ,返回的數值
屬性節點 2
文本節點 3
注釋節點 8
document 9
DocumentFragment 11
節點的四個屬性
nodeName 元素的標簽名，可讀不可寫
nodeValue 元素值，可讀可寫，文本text和注釋節點comment有此屬性，我們可以想象要查看屬性的值，可以忽略理解為內容，文本和注釋節點有鐵打的內容，而其他的節點只是光禿禿的Name
nodeType 節點類型，返回節點類型后的數值
attributes 屬性節點的集合
節點的方法
Nodes.hasChildNodes() 有沒有子節點 返回false\ture
對節點的增刪改查
查
- 方法類
查看元素節點 document代表整個文檔
document.getElementById() 通過ID獲取元素節點id在ie8以下的瀏覽器，不區分id的大小寫
document.getElementByTagName 通過標簽名獲取元素節點
document.getElemntByName 通過name獲取元素節點只有部分標簽name可生效 （表單,img,iframe）
document .getElementClassName 通過類名獲取元素節點 在ie7和ie8里沒有
.querySelector (‘div > span’) css選擇器在ie7和ie7一下的版本中沒有
.querySelectorAll css選擇器在ie7和ie7一下的版本中沒有
注：query這兩個方法不及時更新，比如 第一版div下有一個span，用query獲取后在更改，再次獲取結果仍然是div>span。而其余四個都具有實時性。
- 關系類 （ 節點類型）
節點和元素節點有什么區別呢？？？
節點就是上面的6類，元素節點呢當然就是HTML元素啦，小笨蛋！所以基於元素節點的遍歷出來的就是htm中的各類元素節點啦！
遍歷節點數（兼容性好）
parentNode 父節點 一直獲取，最頂端parentNode是 #document
childNodes 子節點 包括文本注釋等節點
firstChild 第一個節點
lastChild 最后一個節點
nextSibling 下一個兄弟節點
previousSibling 上一個兄弟節點
基於元素節點數的遍歷
parentElement 父元素節點
childen 子元素節點 除此以外ie9都不兼容，常用
node.childElementCount == childent.length
firstElementChild
lastElementChild
nextElemntChild
previousElementSibling
NOW想想自己是一個大牛 要調出元素的所有子節點了
//調出元素的所有子元素節點 var div = document.getElementsByTagName('body')[0]; function renElementChild(node){ var temp = { //類數組 length : 0, push : Array.prototype.push, splice : Array.prototype.splice, } child = node.childNodes, len = child.length; for(var i = 0 ; i < len; i++){ if(child[i].nodeType ===1){ temp.push(child[i]); } } return temp; }
真厲害，你棒你棒，你認真最棒！
dom基本操作
1.getElementbyId方法定義在Document.prototype上，即Element節點上不可以使用
2.getElementsByName方法定義在HTMLDocument.prototype上，即非htmldocument不能使用（xml document,Element）
3.getElementByTagName方法定義在Document.prototype和Element.prototype上
4.HTMLDocument.prototype定義了一些常用的屬性，bodu,head分別指文檔中的<body><head>標簽
5.document.prototype上定義了ducomentElement屬性，指代文檔的根元素，在HTML文檔中指代<html>元素
6.getElementsByClassName、querySelectorALL、querySelector在Document.prototype、Element.prototype類中均有定義
增
document.createElement //創建元素節點
document.creatTextNode //創建文本節點
document.creatComment //創建注釋節點
document.craetDocumentFragment //創建碎片節點
插
PARENTNODE.appendChild 類似於剪切
PARENTNODE.insertBefore(a,b) a插入到b前
刪
parent.removeChild() 父節點剪切出子節點
child.remove () 子節點自己銷毀
替換
parentNode.replaceChild(new,origin) 用new替換origin
Element上的屬性
innerHTML
innerText (火狐不兼容)/textContent(老版本IE不好使)
Element節點上的一些方法
ele.setAttribute(‘class’,’demo’)
ele.getAttribute(‘id’)
//封裝函數，返回元素e的第n層祖先元素節點 function retParent(elem,n){ while(elem && n){ elem = elem.parentElement; n--; } return elem; }
var i = document.getElementsByTagName('i')[0]; //封裝函數，返回元素e的第n個兄弟元素節點，n為正返回元素后面的兄弟元素，n為負返回前面的兄弟元素，n為0返回自己 function retSibling(e,n){ while(e && n){ if(n > 0){ if(e.nextElementSibling){ e = e.nextElementSibling; }else{ for(e = e.nextElementSibling ; e && e.nodeType != 1 ; e = e.nextElementSibling); } n--; } else { if(e.previousElementSibling){ e = e.previousElementSibling; }else{ for(e = e.previousElementSibling ; e && e.nodeType != 1 ; e = e.previousElementSibling); } n++; } } return e; } //編輯函數，解決myChildren功能，解決以前部分瀏覽器的兼容性問題 Element.prototype.myChild = function(){ var child = this.childNodes; var len = child.length; var arr = []; for(var i = 0 ;i < len; i++){ if(child[i].nodeType === 1){ arr.push(child[i]); } } return arr; } var div = document.getElementsByTagName('div')[0]; //封裝hasChildren(),不可以用children屬性 Element.prototype.myChild = function(){ var child = this.childNodes; var len = child.length; var arr = []; for(var i = 0 ;i < len; i++){ if(child[i].nodeType === 1){ return ture } } return false; } var div = document.getElementsByTagName('div')[0];