JavaScript操作DOM_javascript中dom[0].row设置-优快云博客

本文通过多个实例介绍了如何使用DOM进行页面元素的动态操作，包括显示响应、下拉列表设置、表格行的增删等功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Javascript_dom01.htm的内容如下：【利用DOM解析，实现显示的响应操作】

<html>

<head>

<title>www.baidu.com</title>

function show(){

document.getElementById("info").innerHTML = "<h2>www.baidu.com</h2>";

}

</script>

</head>

<body>

</form>

</body>

</html>

执行结果如下：

Javascript_dom02.htm的内容如下：【利用DOM的原理，完成下拉列表的设置】

<html>

<head>

<title>www.baidu.com</title>

function setFun(){

var id = new Array(1,2,3);

var value = new Array("北京","上海","深圳");

//取得下拉列表框的对象

var select = document.getElementById("area");

select.length = 1;//表示可以选择的内容是一个。

select.options[0].selected = true; //设置第一个为默认选中

for(var x=0;x<id.length;x++){

var option = document.createElement("option");

option.setAttribute("value",id[x]);

//在option子节点之中增加文本节点

option.appendChild(document.createTextNode(value[x]));

select.appendChild(option);//增加子节点

}

</script>

</head>

<form>

</select>

</form>

</body>

</html>

执行此段代码的结果如下所示：

Javascript_dom03.htm的内容：【利用DOM的原理，完成表格的操作】

<html>

<head>

<title>www.baidu.com</title>

function deleterow(btn){

var tr = btn.parentNode.parentNode;

var table = document.getElementById("mytab");

table.deleteRow(tr.rowIndex);

}

</script>

</head>

<body>

<TR>

<TD>skewrain</TD>

<TD><input type="button" value="-"

onclick="deleterow(this)"></TD>

</TR>

<TR>

<TD>northwind-2</TD>

<TD><input type="button" value="-"

onclick="deleterow(this)"></TD>

</TR>

</TABLE>

</body>

</html>

执行此段代码的结果如下所示：

点击每行后面的“减号按钮”可以将此行删除。

在JavaScirpt之中，本身已经直接提供了表格的操作函数，下面先来观察这些函数的使用。

insertRow();：表示在表格中增加一行。

deleteCell();：表示删除单元格，列。

insertCell();：表示插入一列。

Javascript_dom03.htm的内容如下：【通过一个示例来演示：在表格中动态添加行和删除行】

<html>

<head>

<title>www.baidu.com</title>

var count = 3;

function addrow(){

var table = document.getElementById("mytab");

var tr = table.insertRow();//增加一个新的行

var td1 = tr.insertCell(); //在行上增加列

var td2 = tr.insertCell(); //在行上增加列

var td3 = tr.insertCell(); //在行上增加列

td1.innerHTML = "skewrain-" + count;

td2.innerHTML = "斜雨-" + count;

td3.innerHTML = "<input type='button' value='-' onclick='deleterow(this)'>";//在这里注意，要么在双引号内部使用单引号，要么使用转义操作。

count++;

}

function deleterow(btn){

var tr = btn.parentNode.parentNode;

var table = document.getElementById("mytab");

table.deleteRow(tr.rowIndex);

}

</script>

</head>

<body>

<TR>

<TD>skewrain-1</TD>

<TD><input type="button" value="-"

onclick="deleterow(this)"></TD>

</TR>

<TR>

<TD>northwind-2</TD>

<TD><input type="button" value="-"

onclick="deleterow(this)"></TD>

</TR>

</TABLE>

</body>

</html>

执行此段代码的结果如下图所示：

通过点击“+”可以增加一行，点击“-”则删除相应的行。

以上示例只是利用了一部分的DOM解析操作，对于这种增加表格的操作，也可以利用纯粹的DOM操作完成。【在<table>和<tr>元素之间还存在一个<tbody>元素】。

Javascript_dom04.htm的内容如下：

<html>

<head>

<title>www.baidu.com</title>

function addrow(){

var tab = document.getElementById("mytab"); //取得table的节点对象

var id = document.getElementById("id").value;

var name = document.getElementById("name").value;

var tr = document.createElement("tr"); //创建tr结点

var tbody = document.createElement("tbody");

var td_id = document.createElement("td");

var td_name = document.createElement("td");

td_id.appendChild(document.createTextNode(id));

td_name.appendChild(document.createTextNode(name));

tr.appendChild(td_id);

tr.appendChild(td_name);

tbody.appendChild(tr);

tab.appendChild(tbody);

}

</script>

</head>

<body>

新的编号：<input type="text" name="id">

新的姓名：<input type="text" name="name">

<TR>

</TR>

</TABLE>

</body>

</html>

执行此段代码的结果如下所示：

【可以通过输入编号和姓名，通过点击“增加”将结果添加到表格中。】

此时是利用一个纯粹的DOM解析完成的HTML操作，此功能在使用AJAX开发时将起到重要作用。

在HTML中，只需要按照DOM的操作标准，那么一切都可以轻松的解决，而所有的动态的效果实际上也是通过DOM解析才完成的。所有相关的DOM操作方法可以直接从JDK文档中查询。