1. 程式人生 > >JS-第十章初始DOM

JS-第十章初始DOM

一.Node節點(幾乎都繼承於該介面)

(1).node基本屬性:

1.someNode.childNodes;//NodeList型別//獲取該節點所有的內容

2.someNode.children;//HTMLCollection型別,真正的element節點//獲取該節點下所有的元素節點(DOM-HTML型別)(區別上一個屬性, 註釋或別的不在其內)

3.let oneNode = someNode.childNodes[0];//someNode.childNodes.item(1);//獲得其中一個節點

4.let nextNode = oneNode.nextSibling;//下一個node

5.let preNode = oneNode.previousSibling;//上一個node

(2).node基本方法

1.someNode.appendChild(newNode);//新增節點

2.someNode.insertBefore(newNode, null);//在最後插入

3.someNode.insertBefore(newNode, firstChild);//插入最前面

4.someNode.replaceChild(newNode, oldNode);//替換舊的節點

5.someNode.removeChild(someNode.Node);//刪除其中一個節點

6.someNode.clone(boolean);//引數為boolen值,意為是否深拷貝

二.Document型別

(1).基本屬性

1.document.nodeName 為 #document

2.document.nodeType 為 9

3.document.parentNode為 null

4.document.title;//為htmlhead的tittle標籤

5.document.body,document.html,document.URl,document.referrer(來源網站)

(2).基本方法

1.document.getElementById('id');//通過id獲取節點

2.document.getElementsByTagName('img');//獲取一類的HTMLCollection型別的集合物件

3.document.getElementsByName('name');//獲取HTMLCollection集合物件

(3).特殊HTMLCocllection集合

1.document.links//所有帶href特性的<a>元素

2.document.images//所有<img>元素==document.getElementsByTagName('img');

三.Element型別

(1).基本屬性

所有繼承與Node節點的節點nodeType 為 1則為Element節點; 判斷方法如下: if (someNode.nodeType == Node.ELEMENT_NODE){ //在 IE 中無效 alert("Node is an element."); } 

1.element.nodeType 為 1

2.element.nodeName == element.tagName為元素標籤名入<div>的為DIV

3.element.parentNode可能是Document或Element

4.e.id//e.title//e.lang//e.className

(2).基本方法

//屬性操作

1.element.getAttrbute('');//獲取屬性值

2.element.setAttribute('','');//設定屬性

3.element.removeAttribute('');//刪除屬性

4.element.oneAttr = ""//新增自定義屬性

//建立元素

5.document.createElement('div');//建立新元素

6.element.appendChild(div);//加入到某節點

(3).注意事項

1.if (element.tagName.toLowerCase() == "div"){ //這樣最好(適用於任何文件) //在此執行某些操作 } 

不要這麼判斷 if (element.tagName == "div"){ //不能這樣比較,很容易出錯! //在此執行某些操作 } 

四.Text型別

(1).基本屬性

1.text.nodeType 為 3;

2.text.typeName 為#text;

3.text.nodevalue 為節點所包含的文字text;

4.parentNode是一個Element;

5.不支援(沒有)子節點

(2).基本方法

1.appendData(text);//將text新增到尾部

2.deleteData(offset, count);//某位置刪除count個字元

3.insertData(offset, text);//在某位置插入text

4.replaceData(offset, count, text);//替換

5.splitText(offset);//從某位置將該節點分為兩個文字節點

6.substringData(offset, count);//擷取一段text

五.Comment型別 六.CDATASection型別 七.DocumentFragment型別 八.Attr型別 九.動態建立樣式

(1)建立element節點

1.document.createElement("link");

2.document.createElement("script");

3.document.createElement("div");

(2)建立txtNode

1.document.createTextNode('str');//各個節點中的文字text

十.操作表格(先不研究)