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