DOM由節點組成
在 HTML DOM (文檔對象模型)中,每個部分都是節點:
文檔本身是文檔節點
所有 HTML 元素是元素節點
所有 HTML 屬性是屬性節點
HTML 元素內的文本是文本節點
註釋是註釋節點
1.重要節點類型:標籤(元素)節點,屬性節點,文本節點。
2.重要節點屬性:
(1)nodeType 節點類型(數字表示,標籤1,屬性2,文本3)
(2)nodeName 節點名字
(3)nodeValue 節點值
3.不同類型節點的屬性取值
標籤節點 | 屬性節點 | 文本節點 | |
nodeType節點類型 | 1 | 2 | 3 |
nodeName節點名字 | 對應的標籤名 | 對應的屬性名 | #text |
nodeValue節點值 | null | 對應的屬性值 | 對應的文本內容 |
- 標籤節點:
nodeType:1;
nodeName:對應的標籤名;
nodeValue:null - 屬性節點:
nodeType:2;
nodeName:對應的屬性名;
nodeValue:對應的屬性值 - 文本節點:
nodeType:3;
nodeName:#text;
nodeValue:元素節點或屬性節點中的文本內容 - 文檔節點:
nodeType:9;
nodeName:表示整個文檔(DOM 樹的根節點)
nodeValue:document
獲取節點
- 獲得當前元素的父節點 : .parentNode
- 獲得當前元素的子節點 :
.childNodes(標準屬性)獲取標籤節點和文本節點
.children不是DOM的標籤屬性,但是所有的瀏覽器都支持,只會獲得標籤子節點 - 獲取相鄰節點的屬性:
[next(previous)Sibling]、[next(previous)ElementSibling]
.nextSibling :
返回指定節點之後緊跟的節點(同級)。
被返回的節點以 Node 對象返回,元素中的空格被視作文本,而文本被視作文本節點
IE8及之前的瀏覽器會忽略空白文本節點
function getPrevNode (dom){
var preNode=dom.previousSibling;
var txt=preNode.nodeValue.trim(); //' '
if(preNode.nodeType==3 && txt.length==0){
return preNode.previousSibling
}else{
return preNode
}
}
.nextElementSibling:
IE8及之前的瀏覽器不支持這個屬性,只會獲得標籤節點
//解決兼容性的問題
function getNextElement(element){
if(element.nextElementSibling){
return element.nextElementSibling;
}else{
var ele = element.nextSibling;
console.log(ele)
while(ele && ele.nodeType !==1){
ele= ele.nextSibling;
}
return ele;
}
}
- 父元素的first與last子節點 :[first(last)Child]、[first(last)ElementChild]
.firstChild:
所有的瀏覽器都支持的,獲取標籤節點、文本節點,
但是IE8及之前的低版本的瀏覽器,是可以忽略空白文本節點的而獲得的是標籤節點
.firstElementChild:
IE8及之前的低版本的瀏覽器不支持,直接獲取父元素的第一個標籤節點
function getFirstElementChild(element){
if(element.firstElementChild){
return element.firstElementChild;
}else{
var ele = element.firstChild;
while(ele && ele.nodeType !==1){
ele = ele.nextSibling;
}
return ele;
}
}
function getLastElementChild(element){
if(element.lastElementChild){
return element.lastElementChild;
}else{
var ele = element.lastChild;
while(ele&&ele.nodeType!==1){
ele= ele.previousSibling;
}
return ele;
}
}
總結
- . childNodes ;(標準屬性)、next(previous)Sibling、first(last)Child
[不但可以獲得標籤節點,還會獲取文本節點,但ie8及之前瀏覽器會忽略空本文本節點] - .children;[所有瀏覽器都支持,只會獲得當前元素的標籤子元素]
next(previous)ElementSibling、first(last)ElementChild
[IE8及之前的低版本瀏覽器不支持,只獲取標籤節點]
節點操作
動態創建節點元素
document.createElement("標籤名");//創建元素節點;
document.createTextNode("txt");//創建文本節點;
1.父級元素. appendChild(節點元素)--把節點插入到父節點的末尾
2.父級元素.insertBefore(新節點,插入位置)--把新節點插入到位置的前面
- 父級元素.removeChild(節點元素); //刪除節點元素
- 父級元素.replaceChild(節點1,節點2); //用節點1替換節點2
克隆節點:
cloneNode(boolean值)
1.該方法將複製並返回調用它的節點的副本。
2.如果傳遞的參數是 true,將遞歸複製當前節點的所有子孫節點。False的話只複製當前節點。
如果參數爲False的話,僅僅克隆的是一個標籤(不傳參,默認值爲false)
如果參數爲true的話,標籤之間的內容也會克隆,也叫做深度克隆
3.返回的節點不屬於文檔樹,它的 parentNode 屬性爲 null。
4.當複製的是 Element 節點時,它的所有屬性都將被複制。但是,當前節點上註冊的事件不會被複制
節點屬性
基本用法
1.對象.的方式設置、獲取屬性[元素是DOM對象]
例如:txt.value=”123”;{不能設置、獲取自定義屬性}
2.setAttribute(屬性名,屬性值) :設置屬性,也可設置自定義屬性,推薦使用
注意:設置已經存在的屬性時,會將原來的屬性值覆蓋
3.getAttribute() 可獲得行內的原生屬性,也可獲得自定義屬性
4.removeAttribute(要移除的屬性名) 徹底刪除
給元素節點設置樣式
給元素設置樣式的兩種形式(通過對象.的方式):
1.設置類名
className:元素的一個屬性,設置類名;
[加入要爲某個元素添加多個樣式時,可以將樣式都放在一個css的類樣式中,然後通過元素的屬性className獲取該類名。]
- dom.setAttribute('class','xxx');
IE6/7不支持setAttribute('class',xxx)方式設置元素的class。
- dom.setAttribute('className', 'xxx')
IE8/9/10/Firefox/Safari/Chrome/Opera不支持setAttribute('className',xxx)方式設置元素的class
- dom.className = 'xxx';
所有瀏覽器都支持
dom.className = dom.className.replace("hide","show");
//字符串的替換,僅僅是替換了要替換的字符,不改變其它的
2.Style:元素的一個屬性,通過其設置一個樣式。
例如:
dom.style.backgroundColor='red'; //將樣式的中橫線寫法換成駝峯的寫法
dom.style.background='red';
dom.style.color='red';
- 設置、清除類的方式
1.設置類名:dom.className='類名';
2.清除類名:dom.className='';
3.徹底清除類的屬性:dom.removeAttribute('class')
設置、獲取標籤中的文本內容
獲取內容區別:
1.innerText只打印標籤之間的文本內容,不打印標籤
2.innerHTML,不但打印文本內容,連標籤間的標籤也打印出來。高版本瀏覽器會將格式原樣輸出
設置內容區別:
1.innerText 設置內容時,無法設置標籤,會將標籤進行轉義。
2.innerHtml設置內容時,能將裏面的標籤渲染成正常的html標籤 。
小結:
(1)innerHTML所有的瀏覽器都支持,不但獲取文本,還獲取標籤間的標籤。
(2)innerText是老版本的火狐瀏覽器不支持,只支持用textContent;
(3)textContent是Ie8之前的瀏覽器不支持,只支持innerText;
動態創建元素
凡是通過js來設置頁面的標籤都可以稱爲動態的創建頁面元素。
1.document.write() 幾乎是很少用的
2.InnerHTML:直接在裏面寫html代碼生成標籤
3.document.creatElement(標籤名):創建一對標籤
獲取樣式
obj.style:只能獲取html標籤中的style屬性中的值(style="...")
獲取定義在<style type="text/css">裏面屬性方法:
.currentStyle(IE外部css文件)
.getComputedStyle (FF,只讀,不能設置)
var btn=document.getElementById("button")
btn.onclick = function() {
var oStyle = btn.currentStyle? btn.currentStyle : getComputedStyle(btn, null);
/*alert(oStyle.height);*/
alert(oStyle['height']);
};
JS事件
註冊事件
1.行內式註冊事件(在標籤內)
2.內嵌式註冊事件
事件:
1.onfocus
2.onblur
3.onchange
4.onmouseover
5.onload
6.onkeyup
btn.onclick = function(e){
// 通過事件對象可以獲得一些與事件相關的一些信息
// 事件對象裏面存儲了一些與事件相關的屬性或是方法
// e.clientX pageX screenX
// IE8之前是不支持event window.event IE8也有事件對象,只不過是存在window屬性裏面,必須通過Window.event才能拿到
e = e || window.event;
console.log(e)
}