大家好,这里是「 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")

从零开始学 Web 之 DOM(三)innerText与innerHTML、自定义属性的更多相关文章

  1. 从零开始学 Web 之 DOM(一)DOM的概念,对标签操作

    大家好,这里是「 Daotin的梦呓 」从零开始学 Web 系列教程.此文首发于「 Daotin的梦呓 」公众号,欢迎大家订阅关注.在这里我会从 Web 前端零基础开始,一步步学习 Web 相关的知识 ...

  2. 从零开始学 Web 之 DOM(四)节点

    大家好,这里是「 Daotin的梦呓 」从零开始学 Web 系列教程.此文首发于「 Daotin的梦呓 」公众号,欢迎大家订阅关注.在这里我会从 Web 前端零基础开始,一步步学习 Web 相关的知识 ...

  3. 从零开始学 Web 之 DOM(二)对样式的操作,获取元素的方式

    大家好,这里是「 Daotin的梦呓 」从零开始学 Web 系列教程.此文首发于「 Daotin的梦呓 」公众号,欢迎大家订阅关注.在这里我会从 Web 前端零基础开始,一步步学习 Web 相关的知识 ...

  4. 从零开始学 Web 之 DOM(五)元素的创建

    大家好,这里是「 从零开始学 Web 系列教程 」,并在下列地址同步更新...... +-------------------------------------------------------- ...

  5. 从零开始学 Web 之 DOM(六)为元素绑定与解绑事件

    大家好,这里是「 从零开始学 Web 系列教程 」,并在下列地址同步更新...... +-------------------------------------------------------- ...

  6. 从零开始学 Web 之 DOM(七)事件冒泡

    大家好,这里是「 从零开始学 Web 系列教程 」,并在下列地址同步更新...... +-------------------------------------------------------- ...

  7. 从零开始学 Web 系列教程

    大家好,这里是「 从零开始学 Web 系列教程 」,并在下列地址同步更新…… github:https://github.com/Daotin/Web 微信公众号:Web前端之巅 博客园:http:/ ...

  8. 从零开始学 Web 之 Ajax(三)Ajax 概述,快速上手

    大家好,这里是「 从零开始学 Web 系列教程 」,并在下列地址同步更新...... github:https://github.com/Daotin/Web 微信公众号:Web前端之巅 博客园:ht ...

  9. 从零开始学 Web 之 移动Web(三)Zepto

    大家好,这里是「 从零开始学 Web 系列教程 」,并在下列地址同步更新...... github:https://github.com/Daotin/Web 微信公众号:Web前端之巅 博客园:ht ...

随机推荐

  1. Javascript组成--ECMAScript,DOM,BOM

    ECMAScript 部分 ECMAScript是一个标准,JS只是它的一个实现,其他实现包括ActionScript; “ECMAScript可以为不同种类的宿主环境提供核心的脚本编程能力”,即EC ...

  2. unbuntu 安装 teamviewer

    下载 teamviewer 安装包 使用 dpkg 安装 deb 安装包 使用 sudo apt-get install -f 解决依赖问题

  3. C++ 提取网页内容系列之二

    标 题: C++ 提取网页内容系列作 者: itdef链 接: http://www.cnblogs.com/itdef/p/4171203.html 欢迎转帖 请保持文本完整并注明出处 另外一种下载 ...

  4. zeromq学习记录(一)最初的简单示例使用ZMQ_REQ ZMQ_REP

    阅读zeromq guide的一些学习记录 zeromq官方例子 在VC下运行会有些跨平台的错误 我这里有做修改 稍后会发布出来 相关的代码与库  http://download.zeromq.org ...

  5. vue中的import、export、requre的区别

    在es6之前js一直没有自己的模块语法,为了解决这种尴尬就有了require.js的出现.在es6发布之后js又引入了import的概念使得不清楚两者之间的区别的同学在实际使用过程中造成了自己的误解, ...

  6. E: Sub-process /usr/bin/dpkg returned an error code

    E: Sub-process /usr/bin/dpkg returned an error code (1)错误解决 在用apt-get安装软件时出现了类似于install-info: No dir ...

  7. win7访问局域网总提示用户名密码错误解决方案

    win7访问局域网总提示用户名密码错误解决方案 1.点击开始-在搜索栏输入:secpol.msc(或者直接按下win+r键,输入secpol.msc),打开本地安全策略. 2.找到“安全设置”的“本地 ...

  8. 【Mysql】事务的四种特性和隔离级别

    四种特性: 原子性(Atomicity):事务里所有操作视为一个整理,要么全部完成,要么全回滚. 一致性(Consistency):操作前后,数据库内数据逻辑上一致.比如:1w元转账给不同的人,转出去 ...

  9. SignalR 服务器系统配置要求

    SignalR 所支持的服务器版本..NET Framework 版本.IIS和其他组件. SignalR操作系统要求 SignalR组件能够运行在下面的服务器和客户端操作系统.需要注意的是使用Web ...

  10. android-基础编程-ScrollView

    滚动视图(ScrollView)是指当拥有很多内容,屏幕显示不完时,需要通过滚动来显示完整的视图.包括水平滚动视图(HorizontalScrollView)和垂直滚动视图(ScrollView) 基 ...