总结操作标签的内容

前两期分别给大家总结了获取标签的方法和设置样式的方法,如果想具体了解获取标签的方法和设置样式的方法,可以回复“获取标签”和“设置样式”到“HTML5学堂”公众号。在实现页面交互效果的时候,操作标签的内容是必不可少的,所以今天我们要给大家总结的是操作标签的内容。

本文内容概要:

1 innerHTML与outerHTML属性

2 innerText与outerText属性

3 课后作业

1 innerHTML与outerHTML属性

前几期我们接触了innerHTML属性,利用它来获取和设置标签的内容,具体我们来看一下innerHTML与outerHTML属性有什么区别?

获取标签内容的实例:

<div class="wrap" id="wrapEle">
    <dl>
        <dt>梦幻雪冰</dt>
        <dd>陈能堡</dd>
    </dl>
    <dl>
        <dt>独行冰海</dt>
        <dd>刘国利</dd>
    </dl>
</div>
<script type="text/javascript">
    var wrapObj = document.getElementById('wrapEle');


    // 利用innerHTML和outerHTML属性获取标签的内容
    console.log(wrapObj.innerHTML);
    console.log(wrapObj.outerHTML);
</script>

结果:

IE6~8

其它主流浏览器

代码分析:

  1. innerHTML属性能够获取元素内的内容(包含标签),outerHTML属性能够获取元素内的内容(包含标签),但是会包含本身的元素;
  2. IE6~8会将获取到的标签全部转换为大写形式。而谷歌、火狐会将内容按照原来的格式返回HTML,包括空格和缩进;

innerHTML设置标签内容的实例:

<div class="wrap" id="wrapEle">
    <dl>
        <dt>梦幻雪冰</dt>
        <dd>陈能堡</dd>
    </dl>
    <dl>
        <dt>独行冰海</dt>
        <dd>刘国利</dd>
    </dl>
</div>
<script type="text/javascript">
    var wrapObj = document.getElementById('wrapEle');


    // 利用innerHTML属性设置标签的内容
    wrapObj.innerHTML = '利用innerHTML属性设置标签的内容';
</script>

结果:

代码分析:

innerHTML属性替换标签内的所有内容,但是不包含本身(即当前调用的元素);

outerHTML设置标签内容的实例:

<div class="wrap" id="wrapEle">
    <dl>
        <dt>梦幻雪冰</dt>
        <dd>陈能堡</dd>
    </dl>
    <dl>
        <dt>独行冰海</dt>
        <dd>刘国利</dd>
    </dl>
</div>
<script type="text/javascript">
    var wrapObj = document.getElementById('wrapEle');


    // 利用outerHTML属性设置标签的内容
    wrapObj.outerHTML = '利用outerHTML属性设置标签的内容';
</script>

结果:

代码分析:

outerHTML属性替换标签内的所有内容,但是也会把本身给替换掉(如:id名为wrapEle的标签被替换了);

innerHTML与outerHTML属性总结

  1. innerHTML和outerHTML :能够获取/设置元素的内容(元素内容可以包含标签);
  2. 在获取和设置的时候,innerHTML操作的是标签内的内容,outerHTML操作的是标签内的内容并且包含本身;
  3. IE6~8会将获取到的标签全部转换为大写形式。而谷歌、火狐会将内容按照原来的格式返回HTML,包括空格和缩进;

2 innerText与outerText属性

能够操作标签内容的不仅仅只有innerHTML和outerHTML属性,还有innerText与outerText属性也可以操作标签的内容,具体我们往下看吧。

获取标签内容的实例:

<div class="wrap" id="wrapEle">
    <dl>
        <dt>梦幻雪冰</dt>
        <dd>陈能堡</dd>
    </dl>
    <dl>
        <dt>独行冰海</dt>
        <dd>刘国利</dd>
    </dl>
</div>
<script type="text/javascript">
    var wrapObj = document.getElementById('wrapEle');


    // 利用innerText和outerText属性获取标签的内容
    console.log(wrapObj.innerText);
    console.log(wrapObj.outerText);
</script>

结果:

火狐浏览器下

其它主流浏览器

代码分析:

  1. innerText与outerText属性获取标签内的内容(不包含标签,只获取文本内容);
  2. 火狐浏览器不支持outerText属性,所以获取的结果为undefined;

innerText设置标签内容的实例:

<div class="wrap" id="wrapEle">
    <dl>
        <dt>梦幻雪冰</dt>
        <dd>陈能堡</dd>
    </dl>
    <dl>
        <dt>独行冰海</dt>
        <dd>刘国利</dd>
    </dl>
</div>
<script type="text/javascript">
    var wrapObj = document.getElementById('wrapEle');


    // 利用innerText属性设置标签的内容
    wrapObj.innerText = '利用innerText属性设置标签的内容';
</script>

结果:

代码分析:

innerText属性替换标签内的所有内容,但是不包含本身;

outerText设置标签内容的实例:

<div class="wrap" id="wrapEle">
    <dl>
        <dt>梦幻雪冰</dt>
        <dd>陈能堡</dd>
    </dl>
    <dl>
        <dt>独行冰海</dt>
        <dd>刘国利</dd>
    </dl>
</div>
<script type="text/javascript">
    var wrapObj = document.getElementById('wrapEle');


    // 利用outerText属性设置标签的内容
    wrapObj.outerText = '利用outerText属性设置标签的内容';
</script>

结果:

火狐浏览器

其它主流浏览器

代码分析:

  1. outerText属性替换标签内的所有内容,但是也会把本身给替换掉(如:id名为wrapEle的标签被替换了);
  2. 因为outerText不被火狐浏览器支持,所以在火狐浏览器下不能使用它操作标签的内容;

innerText与outerText属性总结

  1. innerText ourterText :能够获取/设置元素的内容(元素内容是文本内容);
  2. innerText与outerText获取标签内容的时候是具有相同功能;
  3. innerText与outerText设置标签内容的时候,outerText属性替换标签内的所有内容,但是也会把本身给替换掉,innerText属性替换标签内的所有内容,但是不包含本身;
  4. 火狐浏览器不支持outerText属性;

3 课后作业

效果:九九乘法表

基本要求:

  • 布局需兼容IE9+、谷歌、火狐等浏览器
  • 初始的结构代码如下:<div class="wrap clearfix"id="box"></div>
  • JavaScript代码不能超过20行

原文发布于微信公众号 - HTML5学堂(h5course-com)

原文发表时间:2016-06-16

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

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏王磊的博客

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

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

2976
来自专栏全沾开发(huā)

如何使用CSS绘制一个响应式的矩形

如何使用CSS绘制一个响应式的矩形 背景: 最近因为需要用到绘制类似九宫格的需求,所以研究了一下响应式矩形的实现方案。 有如下几种方案...

32210
来自专栏二次元

用CSS3绘制iPhone手机

本博客所有文章如无特别注明均为原创。作者:阿珏 ,复制或转载请以超链接形式注明转自 阿珏博客 。 原文地址《用CSS3绘制iPhone手机》

1180
来自专栏小巫技术博客

A018-布局之TableLayout

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

822
来自专栏机器学习从入门到成神

image的srcset属性

介绍 响应式页面中经常用到根据屏幕密度设置不同的图片。这个时候肯定会用到image标签的srcset属性。srcset属性用于设置不同屏幕密度下,imag...

1271
来自专栏阮一峰的网络日志

自适应网页设计(Responsive Web Design)

随着3G的普及,越来越多的人使用手机上网。 移动设备正超过桌面设备,成为访问互联网的最常见终端。于是,网页设计师不得不面对一个难题:如何才能在不同大小的设备上呈...

9477
来自专栏河湾欢儿的专栏

常见选择器

Id选择器(同一页面不能重名)# 类选择器 . 标签选择器 p 包含选择器 .box p 群组选择器 , 通配符 *

792
来自专栏HTML5学堂

Form表单 问题多多(中)

HTML5学堂 - 刘国利:在上一篇的博文当中,主要讲解了表单的嵌套规则与书写习惯。在本篇博文当中,我主要就具体的样式实现进行一下讲解,并提一下表单相关的浏览器...

3065
来自专栏yl 成长笔记

ps 替换背景以及调整尺寸

领导吩咐我修改她的图片背景,尺寸, 屁颠屁颠去弄,半小时后发现大学里学的 ps 忘差不多了,这里总结一下修改图片背景以及尺寸的基本操作。

883
来自专栏KK的小酒馆

android.support.v7.widget.SwitchCompat

SwitchCompat是符合谷歌Material design的Selection control组件,与传统的Switch以及ToggleButton不同,...

2123

扫码关注云+社区