摘要:如果傳遞的參數是,將遞歸復制當前節(jié)點的所有子孫節(jié)點。的話只復制當前節(jié)點。設置內容時,能將里面的標簽渲染成正常的標簽。
DOM由節(jié)點組成
在 HTML DOM (文檔對象模型)中,每個部分都是節(jié)點:
文檔本身是文檔節(jié)點
所有 HTML 元素是元素節(jié)點
所有 HTML 屬性是屬性節(jié)點
HTML 元素內的文本是文本節(jié)點
注釋是注釋節(jié)點
1.重要節(jié)點類型:標簽(元素)節(jié)點,屬性節(jié)點,文本節(jié)點。
2.重要節(jié)點屬性:
(1)nodeType 節(jié)點類型(數字表示,標簽1,屬性2,文本3)
(2)nodeName 節(jié)點名字
(3)nodeValue 節(jié)點值
3.不同類型節(jié)點的屬性取值
標簽節(jié)點 | 屬性節(jié)點 | 文本節(jié)點 | |
nodeType節(jié)點類型 | 1 | 2 | 3 |
nodeName節(jié)點名字 | 對應的標簽名 | 對應的屬性名 | #text |
nodeValue節(jié)點值 | null | 對應的屬性值 | 對應的文本內容 |
標簽節(jié)點:
nodeType:1;
nodeName:對應的標簽名;
nodeValue:null
屬性節(jié)點:
nodeType:2;
nodeName:對應的屬性名;
nodeValue:對應的屬性值
文本節(jié)點:
nodeType:3;
nodeName:#text;
nodeValue:元素節(jié)點或屬性節(jié)點中的文本內容
文檔節(jié)點:
nodeType:9;
nodeName:表示整個文檔(DOM 樹的根節(jié)點)
nodeValue:document
獲得當前元素的父節(jié)點 : .parentNode
獲得當前元素的子節(jié)點 :
.childNodes(標準屬性)獲取標簽節(jié)點和文本節(jié)點
.children不是DOM的標簽屬性,但是所有的瀏覽器都支持,只會獲得標簽子節(jié)點
獲取相鄰節(jié)點的屬性:
[next(previous)Sibling]、[next(previous)ElementSibling]
.nextSibling :
返回指定節(jié)點之后緊跟的節(jié)點(同級)。
被返回的節(jié)點以 Node 對象返回,元素中的空格被視作文本,而文本被視作文本節(jié)點
IE8及之前的瀏覽器會忽略空白文本節(jié)點
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及之前的瀏覽器不支持這個屬性,只會獲得標簽節(jié)點
//解決兼容性的問題 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子節(jié)點 :[first(last)Child]、[first(last)ElementChild]
.firstChild:
所有的瀏覽器都支持的,獲取標簽節(jié)點、文本節(jié)點,
但是IE8及之前的低版本的瀏覽器,是可以忽略空白文本節(jié)點的而獲得的是標簽節(jié)點
.firstElementChild:
IE8及之前的低版本的瀏覽器不支持,直接獲取父元素的第一個標簽節(jié)點
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
[不但可以獲得標簽節(jié)點,還會獲取文本節(jié)點,但ie8及之前瀏覽器會忽略空本文本節(jié)點]
.children;[所有瀏覽器都支持,只會獲得當前元素的標簽子元素]
next(previous)ElementSibling、first(last)ElementChild
[IE8及之前的低版本瀏覽器不支持,只獲取標簽節(jié)點]
document.createElement("標簽名");//創(chuàng)建元素節(jié)點;
document.createTextNode("txt");//創(chuàng)建文本節(jié)點;
1.父級元素. appendChild(節(jié)點元素)--把節(jié)點插入到父節(jié)點的末尾
2.父級元素.insertBefore(新節(jié)點,插入位置)--把新節(jié)點插入到位置的前面
父級元素.removeChild(節(jié)點元素); //刪除節(jié)點元素
父級元素.replaceChild(節(jié)點1,節(jié)點2); //用節(jié)點1替換節(jié)點2
克隆節(jié)點:cloneNode(boolean值)
1.該方法將復制并返回調用它的節(jié)點的副本。
2.如果傳遞的參數是 true,將遞歸復制當前節(jié)點的所有子孫節(jié)點。False的話只復制當前節(jié)點。
如果參數為False的話,僅僅克隆的是一個標簽(不傳參,默認值為false)
如果參數為true的話,標簽之間的內容也會克隆,也叫做深度克隆
3.返回的節(jié)點不屬于文檔樹,它的 parentNode 屬性為 null。
4.當復制的是 Element 節(jié)點時,它的所有屬性都將被復制。但是,當前節(jié)點上注冊的事件不會被復制
1.對象.的方式設置、獲取屬性[元素是DOM對象]
例如:txt.value=”123”;{不能設置、獲取自定義屬性}
2.setAttribute(屬性名,屬性值) :設置屬性,也可設置自定義屬性,推薦使用
注意:設置已經存在的屬性時,會將原來的屬性值覆蓋
3.getAttribute() 可獲得行內的原生屬性,也可獲得自定義屬性
4.removeAttribute(要移除的屬性名) 徹底刪除
給元素節(jié)點設置樣式給元素設置樣式的兩種形式(通過對象.的方式):
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")設置、獲取標簽中的文本內容
獲取內容區(qū)別:
1.innerText只打印標簽之間的文本內容,不打印標簽
2.innerHTML,不但打印文本內容,連標簽間的標簽也打印出來。高版本瀏覽器會將格式原樣輸出
設置內容區(qū)別:
1.innerText 設置內容時,無法設置標簽,會將標簽進行轉義。
2.innerHtml設置內容時,能將里面的標簽渲染成正常的html標簽 。
小結:
(1)innerHTML所有的瀏覽器都支持,不但獲取文本,還獲取標簽間的標簽。
(2)innerText是老版本的火狐瀏覽器不支持,只支持用textContent;
(3)textContent是Ie8之前的瀏覽器不支持,只支持innerText;
凡是通過js來設置頁面的標簽都可以稱為動態(tài)的創(chuàng)建頁面元素。
1.document.write() 幾乎是很少用的
2.InnerHTML:直接在里面寫html代碼生成標簽
3.document.creatElement(標簽名):創(chuàng)建一對標簽
obj.style:只能獲取html標簽中的style屬性中的值(style="...")
獲取定義在