JavaScript学习笔记（七）

1.更新DOM节点

// 获取<p id="p-id">...</p>
var p = document.getElementById('p-id');
// 设置文本为abc:
p.innerHTML = 'ABC'; // <p id="p-id">ABC</p>
// 设置HTML:
p.innerHTML = 'ABC <span style="color:red">RED</span> XYZ';
// <p>...</p>的内部结构已修改
p.innerText = '<script>alert("Hi")</script>';
// HTML被自动编码，无法设置一个<script>节点:
// <p id="p-id">&lt;script&gt;alert("Hi")&lt;/script&gt;</p>

innerText：修改文本的值，无法设置任何HTML标签
innerHTML：可以解析HTML文本标签

修改CSS也是经常需要的操作。DOM节点的style属性对应所有的CSS，可以直接获取或设置。

// 获取<p id="p-id">...</p>
var p = document.getElementById('p-id');
// 设置CSS:
p.style.color = '#ff0000';
p.style.fontSize = '20px';
p.style.paddingTop = '2em';

2.删除DOM节点

要删除一个节点，首先要获得该节点本身以及它的父节点，然后，调用父节点的removeChild把自己删掉：

<body>
    <div id="div1">
        <p id="p1">这是一个段落。</p>
        <p id="p2">这是另外一个段落。</p>
    </div>

    <script> // script标签必须放在body之中
        var child = document.getElementById("p1");
        var parent = document.getElementById("div1"); // 等价于var parent = p1.parentElement;
        parent.removeChild(child); // 等价于 parent.removeChild(p1);
    </script>
</body>

<body>
    <dl id="app">
        <dt id="java">Java</dt>
        <dd id="javase">JavaSE</dd>
        <dd>JavaEE</dd>
    </dl>

    <script src="js/test.js"></script>
</body>
# ---js/test.js---
var dl = document.getElementById("app");
var dd = document.getElementsByTagName("dd");
dl.removeChild(dd[0]);
dl.removeChild(dd[0]);

注意：删除多个节点的时候，children是在时刻变化的，删除节点的时候一定要注意。

以上代码第13行删除“JavaSE”之后，”JavaEE“会动态移动dd[0]的位置！！

补充：