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

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

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

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

var b =document.getElementById("price").childNodes;
3、通過children來獲取子節(jié)點(diǎn)

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

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

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

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

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

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

1.lastChild

2.lastElementChild

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

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