當頁面加載時,瀏覽器會創建頁面的文檔對象模型(Document Object Model)。文檔對象模型定義訪問和處理HTML文檔的標準方法。DOM 將HTML文檔呈現為帶有元素、屬性和文本的樹結構,即節點樹。通過DOM,JS可創建動態的HTML,可以使網頁顯示動態效果并實現與用戶的交互功能。JS能夠改變頁面中所有的HTML元素、屬性和CSS樣式,并對頁面中所有事件做出響應。所以學習JS的起點就是處理網頁,處理網頁就需要使用DOM進行操作。
2、DOM獲取元素。
JS要想操作HTML元素,那么首先就必須先找到該元素。通常使用以下幾種方法完成:
通過元素設置的id找到HTML元素。
通過標簽名找到HTML元素。
通過元素設置的名稱(name)找到HTML元素。
所謂的DOM,實際上就是document,獲取元素就是操作document。
(1)、通過id找到元素
方法:document.getElementById('id');
網頁是由標簽將信息組合起來的,id屬性值是唯一的,就像身份證一樣,通過一個身份證可以找到相對應的人,所以通過該方法,可以獲取到與之相對應的標簽,而獲取的元素在JS中是一個對象,若想對元素進行操作,則需要通過他的屬性或方法。
(2)、通過標簽名找到元素
方法:document.getElementsByTagName('Tagname');
通過該方法,返回的是帶有指定標簽名的對象的集合,也就是以數組的形式返回,返回的順序是他們在文檔中的順序。
(3)、通過name找到元素
方法:document.getElementsByName('name');
該方法與getElementById()方法有點相似,都是通過設置的屬性值找到元素,只不過該方法是通過設置的name屬性值查找元素。name屬性在文檔中可能不唯一,所以該方法返回的也是元素的數組,而不是一個元素。
HTML文檔可以說是由節點構成的集合,常見的DOM節點有三種,即元素節點、屬性節點和文本節點。元素節點就是HTML標簽,標簽的屬性就是屬性節點,文本節點就是頁面可以瀏覽的內容。
在文檔對象模型中,每一個節點都是一個對象,DOM節點有三個重要的屬性:節點的名稱,節點的值和節點的類型。
(1)、nodeName:節點的名稱
nodeName屬性返回節點的名稱。元素節點的名稱與標簽名相同(大寫),屬性節點的名稱是屬性的名稱,文本節點的名稱永遠都是#text,文檔節點的名稱永遠都是#document。
(2)、nodeValue:節點的值
nodeValue屬性返回節點的值。元素節點的值是undegined或null,屬性節點的值是屬性的值,文本節點的值是文本自身。
(3)、nodeType:節點的類型
nodeType屬性返回節點的類型。以下是常見的節點類型:
聲明:本網頁內容旨在傳播知識,若有侵權等問題請及時與本網聯系,我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com
JavaScriptDOM學習總結(五)_javascript技巧
JavaScriptDOM學習總結(五)_javascript技巧:1、DOM簡介。 當頁面加載時,瀏覽器會創建頁面的文檔對象模型(Document Object Model)。文檔對象模型定義訪問和處理HTML文檔的標準方法。DOM 將HTML文檔呈現為帶有元素、屬性和文本的樹結構,即節點樹。通過DOM,JS可創建動態的HTML,可以使網頁顯示推薦度:
- 熱門焦點