示例 1 :
假設html**如例項中，那麼各個元素節點的關係如下:
d1 d2 d3 的parentnode是parentdiv
parentdiv的firstnode是 d1
parentdiv的lastnode是d3
d2的previoussibling是d1
d2的nextsibling是d3
parentdiv的children是 d1 d2 d3
>第乙個div
div>
<
div
id="d2"
>第二個div
div>
<
div
id="d3"
>第三個div
div>
div>
示例 2 :
通過parentnode獲取父節點。
本例中從id=d1的div開始遞迴獲取其父節點，分別獲取如下父節點
div[id=parentdiv] -> body->html->document
<html
>
<
body
>
<
script
>
varnode
=null
;function
showparent()
}script
>
<
div
id="parentdiv"
>
父div的內容
<
div
id="d1"
>第乙個div
div>
<
div
id="d2"
>第二個div
div>
<
div
id="d3"
>第三個div
div>
div>
<
button
onclick
="showparent()"
>不斷遞迴d1的父節點
示例 3 :
分別通過 previoussibling和nextsibling屬性獲取前乙個，以及後乙個同胞節點。
在本例中，首先獲取d2元素節點
通過previoussibling獲取前乙個節點d1.
注意 d1和d2標籤是緊挨著的，所以d2前乙個節點是d1。
通過nextsibling 獲取後乙個節點#text.
注意 d2和d3不是緊挨著 標籤之間有任何字元、空白、換行都會產生文字元素。 所以獲取到的節點是#text.
<script
>
function
showpre()
function
shownext()
script
>
<
div
id="parentdiv"
>
父div的內容
<
div
id="d1"
>第乙個div
div><
div
id="d2"
>第二個div
div>
<
div
id="d3"
>第三個div
div>
div>
<
button
onclick
="showpre()"
>獲取d2的前乙個同胞
button
>
<
button
onclick
="shownext()"
>獲取d2的後乙個同胞
示例 4 :
子節點關係有:
firstchild 第乙個子節點
lastchild 最後乙個子節點
childnodes 所有子節點
注:firstchild 如果父節點的開始標籤和第乙個元素的開始標籤之間有文字、空格、換行，那麼firstchild第乙個子節點將會是文字節點，不會是第乙個元素節點
注:lastchild 和firstchild同理。 在本例中故意讓第3個元素的結束標籤與div的結束標籤緊挨著，所以最後乙個子節點就是第三個標籤
注: 子元素個數一共是6個。 因為parentdiv的子節點是 文字節點接著乙個元素節點，重複3次。 所以一共是6個。
<script
>
function
showfirst()
function
showlast()
function
showall()
script
>
<
div
id="parentdiv"
>
父div的內容
<
div
id="d1"
>第乙個div
div>
<
div
id="d2"
>第二個div
div>
<
div
id="d3"
>第三個div
div>
div>
<
button
onclick
="showfirst()"
>第乙個子節點
button
>
<
button
onclick
="showlast()"
>最後乙個子節點
button
>
<
button
onclick
="showall()"
>所有子節點數量
示例 5 :
childnodes和children都可以獲取乙個元素節點的子節點。
childnodes 會包含文字節點
children 會排除文字節點
<div
id="parentdiv"
>
<
div
id="d1"
>第乙個div
div>
<
div
id="d2"
>第二個div
div>
<
div
id="d3"
>第三個div
div>
div>
<
button
onclick
="shownumber1()"
>通過childnodes獲取子節點總數
button
>
<
button
onclick
="shownumber2()"
>通過children()獲取子節點總數
HTML DOM 二 節點的增刪改查
獲取 r 1.getelementbyid id getelementsbyname name getelementsbytagname tagname 這三種方法都會忽略文件的結構。getelementsbytagname tagname 通過tagname獲取一組元素節點，返回的是具有相同tag...
2019 9 26節點遍歷
遍歷屬性 div container ul.list li.item p 結構 container list item 1 p li item 2 p li item vip 3 p li item 4 p li item 5 p li ul div jquery庫 jquery 3.4.1 20....
3 4 節點操作
一。元素節點的建立，新增，插入 替換，刪除 轉殖 建立節點有三種形式 1 document.createelement 元素 2 document.createtextnode 文字 3 document.createdocumentfragment document.createdocumentf...