一。元素節點的建立,新增,插入、替換,刪除、轉殖
// 建立節點有三種形式
// 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 是找到類名為...