摘要:获取文本内容属性表示页面指定节点及其后代节点的文本内容。需要说明的是,在上述语法结构中,调用属性的表示元素节点。本教程采用知识共享署名非商业性使用禁止演绎国际许可协议进行许可。
Node 对象提供了 textContent 属性实现获取或设置 HTML 页面中指定元素的文本内容。
获取文本内容textContent 属性表示 HTML 页面指定节点及其后代节点的文本内容。其语法格式如下:
var text = element.textContent;
在上述语法结构中,返回值 text 表示 element 节点及其后代节点的文本内容。
需要说明的是,在上述语法结构中,调用 textContent 属性的 element 表示元素节点。元素节点本身也是一个元素。
值得注意的是: 如果指定节点是 Document 文档节点的话,textContent 返回 null。
我们可以通过如下代码示例,测试如何通过 textContent 属性获取指定节点的文本内容:
var pElement = document.getElementById("p"); console.log(pElement.textContent);
设置文本内容值得注意的是: 如果指定节点的后代节点也包含文本内容的话,那该节点调用 textContent 属性时,则会返回该节点及其所有后代节点的文本内容。
如下 HTML 页面结构:
这是一个段落内容。
如果我们通过上述
元素调用 textContent 属性的话,得到的结果并不是如下结果:
这是一个内容。而是如下结果:
这是一个段落内容。
通过 textContent 属性不仅可以获取 HTML 页面中指定节点及其后代节点的文本内容,还可以设置指定节点的文本内容。其语法结构如下:
element.textContent = "this is some sample text";
值得注意的是: 在节点上设置 textContent 属性的话,会删除它的所有子节点,并替换为一个具有给定值的文本节点。
我们可以通过如下代码示例,测试如何通过 textContent 属性设置指定节点的文本内容:
var btn = document.getElementById("btn"); btn.textContent = "A New Button";innerText 属性
IE 引入了 node.innerText 属性,意图类似 textContent。但有以下区别:
textContent 会获取所有元素的内容,包括 和 元素,然而 innerText 不会。
innerText 意识到样式,并且不会返回隐藏元素的文本,而 textContent 会。
由于 innerText 受 CSS 样式的影响,它会触发重排(reflow),但 textContent 不会。
在 IE (小于等于 IE11 的版本) 中对 innerText 进行修改,不仅会移除当前元素的子节点,而且还会永久性地破坏所有后代文本节点。
关于 innerText 属性的具体用法请参考 MSDN社区的相关说明。
浏览器兼容问题解决方案在实际开发中,我们需要尽量满足所有浏览器对文本内容操作的需求。所以,我们可以使用如下代码解决浏览器之间的兼容问题:
function text(elem, text){ if(text){ elem.textContent ? elem.textContent = text : elem.innerText = text; }else{ if(elem.textContent){ // 表示其他浏览器 return elem.textContent; }else{ // 表示 IE 浏览器 return elem.innerText; } } }
本教程免费开源,任何人都可以免费学习、分享,甚至可以进行修改。但需要注明作者及来源,并且不能用于商业。
本教程采用知识共享署名-非商业性使用-禁止演绎 4.0 国际许可协议进行许可。
文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。
转载请注明本文地址:https://www.ucloud.cn/yun/87188.html
摘要:对象的作用对象作为访问和更新页面内容的入口。这个结果充分地说明了对象在的标准规范中代表整个页面。对象的继承链对象是继承于对象的。对象也是的标准规范中非常重要的对象之一,而对象又是继承于对象。 Document 对象是 DOM 的标准规范中比较重要的对象之一。该对象提供了访问和更新 HTML 页面内容的属性和方法。 Document 对象的作用 Document 对象作为 DOM 访问和...
摘要:系列教程是一套免费开源,任何人都可以免费学习分享,甚至可以进行修改。本文是这套系列教程的索引也就是目录第一回介绍在最开始,我们先来了解是什么的作用,以及浏览器的支持是怎么样的。 《EASYDOM》系列教程是一套免费、开源,任何人都可以免费学习、分享,甚至可以进行修改。但需要注明作者及来源,并且不能用于商业。 本文是这套系列教程的索引(也就是目录): 第一回 DOM 介绍 在最开始,我...
摘要:对象提供了属性用于实现获取或设置页面指定元素的代码。需要说明的是,在上述语法结构中,调用属性的表示元素节点。但需要注明作者及来源,并且不能用于商业。本教程采用知识共享署名非商业性使用禁止演绎国际许可协议进行许可。 Element 对象提供了 innerHTML 属性用于实现获取或设置 HTML 页面指定元素的 HTML 代码。 获取 HTML 代码 innerHTML 属性表示 HTM...
摘要:而标准规范中提供了对象,主要是依靠元素树结构访问和更新页面的内容。值得注意的是所有的页面的元素都是对象,而这个对象又是继承于对象的。我们可以简单地理解对象是对象的补充。本教程采用知识共享署名非商业性使用禁止演绎国际许可协议进行许可。 DOM 的标准规范中提供了 Element 对象,该对象提供了 HTML 页面中所有元素所具有的属性和方法。 我们都知道 DOM 标准规范中提供了 Nod...
摘要:对象提供了可以创建元素节点属性节点和文本节点的方法,方便更新页面中的元素。是返回值,表示创建的元素。最后,通过方法创建属性节点,并设置了属性值为,再将该属性节点添加到新创建的元素中。 Document 对象提供了可以创建元素节点、属性节点和文本节点的方法,方便 DOM 更新 HTML 页面中的元素。 创建元素节点 Document 对象提供了 createElement() 方法创建元...
阅读 1828·2021-11-25 09:43
阅读 3663·2021-11-24 10:32
阅读 1044·2021-10-13 09:39
阅读 2270·2021-09-10 11:24
阅读 3317·2021-07-25 21:37
阅读 3454·2019-08-30 15:56
阅读 820·2019-08-30 15:44
阅读 1425·2019-08-30 13:18