常見的DOM操作有哪些?

大家好~ ?我是一枚正直純潔的苦逼程序員!!!!!

常見DOM操作有哪些?

1.背景介紹

DOM是什么? DOM 是 Document Object Model(文檔對象模型)的縮寫。

DOM是中立于平臺和語言的接口,它允許程序和腳本動態地訪問和更新文檔的內容、結構和樣式。

在 HTML DOM中,所有事物都是節點。DOM 是被視為節點樹的 HTML。

2.知識剖析

什么是DOM節點?

HTML 文檔中的所有內容都是節點

整個文檔是一個文檔節點

每個 HTML 元素是元素節點

HTML 元素內的文本是文本節點

每個 HTML 屬性是屬性節點

注釋是注釋節點

3.常見問題

常見的DOM操作,訪問元素的方法和DOM屬性有哪些?

4.解決方案

一.常見的dom操作

通過使用 getElementById() 方法。

通過使用 getElementsByTagName() 方法

通過使用 getElementsByClassName() 方法。

二.訪問屬性的方法

getElementsByTagName() 方法

可返回帶有指定標簽名的對象的集合。

返回元素的順序是它們在文檔中的順序。

傳遞給 getElementsByTagName() 方法的字符串可以不區分大小寫。

getElementsByClassName() 方法

獲取所有指定類名的元素:

getElementsByClassName() 方法返回文檔中所有指定類名的元素集合,作為 NodeList 對象。

NodeList 對象代表一個有順序的節點列表。NodeList 對象 我們可通過節點列表中的節點索引號來訪問列表中的節點(索引號由0開始)。

可以使用 NodeList 對象的 length 屬性來確定指定類名的元素個數,并循環各個元素來獲取你需要的那個元素。

getElementById() 方法

getElementById() 方法可返回對擁有指定 ID 的第一個對象的引用。

如果您需要查找文檔中的一個特定的元素,最有效的方法是 getElementById()。

在操作文檔的一個特定的元素時,最好給該元素一個 id 屬性,為它指定一個(在文檔中)唯一的名稱,然后就可以用該 ID 查找想要的元素。

常見的DOM屬性

1. innerHTML 屬性

獲取元素內容的最簡單方法是使用 innerHTML 屬性。

innerHTML 屬性對于獲取或替換 HTML 元素的內容很有用。

2. nodeName 屬性

nodeName 屬性規定節點的名稱。

nodeName 是只讀的

元素節點的 nodeName 與標簽名相同

屬性節點的 nodeName 與屬性名相同

文本節點的 nodeName 始終是 #text

文檔節點的 nodeName 始終是 #document

3.nodeValue 屬性

nodeValue 屬性規定節點的值。

元素節點的 nodeValue 是 undefined 或 null

文本節點的 nodeValue 是文本本身

屬性節點的 nodeValue 是屬性值

5.編碼實戰

dome

6.擴展思考

修改元素的html內容和css樣式的方法

改變 HTML 內容

document.getElementById("p1").innerHTML="New text!";

改變 CSS 樣式

document.getElementById("p2").style.color="blue";

7.參考文獻

W3School HTML 表單

8.更多討論

1.除了這三種方法還有那些方法?

解決:

document/element.querySelector('CSS選擇器');

document/element.querySelectorAll('CSS選擇器');

document.createTextNode('文本內容');等等

2.對下標的理解?

解決:

下標就是從0開數

3.改變 CSS 樣式還可以用什么屬性?

解決:

classNane

ppt

視頻

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容

  • 大家好,我是IT修真院北京分院第23期學員。今天小課堂的主要內容是,input表單的應用,還有在html5中新增的...
    AmaYang閱讀 10,754評論 0 1
  • Spring Cloud為開發人員提供了快速構建分布式系統中一些常見模式的工具(例如配置管理,服務發現,斷路器,智...
    卡卡羅2017閱讀 134,837評論 18 139
  • 問答題47 /72 常見瀏覽器兼容性問題與解決方案? 參考答案 (1)瀏覽器兼容問題一:不同瀏覽器的標簽默認的外補...
    _Yfling閱讀 13,786評論 1 92
  • 1 我是汨羅江的人魚公主,因為排行第九,父王和母后給我取名,九兒。 汨羅江的人魚從出生開始就會覺醒一個關于屈原的記...
    滴水沁心閱讀 663評論 25 13
  • 娛樂圈零緋聞明星:有一些明星混跡娛樂圈多年,卻以近零緋聞的狀態存在。下面就讓我們來盤點下娛樂圈中那些零緋聞明星吧!...
    穿衣打扮吧閱讀 341評論 0 1