摘要:類型對象是的一個實例,表示整個頁面,而且,對象是對象的一個屬性,因此可以將其作為全局對象來訪問。刪除指定位置的行。創建創建創建第一行創建第二行將表格添加到文檔主體中
DOM 節點層次 Node類型
DOM1級定義了一個Node接口,該接口將由DOM中的所有節點類型實現
節點類型由在Node類型中定義的12個數值常量來表示,任何節點類型必居其一
Node.ELEMENT_NODE();
Node.ATTRIBUTE_NODE();
Node.TEXT_NODE();
Node.CDATA_SECTION_NODE();
Node.ENTITY_REFERENCE_NODE();
Node.ENTITY_NODE();
Node.PROCESSING_INSTRUCTION_NODE();
Node.COMMENT_NODE();
Node.DOCUMENT_NODE();
Node.DOCUMENT_TYPE_NODE();
Node.DOCUMENT_FRAGMENT_NODE();
Node.NOTATION_NODE();
使用nodeName和nodeValue檢測節點類型
節點關系,保存NodeList對象,是一種數組對象,用于保存一組有序的節點,可以通過位置來訪問這些節點。
childNodes
var firstChild=someNode.childNodes(); var secondChild=someNode.childNodes.item(); var count=someNode.childNodes.length();
parentNode,每個節點都有parentNode屬性,屬性指向文檔樹的節點,包含在childNodes列表中的所有節點都具有相同的父節點,因此它們的parentNode屬性都指向同一個節點。此外包含在childNodes列表中的每個節點相互之間都是同胞節點。
通過使用列表中每個節點的previousSibling和nextSibling屬性可以訪問同一列表中的其他節點。列表中第一個節點的previousSibling屬性值為null,而列表中最后一個節點nextSibling屬性的值同樣也為null
父節點的firstChild和lastChild屬性分別指向childNodes列表中的第一個和最后一個節點。
操作節點
appendChild(),向childNodes列表的末尾添加一個節點。添加節點之后,childNodes的新曾節點、父節點以及以前的最后一個子節點的關系都會相應地得到更新
//someNode 有多個子節點 var returnedNode = someNode.appendChild(someNode.firstChild); alert(returnedNode == someNode.firstChild); //false alert(returnedNode == someNode.lastChild); //true
insertBefore(),把節點放在childNodes列表中某個特定的位置上。接收兩個參數,要插入的點和作為參照的節點
//插入后成為最后一個子節點 returnedNode = someNode.insertBefore(newNode, null); alert(newNode == someNode.lastChild); //true //插入后成為第一個子節點 var returnedNode = someNode.insertBefore(newNode, someNode.firstChild); alert(returnedNode == newNode); //true alert(newNode == someNode.firstChild); //true //插入到最后一個子節點前面 returnedNode = someNode.insertBefore(newNode, someNode.lastChild); alert(newNode == someNode.childNodes[someNode.childNodes.length-2]); //true
replaceChild(),替換節點。接收兩個參數,要插入的節點和要替換的節點,要替換的節點將由這個方法返回并從文檔樹中移除,同時由要插入的節點占據其位置
//替換第一個子節點 var returnedNode = someNode.replaceChild(newNode, someNode.firstChild); //替換最后一個子節點 returnedNode = someNode.replaceChild(newNode, someNode.lastChild);
removeChild(),移除節點,接收一個參數,即要移除的節點。
//移除第一個子節點 var formerFirstChild = someNode.removeChild(someNode.firstChild); //移除最后一個子節點 var formerLastChild = someNode.removeChild(someNode.lastChild);
cloneNode(),接收一個布爾值參數,表示是否執行深復制,在參數為true的情況下,執行深復制,也就是復制節點及其整個子節點樹,在參數為false的情況下,執行淺復制,即只復制節點本身。
Document類型
document對象是HTMLDocument的一個實例,表示整個HTML頁面,而且,document對象是window對象的一個屬性,因此可以將其作為全局對象來訪問。
nodeType值為9
nodeName值為"#document"
nodeValue值為null
parentNode值為null
ownerDocument值為null
document對象有一些標準的Document對象所沒有的屬性,這些屬性提供了document對象所表現的網頁的一些信息
//取得文檔標題 var originalTitle = document.title; //設置文檔標題 document.title = "New page title"; //取得完整的 URL var url = document.URL; //取得域名 var domain = document.domain; //取得來源頁面的 URL var referrer = document.referrer;
查找元素,getElementById()、getElementByTagName()和getElementByName()
特殊集合
document.anchors,包含文檔中所有帶name特性的元素
document.applets,包含文檔中所有的
document.forms,包含文檔中所有的
document.images,包含文檔中所有的元素
document.links,包含文檔中所有帶href特性的元素
文檔寫入功能,write()、writeln()、open()和close()
Element類型document.write() Example The current date and time is:
用于表現XML或HTML元素,提供了對元素標簽名、子節點及特性的訪問
nodeType值為1
nodeName值為元素的標簽名
nodeValue值為null
parentNode可能是Document或Element
HTML元素存在一些標準特性
id,元素在文檔中唯一的標識符
title,有關元素的附加說明信息,一般通過工具提示條顯示出來
lang,元素內容的語言代碼,很少使用
dir,語言的方向
className,與元素的class特性對應
取得特性,設置屬性,移除屬性。getAttribute()、setAttribute()和removeAttribute()
var div = document.getElementById("myDiv"); alert(div.getAttribute("id")); //"myDiv" alert(div.getAttribute("class")); //"bd" alert(div.getAttribute("title")); //"Body text" alert(div.getAttribute("lang")); //"en" alert(div.getAttribute("dir")); //"ltr" div.setAttribute("id", "someOtherId"); div.setAttribute("class", "ft"); div.setAttribute("title", "Some other text"); div.setAttribute("lang","fr"); div.setAttribute("dir", "rtl"); div.removeAttribute("class");
attribute屬性
var id = element.attributes.getNamedItem("id").nodeValue; var id = element.attributes["id"].nodeValue; element.attributes["id"].nodeValue = "someOtherId"; var oldAttr = element.attributes.removeNamedItem("id"); element.attributes.setNamedItem(newAttr);
創建元素,createElement(),標簽名在HTML文檔中不區分大小寫,在XML文檔中,區分大小寫。
Text類型
包含的是照字面解釋的純文本的內容
nodeType值為3
nodeName值為"#text"
nodeValue值為節點所包含的文本
parentNode是一個Element
不支持子節點
操作方法
appendData(text)將text添加到節點的末尾
deleteData(offset,count)從offset指定的位置開始刪除count個字符
insertData(offset,text)從offset指定的位置插入text
replaceData(offset,count,text)用text替換從offset指定的位置開始到offset+count為止處的文本
splitText(offset)從offset指定的位置將當前文本節點分成兩個文本節點
substringData(offset,count)提取從offset指定的位置開始到offset+count為止處的字符串
創建文本節點document.createTextNode()
var element = document.createElement("div"); element.className = "message"; var textNode = document.createTextNode("Hello world!"); element.appendChild(textNode); document.body.appendChild(element);
規范化文本節點normalize()
var element = document.createElement("div"); element.className = "message"; var textNode = document.createTextNode("Hello world!"); element.appendChild(textNode); var anotherTextNode = document.createTextNode("Yippee!"); element.appendChild(anotherTextNode); document.body.appendChild(element); alert(element.childNodes.length); //2 element.normalize(); alert(element.childNodes.length); //1 alert(element.firstChild.nodeValue); // "Hello world!Yippee!"
分割文本節點splitText()
var element = document.createElement("div"); element.className = "message"; var textNode = document.createTextNode("Hello world!"); element.appendChild(textNode); document.body.appendChild(element); var newNode = element.firstChild.splitText(5); alert(element.firstChild.nodeValue); //"Hello" alert(newNode.nodeValue); //" world!" alert(element.childNodes.length); //2Comment類型
注釋在DOM中通過Comment類型來表示
nodeType值為8
nodeName值為"#comment"
nodeValue值是注釋的內容
parentNode可能是Document或Element
不支持子節點
COmment類型與Text類型繼承自相同的基類,因此它擁有splitText()之外的所有字符串操作方法。與Text類型相似,也可以通過nodeValue或data屬性類取得注釋的內容。
使用document.createCommet()并為其傳遞注釋文本也可以創建注釋節點
var comment=document.createComment("A comment")CDATASection類型
與Comment類似,繼承自Text類型,擁有除splitText()之外的所有字符串操作方法
nodeType值為4
nodeName值為"#cdata-section"
nodeValue值為CDATA區域中的內容
parentNode可能是Document或Element
DocumentType類型
包含著與文檔的doctype有關的所有信息
nodeType值為10
nodeName值為doctype的名稱
nodeValue值為null
parentNode是Document
不支持子節點
DocumentFragment類型
輕量級文檔,可以包含和控制節點,不會像完整的文檔那樣占用額外的資源
nodeType值為11
nodeName值為"#document-fragement"
nodeValue值為null
parentNode值為null
Attr類型
特性是存在于元素的attribute屬性中的節點
nodeType值為2
nodeName值是特性的名稱
nodeValue值為特性的值
parentNode值為null
在HTML中不支持子節點
在XML中子節點可以是Text或EntityReference
DOM操作技術 動態腳本頁面加載時不存在,但將來的某一時刻通過修改DOM動態添加的腳本。兩種方式創建:插入外部文件和直接插入JavaScript代碼
動態樣式能夠把CSS樣式包含到HTML頁面中的元素有兩個,其中