js HTML DOM对象

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添加事件同时事件若有传值时，需要用匿名函数包裹调用函数。