1、createElement()创建节点
2、appendChild()方法可向节点的子节点列表的末尾添加新的子节点
3、createTextNode()可创建文本节点
js Dom方法的实例:
创建一个图层,并且在该图层中显示出“abcd”文字
步骤:
(1)、创建该图层的节点(createElement)
(2)、设置该图层的长和宽以及背景(利用style属性)
(3)、设置该图层id的属性
(4)、将图层添加到body中(使用document.body.appendChild)
(5)、创建文本节点(利用createTextNode创建文本节点)
(6)、将文本添加到创建的div中
<!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 type="text/javascript" language="javascript">
function showDiv(){
//js 的 Dom操作类似于php Dom操作xml
//创建一个元素,元素是元素名
var new_div=document.createElement("div");
//给div设置大小和颜色,通过他的style属性来获得,但是设置具体的某个属性还是要根据具体的属性名来设置
new_div.style.width="100px";
new_div.style.height="100px";
//如果某个属性是由多个属性组成的话,采用驼峰法
new_div.style.backgroundColor="red";
new_div.id="div1";
//确定位置
document.body.appendChild(new_div);
var text = document.createTextNode("adcd");
new_div.appendChild(text);
//alert(document.getElementById("div1").nodeName);
}
</script>
</head>
<body>
<input type="button" value="点击" οnclick="showDiv()" />
</body>
</html>