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