天天观察：归纳分享DOM节点属性知识点

除了XHTML，标签名始终是大写的。浏览器有两种处理文档的模式：HTML和XML。通常HTML模式用于Web页面。当浏览器接收到一个带有Content-Type:application/xml+xhtml的头，就会启用XML模式。在HTML模式中，tagName或者nodeName总是返回大写标签，比如或返回的是BODY；对于XML模式，现在很少使用了。

DOM节点内容

对于DOM节点的内容，JavaScript中提供了几个方法来对其进行操作，比如innerHTML、outerHTML、textContent、innerText、outerText和nodeValue等。接下来，咱们看看他们的使用场景以及相应的差异性。

为了易于帮助大家理解和掌握这向方法的使用，接下来的示例都将围绕着下面这个DOM结构来做处理：

                The paragraph element
        The div

`innerHTML`

innerHTML属性允许我们获取元素的HTML，而且其获取的的值是一个String类型。比如：

let ele = document.getElementById("main")let eleContent = ele.innerHTML; console.log(typeof eleContent, eleContent)

输出的结果如下：

上面看到的是innerHTML属性获取某个元素的内容，当然innerHTML也可以修改某个元素的内容。比如：

let eleP = document.querySelector("p") eleP.innerHTML = "我是一个段落，新修改的内容：我是一个链接"

刷新页面，段落p元素整个内容都将被修改了：

如果使用innerHTML将<script>标签插入到document，它不会被执行。

使用innerHTML可以使用ele.innerHTML += "something"来追回更多的HTML，比如下面这个示例：

let eleP = document.querySelector("p") eleP.innerHTML += "我是一个段落，新修改的内容：" eleP.innerHTML += "我是一个链接"

结果如下：

使用innerHTML要非常小心，因为它做的不是加法，而是完整的覆盖。还有：

当内容为“零输出”（zeroed-out）和从头重写时，所有的图像和其他资源将被重新加载。

`outerHTML`

outerHTML属性包含元素的全部HTML。就像innerHTML的内容加上元素本身一样。从文字难于理解或想象的话，咱们把上面的示例修改一下，通过innerHTML和outerHTML的结果来看其获取的是什么：

let eleP = document.querySelector("p")let eleInner = eleP.innerHTMLlet eleOuter = eleP.outerHTML console.log(">>> innerHTML >>>", eleInner) console.log(">>> outerHTML >>>", eleOuter)

输出的结果：

outerHTML和innerHTML也可以写入，但不同的是：

innerHTML可以写入内容，改变元素，但outerHTML在外部环境中取代了整体!

比如下面这个示例：

let eleP = document.querySelector("p") eleP.outerHTML = "把整个p元素换成div元素
"

从效果和页面源码上截图可以看出来，p替换了p。

outerHTML赋值不修改DOM元素，而是从外部环境中提取它，并插入一个新的HTML片段，而不是它。新手时常在这里会犯错误：修改eleP.outerHTML，然后继续使用eleP，就好像它有新的内容一样。

let eleP = document.querySelector("p") eleP.outerHTML = "把整个p元素换成div元素
" console.log(eleP.innerHTML)

我们可以写入outerHTML，但是要记住，它不会改变我们写入的元素。相反，它会在它的位置上创建新的内容。我们可以通过查询DOM获得对新元素的引用。比如：

let eleP = document.querySelector("p") eleP.outerHTML = "把整个p元素换成div元素
" console.log(">>>> ", eleP) let newEle = document.querySelector(".new") console.log(">>>> ", newEle)

结果如下：

`textContent`

textContent属性和innerHTML以及outerHTML都不一样。textContent只获取元素的纯文本内容，包括其后代元素的内容。比如：

let mainEle = document.querySelector("#main") console.log(">>>> innerHTML >>>>", mainEle.innerHTML) console.log(">>>> outerHTML >>>>", mainEle.outerHTML) console.log(">>>> textContent >>>>", mainEle.textContent)

结果如下：

正如我们所看到的，textContent返回的只有文本内容，就像是把所有HTML元素的标签都删除了，但是它们的文本仍然保留着。正如上面示例中的，innerHTML、outerHTML和textContent输出的结果，可以一目了然知道他们之间的差异性。

textContent和其他两个属性一样，也可以写入内容。但对于textContent的写入更为有用，因为它写入的内容是纯内容，是一种安全方式。而innerHTML和outerHTML都会写入HTML，而会写入HTML标签的方式是一种不安全的形式，容易引起Web的XSS攻击。

XSS我们先忽略，来看看写入的差异性：

let mainEle = document.querySelector("#main") let content = "我要新内容，并带有一个标签：Boo,Waa!!!" mainEle.textContent = content mainEle.innerHTML = content mainEle.outerHTML = content

效果如下：

如果你够仔细的话，会发现，name中的Boo,Waa!!!的标签也被当做文本内容写进去了。如下图所示：

大多数情况之下，我们希望从用户那里得到文本，并希望将其视为文本。我们不希望在我们的网站上出现意想不到的HTML，那么textContent就可以得到你想要的。

`innerText`和`outerText`

innerText和outerText是IE的私有属性，获取的也是元素的文本内容，有点类似于textContent。所以这里只简单的提一提，并不深入展开。如果这里有误，请大大们指正。

`nodeValue`和`data`

innerHTML属性仅对元素节点有效。

其他节点类型有对应的节点：nodeValue和data属性。这两种方法在实际应用中几乎是相同的，只有很小的差异。来看看示例。

    Hello JavaScript!!!!                The paragraph element
        The div 
            
    <script>        console.log(">>> nodeValue >>>", document.body.firstChild.nodeValue)        console.log(">>> data >>>", document.body.firstChild.data)    </script>

他们输出的结果是相同的：