首页 > 编程笔记 > JavaScript笔记 阅读:114

JS nodeValue和data属性:获取指定元素包含的文本

JavaScript 中,使用 nodeValue 或 data 属性可以访问文本节点包含的文本。使用 length 属性可以获取包含文本的长度,利用该属性可以遍历文本节点中每个字符。

示例

设计一个读取元素包含文本的通用方法。
//获取指定元素包含的文本
//参数:e 表示指定元素
//返回包含的所有文本,包括子元素中包含的文本
function text(e) {
    var s = "";
    var e = e.childNodes || e;  //判断元素是否包含子节点
    for (var i = 0; i < e.length; i ++) {  //遍历所有子节点
        //通过递归遍历所有元素的子节点
        s += e[i].nodeType != 1 ? e[i].nodeValue : text(e[i].childNodes);
    }
    return s;
}
在上面函数中,通过递归函数检索指定元素的所有子节点,然后判断每个子节点的类型,如果不是元素,则读取该节点的值,否则继续递归遍历该元素包含的所有子节点。

下面使用上面定义的通用方法读取 div 元素包含的所有文本信息。
<div id="div1">
    <span class="red">div</span>
    元素
</div>
<script>
    var div = document.getElementById("div1");
    var s = text(div);  //调用读取元素的文本通用方法
    console.log(s);  //返回字符串“div 元素”
</script>
这个通用方法不仅可以在 HTML DOM 中使用,也可以在 XML DOM 文档中工作,并兼容不同的浏览器。

爱面试的程序媛,一个分享面试经验的公众号。跟着站长一起学习,每天都有进步。

通俗易懂,深入浅出,定时分享程序员面试的那点事。

面试如何造火箭?工作如何拧螺丝?都在这个公号哦。

扫描二维码关注公众号,免费领取价值 1000 元的求职面试资料(限时免费)!

当你决定关注「爱面试的程序媛」,你已然超越了90%的程序员!

爱面试的程序媛二维码
微信扫描二维码关注

所有教程

优秀文章