js DOM常見操作
1. 元素的獲取。
常見的有四種方法。
(1)document.getElementById():獲取對應ID的元素。ID是不能有重複的。所以返回的是一個元素。
(2) document.getElementsByTagName():獲取對應的標籤元素。返回一個數組。
(3) document.getElementsByClassName():通過class來獲取元素。返回的也是一個數組。注:此方法在IE8瀏覽器下是不相容的。
(4) document.getElementsByName():通過name屬性來獲取元素,返回的也是一個數組。
不常用的兩種方法。
(5)document.documentElement():獲取html標籤。
(6)document.body():獲取body標籤。
特別的兩種
(7) document.querySelector("#demo"):獲取文件中 id='demo' 的元素。返回匹配指定選擇器的第一個元素。
(8) document.querySelectorAll("#demo"):使用方式和 document.querySelector()
方法一樣,只是可以獲取css選擇器匹配的所有元素。
2.元素的操作方法。
(1)node.appendChild(node1):向某個節點新增一個子節點,這個新增的節點會被放在最後,成為這個節點的最後一個子節點;
(2)node.removeChild(node1):移除某個節點 。
(3)insertBefore(nodo1, node2),將node1作為當前元素的子節點,插入到當前元素的節點node2的前面。
(4)replaceChild(newnode, oldnode);新節點,代替舊結點。
3.獲取節點。
(1)hasChildnodes() 這個方法返回一個布林值,指示元素是否有子元素。
(2)childNodes 返回當前指定元素所有子元素(包括被註釋掉的元素)的陣列: document.body.childNodes。它返回指定元素的子元素集合,包括HTML節點(元素節點),文字節點(空格也是文字節點)。可以通過nodeType來判斷是哪種型別的節點,只有當nodeType==1時才是元素節點,2是屬性節點,3 是文字節點。
(3)children返回當前指定元素所有子元素,但是與childNodes 不同的是,他只會返回HTML節點(元素節點),不返回文字節點。
(4)firstChildelem.firstChild 返回當前元素下的第一個子節點。這個獲取到的節點是以childNodes為 標準的,就是包括HTML節點(元素節點),文字節點(空格也是文字節點),所以返回的有可能是一個文字節點。
(5)lastChildelem.lastChild返回當前元素下的最後一個子節點。
這個獲取到的節點是以childNodes為 標準的,就是包括HTML節點(元素節點),文字節點(空格也是文字節點),所以返回的有可能是一個文字節點。
(6)nextSbilingelem.nextSbiling 返回緊跟在當前節點後的那一個同級節點(同級元素,不是子元素)。 這個獲取到的節點是以childNodes為 標準的,就是包括HTML節點(元素節點),文字節點(空格也是文字節點),所以返回的有可能是一個文字節點
(7)previousSiblingelem.previousSibling 返回前一個同級節點,跟nextSbiling類似,只不過nextSbiling是返回後一個。
(8)parentNodeelem.parentNode 返回父節點。
4.屬性操作。
(1)elem.getAttribute(name); 獲取元素屬性。
(2)elem.setAttribute(name, value); 設定元素屬性。
5. 建立元素,文字節點。
(1) var p = document.createElement("p")。建立元素,裡面的“p”,就是代表建立p元素
div.appendChild(p);就是向div中新增一個p元素,在div的最後面。
(2) var txt = document.createTextNode("這是文字"); 這是建立文字元素
p.appendChild(txt);向p元素中新增值。
6.獲取元素,節點的值。
<p id="test">123</p> 要獲取p之下的文字值
(1), document.getElementById("test").childNodes[0].nodeValue;(這裡不能用children替換childNodes,因為children獲取不到 文字節點)。
(2), document.getElementById("test").innerTEXT;
(3), document.getElementById("test").innerHTML;
(2)和(3)的區別:將上面的標籤改為:“ <p id="test"><a href="#">123</a></p> ”
那麼(2)的值還是 123, 但是(3)的值就是<a href="#">123</a>,就是說innerHTML會連html標籤也拿到,但是innerText不會。
參考連結:https://blog.csdn.net/yuling__ting/article/details/51490302
:https://blog.csdn.net/change_any_time/article/details/79721554