文档章节

Dom选择器--内容文本操作

o
 osc_1ee7cxmx
发布于 2018/08/06 20:26
字数 463
阅读 14
收藏 0

精选30+云产品,助力企业轻松上云!>>>

一、文本内容操作

   内容:  

<body>
    <div id="i1">
        学习是我快乐?
        <a>晚饭吃什么</a>
    </div>
</body>

  1.1 innerText

  仅仅获取文本内容 

var obj = document.getElementById("i1")

obj
<div id=​"i1">​…​</div>​
obj.innerText
"学习是我快乐? 晚饭吃什么"

// innerText 不能获取对象中的<a>、<span>等标签元素,只能获取文本内容

  即便更改innerText的内容,将其设置为标签形式,显示也是字符串

obj.innerText = '<a herf="https://www.google.com">谷歌</a>'
"<a herf="https://www.google.com">谷歌</a>"

  

  1.2 innerHTML

  可以获取文本内容,也能获取标签信息  

var obj = document.getElementById("i1")

obj.innerHTML
"
        学习是我快乐?
        <a>晚饭吃什么</a>
    "

  将内容设置为a标签  

obj.innerHTML='<a href="https://www.google.com">谷歌</a>'
"<a href="https://www.google.com">谷歌</a>"

  

二、标签值的设置

  2.1 input  

<body>
    <div id="i1">
        <input type="text" id="i2" />
    </div>
</body>

  输入框中原本是没有内容的,我们为其设置value的值 

var obj = document.getElementById("i2")
undefined
obj.value = "君的名字"
"君的名字"

  

  2.2 select

  我们将value的值设置为option标签中value的值,则select选择框中就显示该option的内容

  

  如:

  

 

   2.3 textarea 多行文本框

  可以新增和替换多行文本框中的内容 

<body>
    <div id="i1">
        <textarea id="i4">sssssss</textarea>
    </div>
</body>

  替换:

  

 

 三、输入框随鼠标选中改变状态

  有些输入框中,有默认提示信息,当鼠标移动到输入框时,原有信息自动消失,鼠标移走后,恢复原状。

  事例: 

<body>
    <div style="width:600px;margin:0 auto;">
        <input id="i1" onfocus="Focus();" onblur="Blur();" type="text" value="请输入关键字" />
    </div>

    <script>
        function Focus(){
            var tag = document.getElementById("i1");
            var val = tag.value;
            if(val === "请输入关键字"){
                tag.value = "";
            }
    }

    function Blur(){
        var tag = document.getElementById("i1");
        var val = tag.value;
        if(val.length === 0){
            tag.value = "请输入关键字";
        }
    }
    </script>
</body>

  注:onfocus 事件在获得焦点时触发

               onblur  事件在失去焦点时触发

o
粉丝 0
博文 500
码字总数 0
作品 0
私信 提问
加载中
请先登录后再评论。

暂无文章

面试必问之mysql基础

mysql存储引擎 如何选择mysql存储引擎 先得了解下各个存储引擎区别 功能 MylSAM MEMORY InnoDB Archive 功能 MylSAM MEMORY InnoDB Archive 存储限制 256TB RAM 64TB None 支持事务 No No Ye...

lipengxs
36分钟前
16
0
错误:将标头发送到客户端后无法设置标头 - Error: Can't set headers after they are sent to the client

问题: I'm fairly new to Node.js and I am having some issues. 我对Node.js相当陌生,遇到了一些问题。 I am using Node.js 4.10 and Express 2.4.3. 我正在使用Node.js 4.10和Express 2......

法国红酒甜
47分钟前
18
0
Spring中事务不生效的几种情况

数据库引擎不支持事务。 没有被Spring管理。 方法不是public的。 自身调用问题。 数据源没有配置事务管理器。 不支持事务。 异常被吃了。 异常类型错误。 事务失效类型: 数据库引擎不支持事...

九分石人
今天
31
0
从Linux内核理解JAVA的NIO

前言 IO 可以简单分为磁盘 IO 和 网络 IO ,磁盘 IO 相对于网络 IO 速度会快一点,本文主要介绍 磁盘 IO ,网络 IO 下周写。 JAVA 对 NIO 抽象为 Channel , Channel 又可以分为 FileChannel ...

万古云霄
今天
22
0
Material Design用在c#的wpf app中

官网:http://materialdesigninxaml.net/ 样式丰富 做网站和手机不粗 个人觉得不适合用在.net framework中,在.net core中应该大有作为。...

齐勇cn
今天
28
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部