大家好~ ?我是一枚正直純潔的苦逼程序員!!!!!
常見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.參考文獻
8.更多討論
1.除了這三種方法還有那些方法?
解決:
document/element.querySelector('CSS選擇器');
document/element.querySelectorAll('CSS選擇器');
document.createTextNode('文本內容');等等
2.對下標的理解?
解決:
下標就是從0開數
3.改變 CSS 樣式還可以用什么屬性?
解決:
classNane