摘要:但上述兩個情況中都是同一份文檔。提示對象是對象的一部分,可通過屬性對其進行訪問。返回包含指定節點的子節點的集合,該集合為即時更新的集合。對象在中,對象表示元素屬性節點的無序集合。
DOM簡介( Document Object Model 文檔對象模型) W3C
W3C 文檔對象模型 (DOM) 是中立于平臺和語言的接口,它允許程序和腳本動態地訪問和更新文檔的內容、結構和樣式。
W3C DOM 標準被分為 3 個不同的部分:
核心 DOM - 針對任何結構化文檔的標準模型
XML DOM - 針對 XML 文檔的標準模型
HTML DOM - 針對 HTML 文檔的標準模型
也就是說,DOM包含三個版本(?),對應不同的DOM模型,由于我對XML還不是很了解,這里主要先討論HTML DOM
關于XML DOM 的W3C文檔:XML DOM 教程 MDN:DOM概述 XML與HTML的區別 XML DOM解析 基礎概念 什么是 HTML DOM?引自W3C:
HTML的標準對象模型
HTML 的標準編程接口
W3C 標準
HTML DOM 定義了所有 HTML 元素的對象和屬性,以及訪問它們的方法。
換言之,HTML DOM 是關于如何獲取、修改、添加或刪除 HTML 元素的標準
引自MDN:
文檔對象模型 (DOM) 是HTML和XML文檔的編程接口。它提供了對文檔的結構化的表述,并定義了一種方式可以使從程序中對該結構進行訪問,從而改變文檔的結構,樣式和內容。DOM 將文檔解析為一個由節點和對象(包含屬性和方法的對象)組成的結構集合。簡言之,它會將web頁面和腳本或程序語言連接起來。
一個web頁面是一個文檔。這個文檔可以在瀏覽器窗口或作為HTML源碼顯示出來。但上述兩個情況中都是同一份文檔。文檔對象模型(DOM)提供了對同一份文檔的另一種表現,存儲和操作的方式。 DOM是web頁面的完全的面向對象表述,它能夠使用如 JavaScript等腳本語言進行修改。
我們之所以能夠對Web頁面進行添加、刪除、更新、操控元素等等活動,就是因為這個DOM才得以實現。它定義了一套對象(方法)規則,使得JavaScript可以根據這些規則來進行編程。更像是一個文檔API
DOM 節點(Node)節點樹根據 W3C 的 HTML DOM 標準,HTML 文檔中的所有內容都是節點:
整個文檔是一個文檔節點
每個HTML元素是元素節點
HTML元素內的文本是文本節點
每個HTML屬性是屬性節點
注釋是注釋節點
HTML DOM 將 HTML 文檔視作樹結構。這種結構被稱為節點樹:
這也被稱為W3C DOM 1級核心Temperature Conversion
W3C的DOM Level 1 Core是用于更改文檔內容樹的強大對象模型。所有主流瀏覽器都支持Mozilla Firefox和Microsoft Internet Explorer。它是網絡上腳本編寫的強大基礎。怎么稱呼這些元素?
例:
DOM 教程 DOM 第一課
Hello world!
節點沒有父節點;它是根節點
和 的父節點是 節點
文本節點 "Hello world!" 的父節點是
節點
且
節點擁有兩個子節點: 和
節點擁有一個子節點:
和 節點是同胞節點
并且
元素是 元素的首個子節點
元素是 元素的最后一個子節點
元素是 元素的首個子節點
元素是 元素的最后一個子節點
DOM 處理中的常見錯誤是希望元素節點包含文本。HTML DOM 首先記住這個:在本例中:
DOM 教程 ,元素節點,包含值為 "DOM 教程" 的文本節點。
在 HTML DOM (文檔對象模型)中,每個部分都是節點:DOM Document文檔本身是文檔節點
所有HTML元素是元素節點
所有 HTML 屬性是屬性節點
HTML元素內的文本是文本節點
注釋是注釋節點
每個載入瀏覽器的 HTML 文檔都會成為 Document 對象。 Document對象使我們可以從腳本中對 HTML 頁面中的所有元素進行訪問。 提示:Document 對象是 Window 對象的一部分,可通過 window.document 屬性對其進行訪問。document.URL
URL 屬性可返回當前文檔的 URL。
比如在現在的窗口下,控制臺輸入:
alert(document.URL)document.getElementById()
這個大家都很熟悉了,getElementById() 方法可返回對擁有指定 ID 的第一個對象的引用。
W3C還定義了一個工具函數:getElementById() 是一個重要的方法,在 DOM 程序設計中,它的使用非常常見。我們為您定義了一個工具函數,這樣您就可以通過一個較短的名字來使用 getElementById() 方法了:
function id(x) { if (typeof x == "string") return document.getElementById(x); return x; } // 上面這個函數接受元素 ID 作為它們的參數。使用前編寫 x = id(x) 就可以了。document.getElementsByName()
getElementsByName() 方法可返回帶有指定名稱的對象的集合。
該方法與 getElementById() 方法相似,但是它查詢元素的 name 屬性,而不是 id 屬性。
另外,因為一個文檔中的 name 屬性可能不唯一(如 HTML 表單中的單選按鈕通常具有相同的 name 屬性),所有 getElementsByName() 方法返回的是元素的數組,而不是一個元素。
由于這個方法返回的是一個數組,不是具體的元素,所以必須注意這點:
document.getElementsByTagName()
注意要和上面的區分,TagName指的是標簽名
getElementsByTagName() 方法可返回帶有指定標簽名的對象的集合,返回元素的順序是它們在文檔中的順序。 如果把特殊字符串 "*" 傳遞給 getElementsByTagName() 方法,它將返回文檔中所有元素的列表,元素排列的順序就是它們在文檔中的順序。注釋:傳遞給 getElementsByTagName() 方法的字符串可以不區分大小寫。
document.write()
write() 方法可向文檔寫入 HTML 表達式或 JavaScript 代碼。
可列出多個參數(exp1,exp2,exp3,...) ,它們將按順序被追加到文檔中。
document.write("Hello World!");關于Document的更多屬性方法可查W3C:HTML DOM Document 對象 DOM Element 簡介:
element.parentNode在 HTML DOM 中,Element 對象表示 HTML 元素(所有 HTML 元素是元素節點)。
Element 對象可以擁有類型為元素節點、文本節點、注釋節點的子節點。
NodeList 對象表示節點列表,比如 HTML 元素的子節點集合。
元素也可以擁有屬性。屬性是屬性節點(參見DOM Attribute)。
parentNode 屬性以 Node 對象的形式返回指定節點的父節點。
如果指定節點沒有父節點,則返回 null。
element.styleH1
HTMLElement.style 屬性返回一個 CSSStyleDeclaration 對象,表示元素的 內聯style 屬性(attribute),但忽略任何樣式表應用的屬性。 通過 style 可以訪問的 CSS 屬性列表,可以查看 CSS Properties Reference。
H1
elt.style.cssText = "color: blue"; 設置多個樣式屬性 elt.setAttribute("style", "color: blue"); 設置多個樣式屬性 elt.style.color = "blue"; 直接設置樣式屬性 var st = elt.style; st.color = "blue"; 間接設置樣式屬性element.childNodes;通常,要了解元素樣式的信息,僅僅使用 style 屬性是不夠的,這是因為它只包含了在元素內嵌 style 屬性(attribute)上聲明的的 CSS 屬性,而不包括來自其他地方聲明的樣式,如
部分的內嵌樣式表,或外部樣式表。要獲取一個元素的所有 CSS 屬性,你應該使用 window.getComputedStyle()。
childNodes 屬性返回節點的子節點集合,以 NodeList 對象。
提示:您可以使用 length 屬性來確定子節點的數量,然后您就能夠遍歷所有的子節點并提取您需要的信息。
Node.childNodes 返回包含指定節點的子節點的集合,該集合為即時更新的集合(live collection)。
獲得的Nodelist是實時更新的,如果你新增一個子節點,下次調用chilNodes屬性返回的Nodelist會變化(更新)。
Nodelist不是數組!這一點很重要
MDN:Node.childNodes、NodeList 深入理解 NodeList - 挨踢前端 - 博客園 由于這個特性,所以一般推薦使用.childrenjQuery 遍歷 - children() 方法 DOM Attribute Attr 對象 this is divthis is H1
this is H2
這是DIV2的文本節點Element P
在 HTML DOM 中,Attr 對象表示 HTML 屬性。
HTML 屬性始終屬于 HTML 元素。
NamedNodeMap 對象在 HTML DOM 中,NamedNodeMap 對象表示元素屬性節點的無序集合。
NamedNodeMap 中的節點可通過名稱或索引(數字)來訪問。
這段代碼首先獲得inputHTML元素,然后調用attributes返回NameNodeMap屬性節點集合,里面的屬性以鍵值對方式存在,之后調用value屬性的屬性值。
attribute.setNamedItem()setNamedItem() 方法向 nodeMap 添加指定的節點。
如果此節點已存在,則將替換該節點,并返回被替換的節點,否則返回值是 null。
var i = document.getElementById("input"); var c = document.createAttribute("class"); c.nodeValue = "cla"; i.attributes.setNamedItem(c)
創建屬性節點,設置節點值,添加到元素節點下,然后設置屬性節點,這里用的是attributes方法,即namednodemap.removeNamedItem(nodename)
添加屬性節點也可以使用element.setAttributeNode(attributenode)方法;
關于更多:HTML DOM Attribute 對象,其中提到了不要在屬性節點上使用節點對象的屬性和方法 常用方法:HTML DOM 關于事件一章我會另開一篇博文繼續研究文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/83061.html
摘要:發布后不久,微軟就在其中加入了名為的實現命名為是為了避開與有關的授權問題。以現在的眼光來看,微軟年月為進入瀏覽器領域而實施的這個重大舉措,是導致日后蒙羞的一個標志性時間。微軟推出其實現意味著有了兩個不同的版本中的中的。 JavaScript簡介 前言:最近在細讀Javascript高級程序設計,對于我而言,中文版,書中很多地方一筆帶過,所以用自己所理解的,嘗試細致解讀下。如有紕漏或錯...
摘要:簡介原文鏈接簡稱是一種輕量級,解釋型的編程語言,其函數是一等公民。標準的目標是讓任何一種程序設計語言能操控使用任何一種標記語言編寫出的任何一份文檔。核心規定了如何映射基于的文檔結構,以便簡化對文檔的任意部分的訪問和操作。 JavaScript 簡介 原文鏈接 JavaScript ( 簡稱:JS ) 是一種 輕量級,解釋型 的編程語言,其函數是一等公民。眾所周知,它是用于網頁開發的腳...
摘要:以下內容都是一些概念性的知識點弄懂這些基本的概念是我們在世界看得更遠的墊腳石誕生于年年公司開發發布時臨時將名字改為當時它的主要目的是處理以前由服務端語言負責的輸入驗證操作隨著其發展現在已不再局限于數據驗證而是具備了與瀏覽器窗口及其內容等幾乎 以下內容都是一些概念性的知識點,弄懂這些基本的概念是我們在JavaScript世界看得更遠的墊腳石. Javascript Javascript誕...
摘要:瀏覽器只是實現的宿主環境之一,其他宿主環境包括和。年月,版發布,成為國際標準。事件定義了事件和事件處理的接口。對于已經正式納入標準的來說,盡管各瀏覽器都實現了某些眾所周知的共同特性,但其他特性還是會因瀏覽器而異。 JavaScript 是面向 Web 的編程語言,絕大多數現代網站都使用了 JavaScript,并且所有的現代 Web 瀏覽器(電腦,手機,平板)均包含了 JavaScri...
摘要:中主要關注的就是,對象的主要功能就是處理網頁內容。中文翻譯模型,如果你把這個詞從中抽離出來,看下面的圖片是不是就很好理解。年月制定的標準,由兩大部分組成核心和。擴展鼠標和用戶界面事件范圍遍歷,增加了對支持。 往期回顧 在上一期的《JavaScript的組成 | 核心-ECMAScript 》?里,我們有說到JavaScript 是由三大部分組成,分別是:核心ECMAScript、文檔對...
閱讀 2045·2023-04-26 02:23
閱讀 1789·2021-09-03 10:30
閱讀 1351·2019-08-30 15:43
閱讀 1191·2019-08-29 16:29
閱讀 530·2019-08-29 12:28
閱讀 2332·2019-08-26 12:13
閱讀 2169·2019-08-26 12:01
閱讀 2400·2019-08-26 11:56