js中DOM对象非常重要,但是相对于部分操作来说会有些许麻烦,这时用针对HTML的DOM对象会让部分操作方便很多。
例如对表格进行增删改。有时浏览器还会自动添加tbody,对子类的访问会造成困难。
function
addEle
() {
var
tr
=
document
.
createElement
(
"tr"
);
var
tda
=
document
.
createElement
(
"td"
);
var
tdb
=
document
.
createElement
(
"td"
);
tda
.
innerHTML
=
"
幸福从天而将
"
;
tdb
.
innerHTML
=
"
¥
18.5"
;
tr
.
appendChild
(
tda
);
tr
.
appendChild
(
tdb
);
// table[0].children[0].appendChild(tr);
table
[
0
].
children
[
0
].
insertBefore
(
tr
,
allTr
[
2
]);
}
function
remove
() {
var
tBody
=
table
[
0
].
children
[
0
];
var
tr
=
allTr
[
1
];
console
.
log
(
allTr
[
1
]);
tBody
.
removeChild
(
tr
);
}
function
change
() {
var
td
=
document
.
getElementsByTagName
(
"td"
);
for
(
var
i
=
0
;
i
<
allTr
.
length
*
2
;
i
++)
{
if
(
i
%
2
==
0
)
td
[
i
].
innerHTML
=
"
更改
"
;
}
/*
* allTr.children[0].innerHTML = "
更改
"
;
* */
}
function
copyLast
() {
var
n
=
allTr
.
length
-
1
;
console
.
log
(
allTr
[
n
]);
var
cop
=
allTr
[
n
].
cloneNode
(
true
);
table
[
0
].
children
[
0
].
appendChild
(
cop
);
}
但是,通过HTML DOM对象会让操作变得更加容易。
var
table =
document
.
getElementsByTagName
(
"table"
)[
0
];
function
deleteEle
(obj) {
console
.
log
(obj);
var
value
= obj.
parentNode
.
parentNode
.
rowIndex
;
//行值
table.
deleteRow
(
value
);
}
function
addEle
() {
var
tr
= table.
insertRow
(
1
);
var
td1
=
tr
.
insertCell
(
0
);
td1
.
innerHTML
=
prompt
(
"
书名
"
);
var
td2
=
tr
.
insertCell
(
1
);
td2
.
innerHTML
=
"
¥
"
+
prompt
(
"
价格
"
);
var
td3
=
tr
.
insertCell
(
2
);
var
button
=
document
.
createElement
(
"button"
);
button
.
innerHTML
=
"
删除
"
;
td3
.
align
=
"center"
;
button
.
onclick
=
function
() {
deleteEle
(
this
);
};
td3
.
appendChild
(
button
);
}
//循环添加delete。
var
numButton
=
document
.
getElementsByTagName
(
"button"
);
for
(
var
i
=
1
;
i
<
numButton
.
length
;
i
++ )
{
numButton
[
i
].
onclick
=
function
() {
deleteEle
(
this
);
};
}
需要注意的是,要给onclick添加事件同时事件若有传值时,需要用匿名函数包裹调用函数。