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