码迷,mamicode.com
首页 > 其他好文 > 详细

dom节点获取文本的方式

时间:2018-07-10 21:39:14      阅读:166      评论:0      收藏:0      [点我收藏+]

标签:any   支持   div   ali   字符串   bsp   element   tag   padding   

1. innerHTML


innerHTML可以作为获取文本的方法也可以作为修改文本内容的方法 

element.innerHTML 会直接返回element节点下所有的HTML化的文本内容

<body>
        <div>文本</div>
        <div>文本</div>
        
</body>
document.body.innerHTML    //返回"<div>文本</div><div>文本</div>";

同样逆向的:

document.body.innerHTM="<div>文本</div><div></div>"会生成

<body>

    <div>文本</div>
    <div>文本</div>

</body>

!注意 innerHTML方法只能作用于元素节点调用;文本节点并不能使用这个方法返回undefined!


2. nodeValue

nodeValue是一个HTML DOM的对象属性;

同样的 可以通过 nodeValue设置节点的文本内容也可以直接返回文本内容

直接用节点对象调用就都可以: 如上例   

document.getElementsByTagName(div)[0].childNodes[0].nodeValue //返回“文本”


另外 nodeValue 属性并不只存在于文本节点下  元素节点和属性节点对象也都具有nodeValue属性

属性节点的 nodeValue属性返回属性值
元素节点的 nodeValue属性返回null

3.textContent

textContent与innerHTML方法类似会返回对象节点下所有的文本内容

但是区别为 textContent返回的内容只有去HTML化的文本节点的内容 如上例:

document.body.textContent //返回"文本文本" !注意在DOM中标签换行产生的空白字符会计入DOM中作为文本节点

另外IE8以前不支持textContent属性


4.innerText


innerText方法与textContent方法类似 并且和innerHTML一样也是作用于元素节点上

但是浏览器对于这两种方法解析空白字符的机制不一样;不是很常用


类似的还有outText outHTML等类似操作文本相关的方法,不是很常用;

最后要提醒一点:文本与文本节点一定要区分,有些方法是依靠元素节点返回子文本内容,有些方法是文本节点返回自身文本内容,文本节点是对象而文本只是字符串。

dom节点获取文本的方式

标签:any   支持   div   ali   字符串   bsp   element   tag   padding   

原文地址:https://www.cnblogs.com/yunshangwuyou/p/9291133.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!