7.16总结

javascript-节点属性解析

根据 DOM，HTML 文档中的每个成分都是一个节点。HTML为根节点。

DOM (Document Object Model)是这样规定的：

整个文档是一个文档节点
每个 HTML 标签是一个元素节点
包含在 HTML 元素中的文本是文本节点
每一个 HTML 属性是一个属性节点
注释属于注释节点

一、如何获得节点引用

    1.以前获取节点引用的方式：
      getElementById()
      getElementByTagName()
      getElementByName()

劣势：
1.浪费内存
2.逻辑性不强

    2.通过节点关系属性获得节点的引用：
      对象.parentNode 获得父节点的引用
      对象.childNodes 获得子节点的集合
      对象.firstChild 获得第一个子节点
      对象.lastChild   获得最后一个子节点
      对象.nextSibling 获得下一个兄弟节点的引用
      对象.previousSibling 获得上一个兄弟节点的引用

劣势:兼容性不好。

二、节点的信息(属性)

节点类型节点名字节点值
nodeType(数值) nodeName nodeValue

元素节点 1 标签名 null

属性节点 2 属性名属性值

文本节点 3 #text 文本

注释节点 8 #comment 注释的文字、

文档节点 9 #document null

一、创建节点

    1>创建元素节点
      document.createElement("元素标签名");
例如：var p = document.createElement("p");
    2>创建属性节点
       document.createAttribute("属性名");
       对象.属性="属性值"
       对象.setAttribute(属性名,属性值)
       对象.getAttribute(属性名,属性值)
    3>创建文本节点
       对象.innerHTML="";
       document.createTextNode("文本");

二、修改(替换)节点

   父对象.replaceChild(要修改的对象,被修改的);
例如：
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <script type="text/javascript">
        function add () {
            var txt = document.createTextNode("tset");
            var p = document.createElement("p");
            p.appendChild(txt);
            var div1 = document.getElementById("div1");
            div1.replaceChild(p,document.getElementById("p2"));
        }
    </script>
</head>
<body>
    <div id="div1">
        <p id="p1">测试数据1</p>
        <p id="p2">车市数据2</p>
    </div>
    <a href="javascript:add()">点我</a>
</body>
</html>
输出：点击按钮，test替换id=“p2”的p的内容
测试数据1
tset

三、追加到页面当中

    父对象.appendChild(追加的对象) 插入到最后
    父对象.insertBefore(要插入的对象,之前的对象) 插入到最后
例如：
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <script type="text/javascript">
        function add() {
            var txt = document.createTextNode("测试数据");
            var p = document.createElement("p");
            p.appendChild(txt);
            var div1 = document.getElementById("div1");
            div1.insertBefore(p, document.getElementById("p2"));
        }
    </script>
</head>
<body>
<div id="div1">
    <p id="p1">测试数据1</p>
    <p id="p2">测试数据1</p>
</div>
<a href="javascript:add();">点击</a>
</body>
</html>
输出：点击按钮时，在id=“p2”文本节点前插入新的文本节点；
测试数据1
测试数据
        测试数据1

四、删除节点

   父对象.removeChild(删除的对象)
如果确定要删除节点，最好也清空内存对象=null;
例如：
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">

    </style>
    <script type="text/javascript">
        function login() {
            var div = document.createElement("div");
            div.style.width = "600px";
            div.style.height = "300px";
            div.style.backgroundColor = "#999999";
            div.style.position = "absolute";
            div.style.top = "100px";
            div.style.left = ((window.innerWidth - 600) / 2) + "px";
            var btn = document.createElement("a");
            btn.innerHTML = "X";
            btn.style.display = "block";
            btn.style.width = "20px";
            btn.style.height = "20px";
            btn.style.backgroundColor = "red";
            btn.style.float = "right";
            btn.onclick = function() {
                document.body.removeChild(div);
                div = null;
            };
            div.appendChild(btn);
            document.body.appendChild(div);
        }
    </script>
</head>
<body>
<a href="javascript: login()">登录</a>
</body>
</html>