JavaScript获取节点——行间样式表的读写

0.前言

  上两节主要讲了获取标签（元素）节点和获取属性节点，今天来讲最后一个节点——获取文本节点。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>获取文本节点</title>
</head>
<body>
    <div id="box"> 
        我是个盒子
    </div>
    <script type="text/javascript">
        var jsDiv = document.getElementById("box");
    </script>
</body>
</html>

1.获取文本节点

（1）元素节点.innerHTML

公式：元素节点.innerHTML
注意：获取到的是元素开始标签到结束标签之间的所有内容，不包含HTML标签本身。
代码：

console.log("*"+jsDiv.innerHTML+"*");

效果：


捕获.PNG


呈现上面的掩饰的原因是：div标签之间的文本是由换行符的，用innerHTML获取文本节点，把换行符也给提取出来了，解决办法是，把他们放在同一行：

<div id="box"> 我是个盒子</div>

效果


捕获.PNG
（2）元素节点.outerHTML

公式：元素节点 . outerHTML
注意：获取到的是除了innerHTML以外，还包含了HTML标签本身
代码：

console.log(jsDiv.outerHTML);

效果：


捕获.PNG
（3）元素节点.innerText

公式：元素节点 . innerText
注意：获取到的是开始标签到结束标签之间的所有文本内容
代码：

console.log(jsDiv.innerText);

效果：


捕获.PNG

2.设置

  能获取，肯定就能改变
公式：元素标签.innerHTML = 新内容
代码：

jsDiv.innerHTML = "<p>我才是那个盒子</p>";
console.log(jsDiv);

效果：


捕获.PNG

3.总结

  终于把获取节点这一部分讲完了，希望对大家有所帮助，给为大哥大姐给点打赏吧，谢谢！！！

posted @ 2017-01-11 15:34  天涯海角路  阅读(146)  评论(0)    收藏  举报