从零开始学 Web之DOM(三)innerText与innerHTML、自定义属性

Daotin的梦呓

从零基础学 Web 前端

大家好,这里是「 Daotin的梦呓 」从零开始学 Web 系列教程。此文首发于「Daotin的梦呓」公众号,同时也会同步到我的相关博客,可以从

关于我

找到我的博客地址,也欢迎大家订阅关注。在这里我会从 Web 前端零基础开始,一步步学习 Web 相关的知识点,期间也会分享一些好玩的项目。现在就让我们一起进入 Web 前端学习的冒险之旅吧!

一、兼容代码

1、封装 innerText 和 TextContent

1、设置成对标签中文本内容:

innerText属性是 IE8 标准属性,chrome,fireFox,IE8都支持。

textContent是W3C标准属性,chrome,firefox支持,IE8不支持。

2、获取成对标签中文本内容:

在 IE8 下使用 textContent 获取成对标签中文本内容,返回值为 undefined。

那么说明,浏览器不支持的属性的类型都为 undefined.

通过判断元素有无 textContent 属性(没有则元素的 textContent 属性为 undefined)来决定用 innerText 还是 textContent。

2、innerText 和 innerHTML

innerText 属性:设置和获取只能得到文本内容。

innerHTML 属性:不仅可以获得文本内容,还可以设置和获取 html 标签,让其显示或得到对应标签的格式。

二、自定义属性操作(设置,获取,移除)

1、标签中自定义的属性是不能通过 的方式获取的,因为这个属性在DOM里面不存在,强行获取只能是 undefined。

2、相应的,设置也是一样的,通过 的方式设置自定义标签,结果设置的只是DOM对象的自定义属性,这个自定义属性不会在标签上显示出来。

获取:通过 来获取自定义属性的值。

设置:通过 来设置自定义属性。

移除:通过 来设置自定义属性。

PS:removeAttibute 也可以用来移除元素自带的属性,比如类 class 属性等。

欢迎关注

Daotin的梦呓

如果觉得不错,欢迎分享给其他的小伙伴们 :)

  • 发表于:
  • 原文链接:https://kuaibao.qq.com/s/20180619G12PQX00?refer=cp_1026
  • 腾讯「云+社区」是腾讯内容开放平台帐号(企鹅号)传播渠道之一,根据《腾讯内容开放平台服务协议》转载发布内容。

扫码关注云+社区

领取腾讯云代金券