一、通過標簽的屬性值獲取后代節點
| 方法 | 依據屬性 | 兼容性 | 其他 |
| getElementById | id | 兼容性好，推薦使用 |
如果存在多個id相同的元素，只會返回第一個 |
| getElementsByTagName | 標簽名 | 不兼容ie8及以下版本 | 返回所有符合條件的元素的集合 |
| getElementsByName | name | 不兼容ie8及以下版本 | 返回所有符合條件的元素的集合 |
| getElementsByClassName | class | 不兼容ie8及以下版本 | 返回所有符合條件的元素的集合 |
二、js獲取子節點的方式
| 屬性 | 作用 | 其他 |
| childNodes | 獲取所有子節點 | 不推薦使用，如果有空格，會作為文本節點獲取到 |
| children | 獲取所有子節點 | 推薦使用 |
| firstChild | 獲取首個子節點 | 推薦使用 |
| lastChild | 獲取最后一個子節點 | 推薦使用 |
這四個屬性都不存在兼容性問題，除了childNodes之外都是比較好用的。
childNodes：返回的是子節點的集合，是一個數組的格式。他會把換行和空格也當成是節點信息。
利用children來獲取子元素是最方便的，他也會返回出一個數組。對其獲取子元素的訪問只需按數組的訪問形式即可。
firstChild來獲取第一個子元素，但是在有些情況下我們打印的時候會顯示undefined，這是什么情況呢？？其實firstChild和childNodes是一樣的，在瀏覽器解析的時候會把他當換行和空格一起解析，其實你獲取的是第一個子節點，只是這個子節點是一個換行或者是一個空格而已。那么不要忘記和childNodes一樣處理呀。
6. firstElementChild獲取第一個子節點
使用firstElementChild來獲取第一個子元素的時候，這就沒有firstChild的那種情況了。會獲取到父元素第一個子元素的節點 這樣就能直接顯示出來文本信息了。他並不會匹配換行和空格信息。
lastChild獲取最后一個子節點的方式其實和firstChild是類似的。同樣的lastElementChild和firstElementChild也是一樣的。不再贅余。
三、js獲取父節點的方式
parentNode獲取父節點
獲取的是當前元素的直接父元素。parentNode是w3c的標准。
var p = document.getElementById("test").parentNode;
parentElement獲取父節點
parentElement和parentNode一樣，只是parentElement是ie的標准。
offsetParent獲取所有父節點
一看offset我們就知道是偏移量 其實這個是於位置有關的上下級 ，直接能夠獲取到所有父親節點， 這個對應的值是body下的所有節點信息。
四、js獲取兄弟節點的方式
獲取上一個兄弟節點
在獲取前一個兄弟節點的時候可以使用previousSibling和previousElementSibling。他們的區別是previousSibling會匹配字符，包括換行和空格，而不是節點。previousElementSibling則直接匹配節點。
var brother2 = document.getElementById("test").previousElementSibling;
var
brother3 = document.getElementById(
"test"
).previousSibling;
獲取下一個兄弟節點
同previousSibling和previousElementSibling，nextSibling和nextElementSibling也是類似的。
var brother4 = document.getElementById("test").nextElementSibling;
var
brother5 = document.getElementById(
"test"
).nextSibling;