1、通過(guò)獲取DOM方式直接獲取子節點(diǎn)

其中price為父標簽id的值，div為標簽的名字。getElementsByTagName是一個(gè)方法。返回的是一個(gè)數組。在訪(fǎng)問(wèn)的時(shí)候按數組的形式訪(fǎng)問(wèn)即可，如var a = document.getElementById("price").getElementsByTagName("div")[0] 返回的是數組里面的第一個(gè)元素。

var a = document.getElementById("price").getElementsByTagName("div"); 
2、通過(guò)childNodes 獲取子節點(diǎn)

childNodes返回的是子節點(diǎn)的集合，也是數組的格式，不過(guò)它會(huì )把換行和空格也當成節點(diǎn)信息，不推薦使用。

var b =document.getElementById("price").childNodes;
3、通過(guò)children來(lái)獲取子節點(diǎn)

children獲取子元素是最好用的，它返回的也是一個(gè)數組，并且會(huì )過(guò)濾掉一些不必要的信息，如換行、空格等。

var c = document.getElementById("price").children;
4、通過(guò)firstChild獲取第一個(gè)子節點(diǎn)

firstChild和childNodes類(lèi)似，瀏覽器在解析它的時(shí)候的時(shí)候會(huì )把換行和空格一起解析，不推薦使用

var d = document.getElementById("price").firstChild;
5、通過(guò)firstElementChild獲取第一個(gè)子節點(diǎn)

使用firstElementChild來(lái)獲取第一個(gè)子元素，可直接獲取第一個(gè)子元素，并不會(huì )將換行和空格一起解析

var e = document.getElementById("price").firstElementChild;
6、獲取最后一個(gè)子節點(diǎn)

1.lastChild

2.lastElementChild

lastChild獲取最后一個(gè)子節點(diǎn)的方式其實(shí)和firstChild是類(lèi)似的。同樣的lastElementChild和firstElementChild也是一樣的。不再贅余。

var f = document.getElementById("price").lastChild;
var g = document.getElementById("price").lastElementChild;