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