常用节点类型 节点类型常量 节点类型值
元素节点 element 1
属性节点 attribute 2
文本节点 text 3
注释节点 comment 8
文档节点 document 9
firstChild 指向在childNodes列表中的第一个节点
lastChild 指向在childNodes列表中的最后一个节点
childNodes 所有子节点的列表
previousSibling 指向前一个兄弟节点:如果这个节点就是第一个兄弟节点,那么该值为null
nextSibling 指向后一个兄弟节点:如果这个节点就是最后一个兄弟节点,那么该值为null
getElementsByTagName()
访问指定节点: getElementsByName()
getElementById()
createElement(tagname) 创建标记名为tagname的元素
a.append(b) 将b添加到a的最后一个子元素
removeChild() 删除节点(在页面上删除,内存存在)
replaceChild(a,b)a为添加的节点,b为被替换的节点
insertBefore(a,b)将a节点插入到b之前
示例(弹出框):
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
</style>
</head>
<body>
<div id="wrap">
<input type="button" value="注册" id="zhuCe"/>
</div>
</body>
</html>
<script>
var wrap = document.getElementById("wrap");
var zhuCe = document.getElementById("zhuCe");
var div1 = null;
// var i = 0;
zhuCe.onclick = function(){
if(!div1){
div1 = document.createElement("div");
}else{
return 0;
}
//第二种方法
// var div1 = document.createElement("div");
div1.style.width="300px";
div1.style.height="300px";
div1.style.backgroundColor="red";
div1.style.border = "3px solid green";
//弹出框居中
// div1.style.margin="auto";
div1.style.position="absolute";
div1.style.top="150px";
div1.style.left=(parseInt(window.innerWidth || document.documentElement.clientWidth)-300)/2+"px";
// i++;
// if(i == 1){wrap.appendChild(div1);}
wrap.appendChild(div1);
var input = document.createElement("input");
input.type = "button";
input.value = "X";
input.style.float = "right";
div1.appendChild(input);
input.onclick = function(){
wrap.removeChild(div1);
// i = 0;
div1 = null;
}
}
</script>