节点

 常用节点类型         节点类型常量             节点类型值
元素节点             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> 

posted @ 2015-09-14 19:08  雨落无痕忄  阅读(260)  评论(0)    收藏  举报