js-dom复习3

来源：互联网发布：javascript date.now 编辑：程序博客网时间：2024/05/22 17:12

Dom常见方法：

1.SetAttribute():方法创建或改变某个新属性

语法：elementNode.setAttribute(name,value)

name:必需，设置属性名

value：必需，设置属性值

2.appendChild():

向节点的子节点列表末尾添加新的子节点。

该方法返回新的子节点。

语法：appendChild(node)

3.getAttribute():方法通过名称获取属性的值

语法：elementNode.getAttribute(name)

4. getElementsByTagName(): 方法返回拥有指定名称的所有元素的 NodeList。

语法：getElementsByTagName(name)

5.removeAttribute()：方法删除指定的属性，如果文档类型声明为指定的属性设置了默认值，那么接下来调用getAttribute()方法将返回那个默认值。

6.removeChild.():方法删除子节点

实现输入表格行和列自动出现表格

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>自动创建表格</title>
<script>
function getsheng(){

var cols=document.getElementById("hang").value;
var rows=document.getElementById("lie").value;
   //绘制表格
var table=document.createElement("table");
table.setAttribute("border","1");
table.setAttribute("width","100");
table.setAttribute("height","100");
table.setAttribute("bgcolor","red");
for(var i=1;i<cols;i++){
  //创建tr
  var tr=document.createElement("tr");
  }
  for(var j=1;j<rows;j++){
   //创建td
   var td=document.createElement("td");
   //var text=document.createTextNode(" ");
   //td.appendChild(text);
  //把td追加到tr中
  tr.appendChild(td);
   }
   //把tr追加到table
  table.appendChild(tr);
  document.getElementById("d1").appendChild(table);
}

</script>
</head>

</div>
</body>
</html>