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

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

一、兼容代码

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")

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏闻道于事

第二天0605下午——超链接<a>与图片<img>

今天下午学习了超链接<a>标签和图片<img>标签,以下面代码为例: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 ...

3528
来自专栏每日一篇技术文章

weex-09-组件text的用法

1.怎么给text 组件赋值 2.怎么设置组件的背景颜色和字体颜色 3.怎么给设置组建的边框颜色,宽度,样式 4.怎么设置文字斜体 加粗 下划线等 5....

2492
来自专栏cnblogs

如何写好CSS系列之表单(form)

     表单模块可以分为两部分:一是表单的布局,也就是规范表单元素单元的排列位置;二是表单元素,如:输入框、单选、复选、列表组件、搜索组件等,由于列表组件、搜...

2519
来自专栏王磊的博客

React Native顶|底部导航使用小技巧

导航一直是App开发中比较重要的一个组件,ReactNative提供了两种导航组件供我们使用,分别是:NavigatorIOS和Navigator,但是前者只能...

3096
来自专栏十月梦想

jq获取滚动条距离

最近开学了,也在写新的项目,很多实例都用到了滚动条的距离,判断距离显示指定的内容(主要用于顶部导航的固定)

942
来自专栏Google Dart

AngularDart Material Design 弹出框 顶

(adsbygoogle = window.adsbygoogle || []).push({}); fun...

642
来自专栏.Net移动开发

.Net语言 APP开发平台——Smobiler学习日志:手机应用的TextTabBar快速实现方式

设置控件字体的颜色,将该属性设置为“95, 100, 110”,表示RGB颜色,如图2;

834
来自专栏iOS122-移动混合开发研究院

PBJVision 快速在应用中集成相机/拍摄功能

PBJVision 简介 PBJVision, 是一个iOS相机操作的封装库,可以让你的应用快速简单地继承相机相关功能. 最新示例:点击下载 注意: 示例需要在...

2116
来自专栏小巫技术博客

A018-布局之TableLayout

表格布局,顾名思义像表格一样进行布局。我们通常配合TableRow一起使用,TableRow代表一行,有多少个TableRow就有多少行。

872
来自专栏DeveWork

解决Chrome或其它WebKit浏览器input和textarea的黄色/蓝色边框问题

之前在折腾主题的时候发现一个很怪的现象,在Chrome浏览器下,输入框有一个黄色的边框;而在其它WebKit浏览器(如Jeff使用的傲游浏览器)下,输入框的颜色...

2796

扫码关注云+社区

领取腾讯云代金券