10. javacript高级程序设计-DOM
1. DOM
DOM(文檔對象模型)是針對HTML和XML文檔的一個API（應用程序接口）
1.1 節點層次
DOM可以將任何HTML和XML文檔描繪成一個由多層節點構成的結構。節點分為幾種不同的類型，每種類型分別表示文檔中不同的信息及標記。
1.1.1 Node類型
DOM1中定義了一個Node接口，該接口由DOM中所有的節點類型實現，這個Node接口在JavaScript中作為Node類型實現。
每個節點都有一個nodeType屬性，因此所有節點類型都共享著相同的基本屬性和方法
每個節點都有一個nodeType屬性，用于表明節點的類型，節點類型由在Node類型中定義的下列12個數值常量來表示，任何節點類型比居其一：
l Node.ELEMENT_NODE(1);
l Node.ATTRIBUTE_NODE(2);
l Node.TEXT_NODE(3)
l Node.CDATA_SECTION_NODE(4)
l Node.ENTITY_REFERENCE_NODE(5)
l Node.ENTITY_NODE(6)
l Node.PROCESSING_INSTRUCTION_NODE(7)
l Node.COMMENT_NODE(8)
l Node.DOCUMENT_NODE(9)
l Node.DOCUMENT_TYPE_NODE(10)
l Node.DOCUMENT_FRAGMENT_NDOE(11)
l Node.NOTATION_NODE(12)
(1). 判斷節點類型
if(someNode.nodeType == 1){
}?????????????????????????????????????????????????
適用所有瀏覽器
(2). nodeName 和 nodeValue，可以了解具體信息，這兩個屬性取決于屬性類型
(3). 節點關系：
(4). appendChild():在節點的末尾添加一個節點
hasChildNodes():是否有子節點
insertBefore():在前面插入節點
replaceChild():替換節點
removeChild():移除節點
cloneNode():復制節點
1.1.2 Document類型
l nodeType的值為9
l nodeName的值為 “#document”
l nodeValue的值為null
l parentNode的值為null
l ownerDocument的值為null
l 其子節點可能是一個DocumentType(最多一個)，Element(最多一個)，ProcessingInstruction或者Comment
常見屬性：
document.body
document.title
document.URL
document.domain
document.referrer
document.getElementById()
document.getElementsByTagName()
document.anchors
document.applets
document.forms
document.images
document.links
1.1.3 Element類型
l nodeType的值為1
l nodeName的值為 元素的簽名值
l nodeValue的值為null
l parentNode的值為Document或Element
l 子節點可能是Element，Text，Comment，ProcessingInstruction，CDATASection或者EntityReference
一般會存在下列屬性：
id，title，lang，dir，className
<div id="id" title="title" lang="lang" dir="dir" class="className"></div>
可以使用getAttribute(),setAttribute()和removeAttribute()來操作屬性
Element類型是使用attributes屬性的的唯一一個DOM節點類型，表示所有的屬性集合。
1.1.4 Text類型
l nodeType的值為3
l nodeName的值為 “#text”
l nodeValue的值為 節點所包含的文本
l parentNode的值為Element
l 沒有子節點
l 可以通過nodeValue屬性或data屬性訪問Text節點中的文本
l appendData(text)
l deleteData(offset,count)
l insertData(offset,text)
l replaceData(offset,count,text)
l splitText(offset)
l substringData(offset,count)
1.1.5 Comment
l nodeType的值為8
l nodeName的值為 “#comment”
l nodeValue的值為 注釋的內容
l parentNode的值為Element或者Document
l 沒有子節點
1.1.6 CDATASection
l nodeType的值為4
l nodeName的值為 “#cdata-section”
l nodeValue的值為 CDATA區域中包含的內容
l parentNode的值為Element或者Document
l 沒有子節點
1.1.7 DocumentType
l nodeType的值為10
l nodeName的值為 doctype的名稱
l nodeValue的值為 null
l parentNode的值為Document
l 沒有子節點
1.1.8 DocumentFragment
l nodeType的值為11
l nodeName的值為 ‘#document-fragment’
l nodeValue的值為null
l parentNode的值為null
l 子節點可能是Element，Text，Comment，ProcessingInstruction，CDATASection或者EntityReference
1.1.9 Attr類型
l nodeType的值為2
l nodeName的值為 特性的名稱
l nodeValue的值為特性的值
l parentNode的值為null
l 沒有子節點
?
1.2 DOM操作技術
1.2.1 動態腳本
????? var script = document.createElement('script');
????? script.type = "text/javascript";
????? script.sec = "io.js";
????? document.body.appendChild(script);
1.2.2 動態樣式
????? var link = document.createElement("link");
????? link.rel = "stylesheet";
????? link.type = "text/css";
????? link.href = "io.css";
????? var head = document.getElementsByTagName("head")[0];
????? head.appendChild(link);
1.2.3 操作表格
<table>屬性和方法
l caption
l tBodies
l tFoot
l tHead
l rows
l createTHead()
l createTFoot()
l createCaption()
l deleteTHead()
l deleteTFoot()
l deleteCaption()
l deleteRow(pos)
l insertRow(pos)
<tbody>屬性和方法
l rows
l deleteRow(pos)
l insertRow(pos)
<tr>屬性和方法
l cells
l deleteCell(pos)
l insertCell()pos
1.2.4 使用NodeList
由于NodeList是動態的，在迭代NodeList時，使用length屬性初始化第二個變量，然后將迭代器與該變量比較
轉載于:https://www.cnblogs.com/SLchuck/p/4490723.html
總結
以上是生活随笔為你收集整理的10. javacript高级程序设计-DOM的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 最新爱客影院自动采集源码v3.5.5
- 下一篇： 初步了解java虚拟机