摘要:類型除了該死的其他所有瀏覽器都可以訪問到類型而中所有節點類型都繼承自類型因此所有節點類型都共享著相同的基本屬性和方法每個節點都有一個屬性可以表明節點的類型我們來看看有哪些類型吧和屬性則完全取決于對于元素節點保存的始終為標簽名而保存的值始終為
Node類型
除了IE(該死的IE),其他所有瀏覽器都可以訪問到Node類型,而JS中所有節點類型都繼承自Node類型,因此所有節點類型都共享著相同的基本屬性和方法.
每個節點都有一個nodeType屬性,可以表明節點的類型,我們來看看有哪些類型吧
Node.ELEMENT_NODE(1)
Node.ATTRIBUTE_NODE(2)
Node.TEXT_NODE(3)
Node.CDATA_SECTION_NODE(4)
Node.ENTITY_REFERENCE_NODE(5)
Node.ENTITY_NODE(6)
Node.PROCESSING_INSTRUCTION_NODE(7)
Node.COMMENT_NODE(8)
Node.DOCUMENT_NODE(9)
Node.DOCUMENT_TYPE_NODE(10)
Node.DOCUMENT_FRAGMENT_NODE(11)
Node.NOTATION_NODE(12)
nodeName和nodeValue屬性則完全取決于nodeType,對于元素節點,nodeName保存的始終為標簽名,而nodeValue保存的值始終為null
childNodes屬性中保存著一個NodeList對象(類數組對象,并不是Array的實例),NodeList是動態的,是基于DOM結構動態執行查詢的結果,我們能通過以下方式來訪問子節點.
var firstChild = someNode.childNodes[0]; var secondChild = someNode.childNodes.item(1); var count = someNode.childNodes.length;
對于NodeList對象,我們還可以轉換為數組,如下
var arrayOfNodes = Array.prototype.slice.call(someNode.childNodes,0);
值得注意,該段代碼在IE8及更早版本前是報錯的,這是因為IE8及更早版本將NodeList實現為一個COM對象,而我們不能像使用JScript對象那樣使用該對象,所以上述代碼會導致錯誤.以下是對于兼容性的解決方法.
function convertToArray(nodes){ var array = null; try{ array = Array.prototype.slice.call(nodes,0);//非IE }catch(ex){ array = new Array(); for(var i = 0,len = nodes.length;i < len;i++){ array.push(node[i]); } } return array; }
每個節點還有parentNode屬性,該屬性指向文檔樹中的父節點.包含在childNodes列表中的所有節點都有相同的父節點,而childNodes列表中的每個節點之間為同胞節點,可以通過previousSibling和nextSibling屬性訪問.如果列表只有一個節點,則該節點上述兩個屬性為null.
父節點與其第一個和最后一個子節點之間也存在特殊關系.父節點存在屬性firstChild和lastChild分別指向它們.其中firstChild與childNodes[0]相等,而x.lastChild與x.childNodes[x.childNodes.length-1]相等.
節點中hasChildNodes()方法也是一個有用的方法,在包含節點情況下返回true,否則返回false.
所有節點最后一個屬性都為ownerDocument,它指向表示整個文檔的文檔節點,即#document,可以使我們直接到達頂層.
操作節點注意:關系指針都是只讀的,所以DOM提供了一些函數供我們操作節點.
以下介紹了四種操作方法,都需要先取得父節點,但是需要明白不是所有類型的節點都有/支持子節點.
appendChild(node) //向childNodes列表末尾添加一個節點,并在添加后,關系指針會相應更新.
值得注意的是appendChild()添加的節點如果已經是文檔的一部分,那么相當于轉移節點.
insertBefore(node,null) //參數一為插入節點,第二個參數則為參照節點,設為null則效果與appendChild一樣,存在參照節點則插入節點變成參照節點前一個同胞節點(previousSibling)移除/替換節點
removeChild(oldNode) //移除并非替換節點,返回值為oldNode replaceChild(newNode,oldNode) //oldNode替換為newNode,oldNode雖然技術上仍然存在,但是文檔中沒有了它的位置其他方法
這里有兩個方法是所有類型節點都有的,它們就是cloneNode(boolean)和normalize(),我們重點介紹cloneNode()
cloneNode(boolean) //傳入一個布爾值,該值決定執行深復制(節點及整個節點樹)還是淺復制(僅復制本身)
注意點一:深復制IE9之前版本不會為空白符創建節點,所以深復制時childNodes長度會有所不同.
注意點二:cloneNode()方法只復制特性和子節點(指定情況下),不會復制JS屬性如事件處理程序等等(除開IE,存在復制事件處理程序的bug),所以復制前最好先移除事件處理程序.
除了Document類型,我們Web編程中最常用的類型就是Element類型啦.
Element 類型用于表現XML或HTML元素,提供了對元素標簽名,子節點,特性的訪問
nodeType值為1
nodeName為元素標簽名
nodeValue為null
parentNode可能是Document或Element
子節點可能是Element,Text,Comment,ProcessingInstruction,CDATASection,EntityReference
其中nodeName和tagName屬性返回相同的值,推薦使用tagName,則表義更清晰,值得注意的是返回值大小寫的問題,由于HTML中為答謝,而XML/XHTML則會與源代碼保持一致,所以比較時要統一大小寫形式.
HTML元素都由HTMLElement類型表示,不直接通過該類型,也是通過它的子類型表示.HTMLElement類型繼承自Element并且添加了一些屬性如下:
id 元素在文檔中的唯一標識符
title 元素的附加說明信息,一般為工具提示條顯示
lang 元素內容的語言代碼,很少使用
dir 語言方向,ltr為從左到右,rtl則相反
className 與元素class的特性對應,沒有設置為class則是因為class為ECMAScript的保留字
注意以上屬性的修改并不是所有都會在頁面中直觀的表現出來,id和lang修改對用戶來說是不可見的(假設沒有css樣式),對title的修改則只會在鼠標移動到元素上時才會顯示出來(工具提示條),dir的修改則會在屬性重寫的那一刻立刻影響頁面中的文本,對className的修改則與是否關聯了不同的CSS樣式有關.
特性HTML元素每個元素都有一個或多個特性,操作特性的DOM方法如下有三個:
getAttribute()
setAttribute()
removeAttribute()
這三個方法可以針對任何特性使用,包括自定義特性.
但是只有公認的特性才會添加到DOM元素屬性上,自定義的特性通常是不存在的(undefined),當然這里又要注意我們的"好朋友"IE啦,它會為自定義特性創建屬性.
特殊特性主要針對getAttribute()方法講述一下特殊情況.
有兩類特殊特性,有對應的屬性名,但值與getAttribute()返回的值并不相同
style,通過getAttribute()訪問會返回CSS文本,而通過屬性訪問返回一個對象
onclick這樣的事件處理程序,通過getAttribute()訪問會返回相應代碼的字符串.而屬性訪問時,則會返回一個JavaScript函數(未指定則為null)
故通常只有取得自定義特性值的情況下,才會使用getAttribute()方法.
注意!:我們的"老朋友"IE7及以前版本中,getAttribute()方法訪問上述兩個特殊特性時,返回的值與屬性的值相同.即getAttribute("style")返回一個對象,getAttribute("onclick")返回一個函數.
設置特性這里主要講解下setAttribute()方法,這和getAttribute()相對應.這個方法接受兩個參數,要設置的特性名和值,如果特性存在則將值進行替換;不存在則創建并設置相應的值.
值得注意的是,設置特性名會轉換為小寫.而且直接給DOM元素添加一個自定義的屬性并不會讓這個屬性成為元素的特性.
div.mycolor="red"; div.getAttribute("mycolor"); //這里返回null(IE除外)移除特性
removeAttribute()方法用于徹底刪除元素特性,調用該方法會清除特性的值并完全刪除特性.
注意!:IE6及以前版本不支持該方法.
Element類型是使用attributes屬性的唯一一個DOM節點類型.在該屬性中包含一個NamedNodeMap,與NodeList類似,也是"動態"集合.元素每一個特性都由一個Attr節點表示,每個節點都保存在NamedNodeMap對象中.相關方法如下:
getNamedItem(name)返回nodeName屬性等于name的節點
removeNamedItem(name)從列表移除nodeName等于name的節點
setNamedItem(node)向列表添加節點,以節點的nodeName屬性為索引
item(pos)返回處于數字pos位置處的節點
在該屬性中有一系列的節點,每個節點的nodeName就是特性的名稱,nodeValue就是特性的值.要取得元素的id特性,可以使用attributes.getNamedItem("id").nodeValue
等同于attributes["id"].nodeValue
調用removeNamedItem()與在元素上調用removeAttribute()效果相同.
setNamedItem()是一個很不常用的方法,該方法可以為元素添加一個新特性,此外需要為它傳入一個特性節點.
注意!:IE7及更早版本會返回HTML元素中所有可能的特性,包括沒指定的特性.
針對低版本改進:每個特性節點都有一個名為specified的屬性,如果為true則意味著要么HTML中指定了相應特性,要么通過setAttribute()設置了該特性,在IE中未設置過的特性都為false,其他瀏覽器則不會為這類特性生成對應特性節點.
document.createElement()方法就可創建新元素.
該方法接受一個參數,就是元素標簽名,這個標簽名在HTML下不區分大小寫,XML中則會區分大小寫.
在創建新元素的同時,新元素也設置了ownerDocument屬性,此時,還可以操作元素特性,為它添加更多的子節點.
在設置完特性后,由于未添加到文檔樹,所以一切特性都不會影響瀏覽器的顯示.我們可以通過之前講到的appendChild(),insertBefore(),replaceChild()方法來進行相應的操作.
一旦添加到文檔樹,則瀏覽器會立刻呈現該元素.此后我們的修改都會反應到瀏覽器中.
注意!(常不考慮):在IE中我們可以通過另一種方式進行創建
document.createElement("");
這個方式可以避開IE7及更早版本中動態創建元素的某些問題.(不能設置動態創建的iframe元素的name特性;不能通過表單的reset()方法重設動態創建的input元素;動態創建的type特性值為"reset"的button元素重設不了表單;動態創建的一批name相同的單選按鈕彼此毫無關系)
元素子節點
除了IE,其他瀏覽器解析代碼時會解析空白符為文本節點.我們可以通過nodeType屬性的檢查來過濾掉它們.
在JavaScript中Document類型表示文檔,我們常用的document對象是HTMLDocument(繼承自Document類型)的一個實例,表示整個HTML頁面;document對象還是window對象的一個屬性,因此可以將其作為全局對象來訪問.
特征nodeType值為9
nodeName為"#document"
nodeValue為null
parentNode為null
ownerDocument為null
子節點可能是一個DocumentType(最多一個),Element(最多一個),ProcessingInstruction或Comment
Document類型可以表示HTML頁面或者其他基于XML的文檔,不過最常見的應用還是作為HTMLDocument實例的document對象.通過該對象,我們可以獲取頁面有關信息,操作頁面的外觀,以及其底層結構.
雖然DOM標準規定Document節點的子節點可以是DocumentType,Element,ProcessingInstruction或Comment,但是還有兩個內置的訪問其子節點的快捷方式.
一:documentElement屬性-始終指向HTML頁面中的元素
二:childNodes列表
并且如下代碼所示
//html部分 // // // var html = document.documentElement; console.log(html === document.childNodes[0]); //true console.log(html === document.firstChild); //true
可見documentElement,firstChild,childNodes[0]指向同一個元素
并且作為HTMLDocument的實例,還有一個body屬性,直接指向元素.
所有瀏覽器都支持document.documentElement和document.body屬性
DocumentType節點(不重要)節點可以通過document.doctype屬性獲取并訪問它的信息.
以下是各瀏覽器支持差別:
IE8及之前:存在文檔類型聲明,會錯誤解釋為一個注釋并把它當作Comment節點;而document.doctype 值始終為null
IE9+及firefox:如果存在文檔類型聲明,則會將其作為文檔第一個子節點;document.doctype是一個DocumentType節點,也可以通過document.firstChild或document.childNodes[0]訪問.
Safari,Chrome和Opera:如果存在文檔類型聲明,則會將其解析,但不作為文檔子節點,document.doctype是一個DocumentType節點,但該節點不存在于document.childNodes中.
Comment(不重要)對于上述注釋也在不同瀏覽器中存在不同.
IE8及之前,Safari3.1及更高,Opera和chrome:只為第一條注釋創建節點,部位第二條注釋創建節點.
IE9+:將第一條注釋創建為document.childNodes中的一個注釋節點,也將第二條注釋創建為document.childNodes中的注釋子節點
Safari3.1之前,firefox:完全忽略
以上的不一致性導致了無論是注釋還是DocumentType節點對于我們來說用處十分有限.
文檔信息document對象有屬性提供了document對象所表現的網頁的一些信息.
title:包含在
URL:包含頁面完整的URL
domain:包含頁面的域名
referrer:保存鏈接到當前頁面的那個頁面的URL,如無來源頁面則為空字符串.
注意!:這些信息都存在于HTTP頭部,只不過我們能通過該屬性在JS中訪問它們.而且我們只能在遵守規則(不能將這個屬性設置為URL中不包含的域,不能將域縮緊如將wrox.com設置為p2p.wrox.com一樣(IE8及之后))的情況下設置domain屬性.
其中domain屬性還是越過跨域安全限制的好辦法.
查找元素主要用到document對象以下方法.
getElementById("id") //接受一個參數,如果找到相應元素則返回該元素,不存在則返回null //注意!:IE8及較低版本不區分ID大小寫/如果存在多個ID則只返回第一次出現的/IE7及較低版本中name值與ID匹配的表單元素會被返回 getElementsByTagName("img") //接受一個參數,為要取得元素的標簽名,返回一個NodeList(包含零或多個元素).在HTML文檔中,這個方法返回一個HTMLCollection對象,該對象與NodeList非常類似 getElementsByName("name") //只有HTMLDocument類型才有的方法.和上述兩個方法相似,也就不解釋傳入參數之類的啦HTMLCollection對象
元素數量可以通過length獲得,而且我們可以通過.item()和方括號語法[0]/["name特性"]來訪問元素.namedItem()方法則可以通過name特性取得其中的元素.
特殊集合除了屬性和方法,document對象還有一些特殊集合.這些集合都是HTMLCollection對象,為訪問文檔常用部分提供了快捷方式,如下:
document.anchors 包含文檔中所有帶name特性的元素
document.applets 包含文檔中所有的元素(已不再推薦使用)
document.forms 包含文檔中所有元素
document.images 包含文檔中所有元素
document.links 包含文檔中所有帶href特性的元素
該集合始終可以通過HTMLDocument對象訪問到.而且是動態的隨著當前文檔內容的更新而更新.
document.implementation屬性就是用在檢測瀏覽器實現了DOM的哪些部分.
document.implementation.hasFeature()方法接受兩個參數,要檢測的DOM功能名稱和版本號,如果瀏覽器支持則返回true.但是這并不代表著實現與規范一致
document對象有一個存在很久的功能,將輸出流寫入到網頁中的能力.這關乎到下列4個方法.
write()
writeln()
上面兩個方法都是接受一個字符串參數,writeln()額外在字符串寫入后再寫入一個換行符
注意!:如果要用于寫入則要對進行轉義=>,防止script標簽被提前閉合導致無法執行;如果在文檔接在結束后再調用則會導致整個頁面重寫.
open()
close()
上述兩個方法用于打開和關閉網頁的輸出流,如果在頁面加載期間使用write()和writeln()則不需要用到這兩個方法(嚴格型的XHTML文檔不支持文檔寫入)
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/91034.html
摘要:主要介紹不常用的類型這里介紹我們的其他類型包括以下幾個類型類型類型類型類型類型類型類型文本節點由類型表示特征值為為為節點包含的文本是一個不支持沒有子節點我們可以通過訪問節點包含的文本方法將添加到節點末尾從指定位置開始刪除個字符從指定 主要介紹不常用的DOM類型 這里介紹我們的其他類型,包括以下幾個類型: Text類型 Comment類型 CDATASection類型 Document...
摘要:簡介簡史誕生于年,當時主要負責表單的輸入驗證。實現一個完整的由三部分組成核心文檔對象模型瀏覽器對象模型就是對實現該標準規定的各個方面內容的語言的描述。把整個頁面映射為一個多層節點結構。由萬維網聯盟規劃。主要目標是映射文檔的結構。 JavaScript簡介 JavaScript簡史 JavaScript誕生于1995年,當時主要負責表單的輸入驗證。 如果沒有表單驗證的功能,填入信息之...
摘要:在基于使用命名空間的文檔求值時,需要使用對象。第四個參數的取值類型是下列常量之一,返回與表達式匹配的數據類型。,返回字符串值。這是最常用的結果類型。集合中節點的次序與它們在文檔中的次序一致。 JavaScript與XML 瀏覽器對XML DOM的支持 DOM2級核心 在通過JavaScript處理XML時,通常只使用參數root,因為這個參數指定的是XML DOM文檔元素的標簽名 v...
摘要:為屬性賦值匿名函數事件作用域使用級方法指定的事件處理程序被認為是元素的方法。最后這個布爾值參數如果是,表示在捕獲階段調用事件處理程序如果是,表示在冒泡階段調用事件處理程序。 事件捕獲和事件冒泡 DOM2級事件規定的事件流包括三個階段:事件捕獲、處于目標階段和事件冒泡。首先發生的是事件捕獲,從外部節點到內部節點依次遍歷,為截獲事件提供了機會。然后是實際的目標接收到事件。最后一個階段是冒泡...
摘要:為屬性賦值匿名函數事件作用域使用級方法指定的事件處理程序被認為是元素的方法。最后這個布爾值參數如果是,表示在捕獲階段調用事件處理程序如果是,表示在冒泡階段調用事件處理程序。 事件捕獲和事件冒泡 DOM2級事件規定的事件流包括三個階段:事件捕獲、處于目標階段和事件冒泡。首先發生的是事件捕獲,從外部節點到內部節點依次遍歷,為截獲事件提供了機會。然后是實際的目標接收到事件。最后一個階段是冒泡...
閱讀 3196·2021-11-18 10:02
閱讀 1446·2021-10-12 10:08
閱讀 1239·2021-10-11 10:58
閱讀 1269·2021-10-11 10:57
閱讀 1167·2021-10-08 10:04
閱讀 2121·2021-09-29 09:35
閱讀 773·2021-09-22 15:44
閱讀 1269·2021-09-03 10:30