DOM 文檔對象模型
- DOM即文檔對象模型(Document Object Model)
- DOM原理:
HTML加載完畢以後,渲染引擎會在內存中把HTML文檔生成一個DOM樹,getElementById是獲取內存中DOM上元素的節點,然後操作時修改的是該元素的屬性,
3.文檔對象模型:
- docment是文檔對象模型的一部分,
- DOM是一個混合的數據類型
4.DOM樹:
5.DOM的作用:
- 找對象(元素);
- 設置元素的屬性;
- 設置元素的樣式;
- 動態創建和刪除元素;
- 事件的觸發響應;
6.DOM訪問關系:
- 節點的獲取:
節點的訪問關系是以屬性的方式存在的,DOM節點並不是孤立存在的,因此通過DOM節點之間的相對關系對它們進行訪問,
1).父節點(parentNode):(一個節點只有一個父節點)
獲取父節點: 父節點=節點.parentNode;
<body> <div id="box"> <button id="btn">點擊</button> <div id="link"> <p>上一個兄弟節點</p> <a href="#">百度搜索</a> <span>下一個兄弟節點</span> </div> <p>我是最後一個子節點</p> </div> <script> vara=document.getElementsByTagName("a")[0]; console.log(a); //獲取父節點 console.log(a.parentNode); console.log(a.parentNode.parentNode); //獲取兄弟節點 //上一個兄弟節點 var previous=a.previousElementSibling || a.previousSibling; console.log(previous);//下一個兄弟節點 var next=a.nextElementSibling || a.nextSibling; console.log(next); </script> </body>
2).兄弟節點:
sibling→兄弟,next→下一個,previous→上一個
兄弟節點的獲取存在兼容性問題,IE 6/7/8,用nextSibling(previousSibling);谷歌火狐,IE9+用nextElementSibling(previousElementSibling);
獲取兄弟節點的兼容性寫法: 下一個兄弟節點=節點.nextElementSibling || 節點.nextSibling;
上一個兄弟節點=節點.previousElementSibling || 節點.previousSibling;
3).單個節點:
同樣存在兼容性,與兄弟節點相似,
獲取單個節點的兼容性寫法: 第一個子節點=父節點.firstElementChild || 父節點.firstChild;
最後一個子節點=父節點.lastElementChild || 父節點.lastChild;
所有子節點:有兩種方法,第一種是有W3C屬性childNodes獲取所有子節點,返回的是指定元素的子元素集合,包括HTML節點,所有屬性,文本節點(火狐,谷歌等高版本會把換行也看做一個子節點),通過判斷node.nodeType的值可以過濾掉文本,屬性等節點,然後返回元素(元素即標簽),其中: nodeType==1,表示元素節點
nodeType==2,表示屬性節點
nodeType==3,表示文本節點
獲取所有子節點: 子節點數組=父節點.childNodes;
第二種方法是使用非標準屬性children,只返回HTML節點,不返回文本節點,雖然不是標準的DOM屬性,但它和innerHTML方法一樣,得到了幾乎所有瀏覽器都支持,應用更為廣泛。
(註意:children在 IE6/7/8中包含註釋節點,在IE 6/7/8註釋不要寫在裏面)
獲取所有子節點: 子節點數組=父節點.children;
<body> <div id="box"> <button id="btn">點擊</button> <div id="link"> <p>上一個兄弟節點</p> <a href="#">百度搜索</a> <span>下一個兄弟節點</span> </div> <p>我是最後一個子節點</p> </div> <script> //單個節點 var father=document.getElementById("box"); //獲取第一個子節點 var firstNode=father.firstElementChild || father.firstChild; console.log(firstNode); //獲取最後一個子節點 var lastNode=father.lastElementChild || father.lastChild; console.log(lastNode); /* //用w3c標準屬性childNodes獲取所有節點 var allNodes=father.childNodes; console.log(allNodes); //此時,文本節點也被返回 //過濾屬性節點與文本節點,只返回元素節點(元素就是標簽),並放入新的數組中 var newList=[]; //1.遍歷所返回的子元素的集合 for(var i=0;i<allNodes.length;i++){ var node=allNodes[i]; if(node.nodeType==1){ newList[i]=allNodes[i]; } } console.log(newList); */ //用非標準屬性children獲取所有節點 var allNodes=father.children; console.log(allNodes);zzzzz </script> </body>
DOM 文檔對象模型