3 4 節點操作

2021-09-27 18:36:02 字數 3894 閱讀 7858

一。元素節點的建立,新增,插入、替換,刪除、轉殖

// 建立節點有三種形式

// 1、document.createelement('元素')

// 2、document.createtextnode('文字')

// 3、document.createdocumentfragment()

// document.createdocumentfragment('p')

//建立元素節點

var text = document.

createtextnode

('文字'

)var odiv = document.

createelement

('div'

)var body = document.

getelementsbytagname

('body')[

0]body.

(odiv)

//項元素節點新增文字節點

odiv.

(text)

//方式一 建立文字節點,並新增到div上

odiv.innerhtml =

'卡卡同志,你好'

//方式

二、就是向元素新增內容

二、相容ie8及以下

"text"

>

新增<

/button>

<

/ul>

<

/span>

var inp = document.

getelementsbytagname

('input')[

0]var btn = document.

getelementsbytagname

('button')[

0]var oul = document.

getelementsbytagname

('ul')[

0]btn.onclick =

function()

var oli = document.

createelement

('li'

) oli.innerhtml = text;

console.

log(oul.childnodes[0]

)//undefined 如果 ul中間有空格或是換行就是 #text

// 插入節點 父級.insertbefore(插入的元素, 參考點);

oul.

insertbefore

(oli, oul.childnodes[0]

)//從事頭部開始新增

// 父級ul 插入 元素oli ,參考點 ul的第乙個子節點 可用fistchild

inp.value =''}

//在ie8及以下ul的第乙個子節點是undefined 這是插入節點或報錯

if(oul.childnodes[0]

)else

三、節點的插入

3456789

<

/span>

// 插入節點 元素.insertbefore(插入的元素, 參考點);

var ospan = document.

getelementsbytagname

('span')[

0]var div1 = document.

createelement

('div'

) div1.innerhtml =

'你好'

ospan.parentnode.

(div1)

四、節點的插入和新增事件

"text"

>

新增<

/button>

<

/ul>

var inp = document.

getelementsbytagname

('input')[

0]var oul = document.

getelementsbytagname

('ul')[

0]var btn = document.

getelementsbytagname

('button')[

0]btn.onclick =

function()

// oul.insertbefore(oli, oul.childnodes[0]) //從ul的第乙個子節點為參考點開始插入

//解決ie8及以下相容

if(oul.childnodes[0]

)else

}<

/script>

五、節點的替換

黑呵呵<

/div>

var body = document.

getelementsbytagname

('body')[

0]var odiv = document.

getelementsbytagname

('div')[

0]var ospan = document.

createelement

('span'

) ospan.innerhtml =

'哈哈哈哈哈'

ospan.onclick =

function()

// 替換 父級.replacechild(新節點,替換的節點)

body.

replacechild

(ospan, odiv)

<

/script>

六、節點的轉殖

轉殖

var body = document.

getelementsbytagname

('body')[

0]var oul = document.

getelementsbytagname

('ul')[

0]var btn = document.

getelementsbytagname

('button')[

0]//轉殖 被轉殖的元素。clonenode(true);

//引數true可以複製子級節點 不加ture 預設轉殖當前標籤

btn.onclick =

function()

<

/script>

七、移除(刪除)節點

"text"

>

新增<

/button>

<

/ul>

var body = document.

getelementsbytagname

('body')[

0]var oul = document.

getelementsbytagname

('ul')[

0]var btn = document.

getelementsbytagname

('button')[

0]var inp = document.

getelementsbytagname

('input')[

0]//轉殖 父級。removechild(要刪除的節點)

//引數true可以複製子級節點 不加ture 預設轉殖當前標籤

btn.onclick =

function()

oli.

(oa)

oul.

insertbefore

(oli, oul.childnodes[0]

)}

2020 4 20 節點操作

一,建立節點 createlement 格式 document.createlement 標籤名 返回值 建立好的這個節點 二,插入節點三,建立文字節點 純文字,不解析標籤 格式 document.createtextnode 文字 四,替換節點 replacechild 格式 box1.paren...

jquery02 08節點操作

lang en charset utf 8 title src jquery 1.11.1.min.js script function button eq 1 click function button eq 2 click function button eq 3 click function ...

Web API 學習02 (節點操作)

1 排他思想 運用於京東輪播圖小圓點 如果有一組元素,我們想要某乙個元素實現某種樣式,需要用到迴圈的排他思想演算法 1 先把所有元素全部清除樣式 2 然後給當前元素新增樣式 var imgs document.queryselector box queryselectorall img 是找到類名為...