JavaScript的DOM对象--材料

一、创建文本
【1】方法1
1.创建文本对象
var textNode=document.createTextNode(“创建了一个文本节点”);
2.获取 div对象
var divNode=document.getElementById(“div_1”);
3.将文本节点添加到div节点中
divNode.appendChild(textNode);

JavaScript的DOM对象—绝好的资料（二）

二、创建控件
【1】方法1：
1.创建一个按钮节点
var buttonNode=document.createElement(“input”);
buttonNode.type=“button”;
buttonNode.value=“新按钮”;

2.获取 div节点
var divNode=document.getElementById(“div_1”);
3.将文本节点添加到div节点中
divNode.appendChild(buttonNode);

【2】方法2：

}

JavaScript的DOM对象—绝好的资料（三）

三、创建select控件的option节点
1、获得select控件对象
var selectObj=document.getElementById(“selectId”);
2、创建option子节点：语法 new Option(“文本值”,“控件值”)
var optionObj=new Option(“北京”,“010”);
3、将option选项添加到控件select对象中
selectObj.options.add(optionObj);
示例1：

请选择 示例2： 请选择

}

/表格节点的操作（***）/

JavaScript的DOM对象—绝好的资料（四）

四、创建表格
【1】、 创建表格方法1
1、我们通过通过createElement创建元素形式来完成
(1)创建表格节点
var tableNode=document.createElement(“table”);
(2)创建tBody节点
var tbodyNode=document.createElement(“tbody”);
(3)创建tr节点
var trNode=document.createElement(“tr”);
(4)创建td节点
var tdNode=document.createElement(“td”);
tdNode.innerHTML=“这是单元格”;
2.关联这些节点，进行指定层次节点的添加

   trNode.appendChild(tdNode);
   tbodyNode.appendChild(trNode);
   tableNode.appendChild(tbodyNode);
   document.getElementsByTagName('div')[0].appendChild(tableNode);

例如：

---

    </div>
</body>

JavaScript的DOM对象—绝好的资料（五）

【2】创建表格方式2
通过table对象来完成
(1)创建表格对象
var tableNode=document.createElement(“table”);
(2)创建tr对象
// insertRow :table对象的方法，可以得到很多个行对象
var trNode=tableNode.insertRow();

(3)创建td节点
// insertCell：行对象的方法，可以创建很多列对象
var tdNode=trNode.insertCell();
关联这些节点，进行指定层次节点的添加
document.getElementsByTagName(‘div’)[0].appendChild(tableNode);

例子1：

---

例子2：创建多行多列的代码为
function createTable2()
{
//1.创建节点
//(1)创建表格节点
var tableNode=document.createElement(“table”);
for(var i=1;i<=6;i++)
{
//(2)创建tr节点
var trNode=tableNode.insertRow();
for(var j=1;j<=6;j++)
{
//(3)创建td节点
var tdNode=trNode.insertCell();
tdNode.innerHTML=i+"–"+j;
}
}
//2.关联这些节点，进行指定层次节点的添加

     document.getElementsByTagName('div')[0].appendChild(tableNode);
     document.getElementsByName("createButton")[0].disabled=true;
 }

JavaScript的DOM对象—绝好的资料（六）

五、删除表格
deleteRow()函数可以带参数，形式如下：deleteRow(index)：index从0开始和上面两个方法差不多的意思，就是删除指定位置的行和单元格
【1】通过行的对象删除

111	111	111
222	222	222
333	333	333

JavaScript的DOM对象—绝好的资料（七）

【3】删除列deleteCell
这里涉及表格2个重要集合（注意是集合）
1、rows:获取来自于 table 对象的 tr (表格行)对象的集合
2、cells:获取表格行或整个表格中所有单元格的集合

例如：
（1）
//1、获取表格对象
var tableNode=document.getElementById(“tableId”);
//2、获得行对象的数组，那么数组每个元素是个行对象
var arr=tableNode.rows;
//3、删除第3行第3列
arr[2].deleteCell(2);
（2）计算第1行有多少列
var len=tableNode.rows[0].cells.length ;
alert(len);
（3）计算一共有多少行
var len=tableNode.rows.length ;
alert(len);
例如：
//删除列，其实就是在删除每一行中同一位置的单元格
function delCol()
{
//获取表格对象
var tableNode=document.getElementById(“tableid”);
if(tableNode==null)
{
alert(“表格不存在”);
return;
}
var colnum=document.getElementsByName(“delcol”)[0].value;
if(colnum>=1 && colnum<=tableNode.rows[0].cells.length)
{
for(var i=0;i<tableNode.rows.length;i++)
{
tableNode.rows[i].deleteCell(colnum-1);
}
}
else
{
alert(“列不存在”);
}
}

JavaScript的DOM对象—绝好的资料（八）

六、动态设置单元格与行的属性
【1】方法1：setAttribute(属性，属性值)

111	111	111
222	222	222
333	333	333

【2】方法2：获得对象的属性，然后直接赋值，此方法以前讲过 var objMyTable = document.getElementById("tableId"); objMyTable.border=5;//为表格设置边框为5