js的節點操作

// 父級節點

var par = li.parentnode

// 所有兒子節點

var all_child = li.children
// 第乙個(最後乙個子節點)
var fir = li.firstchild
var las = li.lastchild
// 第乙個子元素(最後乙個)節點
var fir_element = li.firstelementchild
var las_element = li.lastelementchild
// 兄弟節點
var bor = li.nextelementsibling
var bor = li.previouselementsibling
var bor2 = li.nextsibling
// 返回列表項的上乙個同胞
var bor2 = li.previoussibling
// 建立節點
var news = document.createelement('li')
//新增節點
// 新增節點到指定父節點的子節點列表末尾
// 新增節點到指定父節點的子節點列表前面
node.insertbefore(child, 指定元素)
// 插入節點
li.insertadjacentelement('位置', 元素)
// beforebegin: 插入到標籤開始前
// afterbegin: 插入到標籤開始標記之後
// beforeend: 插入到標籤結束標記前
// afterend: 插入到標籤結束標記後
// 刪除節點
li.parentnode.remove()   // 刪除li的父級節點

lang
="en"
>
>
charset
="utf-8"
>
name
="viewport"
content
="width=device-width, initial-scale=1.0"
>
>
documenttitle
>
>
*table
th,        td
.box
style
>
head
>
>
class
="box"
>
for=""
>
編號label
>
type
="text"
id="number"
>
for=""
>
姓名label
>
type
="text"
id="nearname"
>
"btn_add"
>
新增button
>
div>
>
>
>
>
編號th
>
>
姓名th
>
>
操作th
>
tr>
thead
>
>
tbody
>
table
>
>
// 獲取tbody標籤
var tbody = document.
queryselector
('tbody'
)// 給新增按鈕新增單擊事件
document.
queryselector
('#btn_add').
onclick
=function()
$刪除`
// 把新新增的trnode 新增到tbody後邊
tbody.
insertadjacentelement
('beforeend'
, trnode)
// 為新建立的行註冊單擊事件
//獲取刪除按鈕 並且賦值給 btn_delete
var btn_delete = trnode.
queryselector
('.delete'
)// 給刪除按鈕定義乙個單擊事件
btn_delete.
onclick
=function()
// 為新建立的td註冊雙擊事件
var td_arr = trnode.
queryselectorall
('td'
)// 因為獲取的td是乙個陣列 所以需要迴圈遍歷
for(
var i =
0; i < td_arr.length; i++
)// console.log(input);}}
}script
>
body
>
html
>

編號姓名 新增

編號姓名

操作

js節點操作

每個節點都有乙個 parentnode 屬性，該屬性指向文件樹中的父節點。包含在 childnodes 列表中的所有節點都具有相同的父節點，因此它們的 parentnode 屬性都指向同乙個節點。此外，包含在childnodes 列表中的每個節點相互之間都是同胞節點。通過使用列表中每個節點的 pre...

Js節點操作

一 節點常用操作 二 節點屬性 屬性操作的標準方法 node.getattribute 返回當前元素節點的指定屬性。如果指定屬性不存在，則返回null node.setattribute 為當前元素節點新增屬性。如果同名屬性已存在 node.hasattribute 返回乙個布林值，表示當前元素節點...

js 節點操作

新增和刪除節點 html 元素 如需向 html dom 新增新元素，您必須首先建立該元素 元素節點 然後向乙個已存在的元素追加該元素。這是乙個段落 這是另乙個段落 例子解釋 這段 建立新的 元素 var para document.createelement p 如需向 元素新增文字，您必須首先建...