从零开始学 Web 之 DOM(三)innerText与innerHTML、自定义属性-阿里云开发者社区

开发者社区> daotin> 正文

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

简介: 大家好,这里是「 Daotin的梦呓 」从零开始学 Web 系列教程。此文首发于「 Daotin的梦呓 」公众号,欢迎大家订阅关注。在这里我会从 Web 前端零基础开始,一步步学习 Web 相关的知识点,期间也会分享一些好玩的项目。
+关注继续查看

大家好,这里是「 Daotin的梦呓 」从零开始学 Web 系列教程。此文首发于「 Daotin的梦呓 」公众号,欢迎大家订阅关注。在这里我会从 Web 前端零基础开始,一步步学习 Web 相关的知识点,期间也会分享一些好玩的项目。现在就让我们一起进入 Web 前端学习的冒险之旅吧!

img_25336e0b5504f9a5b326090f41d9dcd7.png

一、兼容代码

1、封装 innerText 和 TextContent

// 设置任意标签的文本内容为任意内容
        function setText(element, text) {
            (typeof element.TextContent === "undefined") ? (element.innerText = text) : (element.textContent = text);
        }

        // 获取任意标签的文本内容
        function getText(element) {
            return (typeof element.TextContent === "undefined" ? element.innerText : element.textContent);
        }

// 示例代码
        my$("btn").onclick = function () {
            setText(my$("dv"), "hahahhahha");
        };

        my$("btn").onclick = function () {
            console.log(getText(my$("dv")));
        };

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

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

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

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

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

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

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

2、innerText 和 innerHTML

    <div id="dv">
        哈哈
        <p>p标签</p>
    </div>

    <script src="common.js"></script>
    <script>
        my$("dv").innerText = "div标签"; // 只显示文本
        my$("dv").innerHTML = "div标签"; // 只显示文本

        my$("dv").innerText = "<a href='#'>a标签</a>"; // 只显示文本
        my$("dv").innerHTML = "<a href='#'>a标签</a>"; // 带有a标签格式

        console.log(my$("dv").innerText); // 哈哈 p标签
        console.log(my$("dv").innerHTML); // 哈哈 <p>p标签</p>
    </script>

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

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


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

<p>p标签</p>
<script src="common.js"></script>
<script>
      var pObj = document.getElementsByTagName("p")[0];
      pObj.setAttribute("hello", "world"); // <p hello="world">p标签</p>
console.log(pObj.getAttribute("hello")); // world
</script>

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

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

获取:通过DOM对象 .getAttibute("自定义属性的名字") 来获取自定义属性的值。

设置:通过DOM对象 .setAttibute("自定义属性的名字", "自定义属性的值") 来设置自定义属性。

移除:通过DOM对象 .removeAttibute("自定义属性的名字") 来设置自定义属性。

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

img_25336e0b5504f9a5b326090f41d9dcd7.png

img_44cd409fb9a85d884c4a306cf455f565.png

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
从零开始学 Web 之 DOM(四)节点
大家好,这里是「 Daotin的梦呓 」从零开始学 Web 系列教程。此文首发于「 Daotin的梦呓 」公众号,欢迎大家订阅关注。在这里我会从 Web 前端零基础开始,一步步学习 Web 相关的知识点,期间也会分享一些好玩的项目。
1020 0
从零开始学 Web 之 DOM(三)innerText与innerHTML、自定义属性
大家好,这里是「 Daotin的梦呓 」从零开始学 Web 系列教程。此文首发于「 Daotin的梦呓 」公众号,欢迎大家订阅关注。在这里我会从 Web 前端零基础开始,一步步学习 Web 相关的知识点,期间也会分享一些好玩的项目。
1093 0
Asp.Net Web API 2第八课——Web API 2中的属性路由
原文:Asp.Net Web API 2第八课——Web API 2中的属性路由 前言 阅读本文之前,您也可以到Asp.Net Web API 2 系列导航进行查看 http://www.cnblogs.com/aehyok/p/3446289.html   路由就是Web API如何把URI匹配到一个Action的描述。
838 0
自定义View - 简单的TextView封装
引言 在平常的开发中,我们总会有各种各样的按钮,圆角的、直角的、正常状态的、按下状态的、禁用状态的。一直的做法就是在drawable中写一个selector,然后用item加shap来实现。
928 0
从零开始学 Web 之 JavaScript(一)JavaScript概述
大家好,这里是「 Daotin的梦呓 」从零开始学 Web 系列教程。此文首发于「 Daotin的梦呓 」公众号,欢迎大家订阅关注。在这里我会从 Web 前端零基础开始,一步步学习 Web 相关的知识点,期间也会分享一些好玩的项目。
1924 0
Flink批处理优化器之数据属性
在一段时间之前我们已介绍过IP(Interesting Property)对于优化器的意义以及它将对优化器的优化决策产生的影响。本篇我们将介绍Flink的批处理优化器中涉及到的所有的IP,我们将其统称为数据属性。
1058 0
阿里云容器服务--自定义路由和负载均衡策略
阿里云容器服务已经提供了默认的简单路由服务来提供http请求的路由和负载均衡,但是对某些对路由和负载均衡有定制需求的用户来说,这往往不能满足用户的需求,下面我们就来介绍阿里云容器服务推出的自定义路由镜像acs/proxy
9823 0
transient:将属性脱离序列化 | 带你学《Java语言高级特性》之七十一
transient关键字是类似于static、final等关键字的修饰符,它可以使类中的属性在序列化时跳过该属性,本节将为读者介绍其相关内容与用法。
566 0
android AutoCompleteTextView 自定义BaseAdapter
最近项目中需要做搜索功能,实现类似 Google、Baidu 搜索的 下拉提示效果。Android为我们提供了 AutoCompleteTextView 控件来完成此功能。 网上好多例子都是简单使用 ArrayAdapter 来实现的,界面比较简单,实际项目中用处不大;自己研究了一番,自定义Adapter 继承BaseAdapter 并实现Filterable 接口 实现了上述功能。
964 0
duilib 修复Text控件无法设置宽度的bug,增加自动加算宽度的属性
转载请说明原出处,谢谢~~:       今天有朋友反映CTextUI控件无法设置宽度,于是修复了这个bug,顺便给Text控件增加了一个自动计算宽度的属性,描述如下       bug出现在EstimeteSize函数,...
925 0
+关注
daotin
一个嵌入式工程师转型 Web 前端的学习之路。
81
文章
0
问答
文章排行榜
最热
最新
相关电子书
更多
《2021云上架构与运维峰会演讲合集》
立即下载
《零基础CSS入门教程》
立即下载
《零基础HTML入门教程》
立即下载