js温故而知新9(操作DOM)——学习廖雪峰的js教程

摘要：根节点已经自动绑定为全局变量。如果写入的字符串是通过网络拿到了，要注意对字符编码来避免攻击。修改也是经常需要的操作。当你遍历一个父节点的子节点并进行删除操作时，要注意，属性是一个只读属性，并且它在子节点变化时会实时更新。

操作一个DOM节点实际上就是这么几个操作：更新、遍历、添加、删除。

由于ID在HTML文档中是唯一的，所以document.getElementById()可以直接定位唯一的一个DOM节点。document.getElementsByTagName()和document.getElementsByClassName()总是返回一组DOM节点。要精确地选择DOM，可以先定位父节点，再从父节点开始选择，以缩小范围。

// 返回ID为"test"的节点：
var test = document.getElementById("test");

// 先定位ID为"test-table"的节点，再返回其内部所有tr节点：
var trs = document.getElementById("test-table").getElementsByTagName("tr");

// 先定位ID为"test-div"的节点，再返回其内部所有class包含red的节点：
var reds = document.getElementById("test-div").getElementsByClassName("red");

// 获取节点test下的所有直属子节点:
var cs = test.children;

// 获取节点test下第一个、最后一个子节点：
var first = test.firstElementChild;
var last = test.lastElementChild;

第二种方法是使用querySelector()和querySelectorAll()，需要了解selector语法，然后使用条件来获取节点，更加方便：

// 通过querySelector获取ID为q1的节点：
var q1 = document.querySelector("#q1");

// 通过querySelectorAll获取q1节点内的符合条件的所有节点：
var ps = q1.querySelectorAll("div.highlighted > p");  

注意：低版本的IE<8不支持querySelector和querySelectorAll。IE8仅有限支持。

严格地讲，我们这里的DOM节点是指Element，但是DOM节点实际上是Node，在HTML中，Node包括Element、Comment、CDATA_SECTION等很多种，以及根节点Document类型，但是，绝大多数时候我们只关心Element，也就是实际控制页面结构的Node，其他类型的Node忽略即可。根节点Document已经自动绑定为全局变量document。

## 2.更新DOM ##
可以直接修改节点的文本，方法有两种：

一种是修改innerHTML属性，这个方式非常强大，不但可以修改一个DOM节点的文本内容，还可以直接通过HTML片段修改DOM节点内部的子树：

// 获取
...
var p = document.getElementById("p-id");
// 设置文本为abc:
p.innerHTML = "ABC"; // 
ABC
// 设置HTML:
p.innerHTML = "ABC RED XYZ";
// 
...
的内部结构已修改  

用innerHTML时要注意，是否需要写入HTML。如果写入的字符串是通过网络拿到了，要注意对字符编码来避免XSS攻击。

第二种是修改innerText或textContent属性，这样可以自动对字符串进行HTML编码，保证无法设置任何HTML标签：

// 获取
...
var p = document.getElementById("p-id");
// 设置文本:
p.innerText = "";
// HTML被自动编码，无法设置一个

两者的区别在于读取属性时，innerText不返回隐藏元素的文本，而textContent返回所有文本。另外注意IE<9不支持textContent。

修改CSS也是经常需要的操作。DOM节点的style属性对应所有的CSS，可以直接获取或设置。因为CSS允许font-size这样的名称，但它并非JavaScript有效的属性名，所以需要在JavaScript中改写为驼峰式命名fontSize：

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

当我们获得了某个DOM节点，想在这个DOM节点内插入新的DOM，应该如何做？

如果这个DOM节点是空的，例如，

如果这个DOM节点不是空的，那就不能这么做，因为innerHTML会直接替换掉原来的所有子节点。

有两个办法可以插入新的节点。一个是使用appendChild，把一个子节点添加到父节点的最后一个子节点。例如：

JavaScript

    
Java
    
Python
    
Scheme

把

JavaScript

var
    js = document.getElementById("js"),
    list = document.getElementById("list");
    list.appendChild(js);

    
Java
    
Python
    
Scheme
    
JavaScript

var
    list = document.getElementById("list"),
    haskell = document.createElement("p");
    haskell.id = "haskell";
    haskell.innerText = "Haskell";
    list.appendChild(haskell);

    
Java
    
Python
    
Scheme
    
Haskell