Dom Elements的属性

attributes 返回元素的属性的 NamedNodeMap(这是一个Map，通过name访问value)

关于attribute的一些东西：

读取attributes

1、document.getElementsByTagName("div")[0].attributes.getNamedItem("style").value;
2、document.getElementById("div2").getAttribute("style")
注：attributes返回的是map类型，因此用getNamedItem（name）.value读取
 
设置attributes
1、var attr = document.createAttribute("jianjie"); attr.value = "简洁";
        document.getElementById("div2").attributes.setNamedItem(attr);
2、document.getElementById("div2").setAttribute("jianjie", "简洁");
 
删除attributes
document.getElementById("div2").attributes.removeNamedItem("简洁");
document.getElementById("div2").removeAttribute("简洁");

nodeTypenodeType 属性返回被选节点的节点类型。

节点编号： 节点名称：
1 Element
2 Attribute
3 Text
4 CDATA Section
5 Entity Reference
6 Entity
7 Processing Instrucion
8 Comment
9 Document
10 Document Type
11 Document Fragment
12 Notation

document.getElementById("div2").nodeType;//output  1

ownerDocument 属性返回选定的元素所属的文档对象

var x=xmlDoc.getElementsByTagName("title")[0]; x=x.ownerDocument;
document.write(" (nodetype: " + x.nodeType + ")");
以上代码的输出：
Nodename: #document (nodetype: 9)

 

document.documentElement

返回Html对象

nodeName 和 tagName

alert(document.getElementById("div1").childNodes[0].nodeName); //output DIV
alert(document.getElementById("div1").childNodes[0].tagName);//output DIV

 

Table对象的若干种操作

1、传统方法

var tb=document.createElement("table");
tb.setAttribute("style","border:solid 1px red");

var row2=document.createElement("tr");
var cell1=document.createElement("td");
cell1.appendChild(document.createTextNode("2"));
var cell2=document.createElement("td");
cell2.appendChild(document.createTextNode("jane"));
row2.appendChild(cell1);row1.appendChild(cell2);
tb.appendChild(row2);

var row1=document.createElement("tr");
var cell3=document.createElement("td");
cell3.appendChild(document.createTextNode("1"));
var cell4=document.createElement("td");
cell4.appendChild(document.createTextNode("colin"));
row1.appendChild(cell3);row1.appendChild(cell4);
tb.insertBefore(row1,row2);

document.body.appendChild(tb);
2、Dom table
<script type="text/javascript">
function insRow()
  {
  var x=document.getElementById('myTable').insertRow(0)
  var y=x.insertCell(0)
  var z=x.insertCell(1)
  y.innerHTML="NEW CELL1"
  z.innerHTML="NEW CELL2"
  }
</script>
</head>

<body>
<table id="myTable" border="1">
<tr>
<td>Row1 cell1</td>
<td>Row1 cell2</td>
</tr>
<tr>
<td>Row2 cell1</td>
<td>Row2 cell2</td>
</tr>
<tr>
<td>Row3 cell1</td>
<td>Row3 cell2</td>
</tr>
</table>
<br />
<input type="button" onclick="insRow()" value="插入行">
</body>
 

操作table常用方法和属性

Table 对象方法
方法 描述 IE F O W3C
deleteRow() 从表格删除一行。并返回datatablerow 4 1 9 Yes
insertRow() 在表格中插入一个新行。并返回datatablerow 4 1 9 Yes
Table 对象集合
集合 描述 IE F O W3C
cells[] 返回包含表格中所有单元格的一个数组。 5 1 1 No
rows[] 返回包含表格中所有行的一个数组。 4 1 9 Yes
tBodies[] 返回包含表格中所有 tbody 的一个数组。 4     Yes
TableRow 对象方法
方法 描述 IE F O W3C
deleteCell() 删除行中的指定的单元格。返回一个Cell对象 4 1 9 Yes
insertCell() 在一行中的指定位置插入一个空的 <td> 元素。并
返回一个Cell对象		 4 1 9 Yes
TableRow 对象属性
属性 描述 IE F O W3C
innerHTML 设置或返回行的开始标签和结束标签之间的 HTML。 5 1 9 No
rowIndex 返回该行在表中的位置。 4 1 9 Yes
document.getElementById("tr1").rowIndex
TableCell 对象属性

属性 描述 IE F O W3C
cellIndex 返回单元格在某行的单元格集合中的位置。 4 1 9 Yes
colSpan 单元格横跨的列数。 4 1 9 Yes
innerHTML 设置或返回单元格的开始标签和结束标签之间的 HTML。 4 1 9 No
rowSpan 设置或返回单元格可横跨的行数。 4 1 9 Yes
posted @ 2010-03-30 16:59  MyCoolDog  阅读(331)  评论(0)  编辑  收藏  举报