3 4 節點操作

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

// 建立節點有三種形式

// 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 =
'卡卡同志，你好'
//方式
二、就是向元素新增內容

"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 是找到類名為...