一、文本内容操作

　　内容：　　

<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  事件在失去焦点时触发

Dom选择器--内容文本操作的更多相关文章

  1. Dom选择器以及内容文本操作

    1. DOM:文档对象模型.把整个HTML当做大的对象.每一个标签认为是一个对象.(每一个个体就是一个对象) 2. 查找: 直接查找 var obj=document.getElementById(& ...

  2. jQuery 选择器 筛选器 样式操作 文本操作 属性操作 文档处理 事件 动画效果 插件 each、data、Ajax

    jQuery jQuery介绍 1.jQuery是一个轻量级的.兼容多浏览器的JavaScript库. 2.jQuery使用户能够更方便地处理HTML Document.Events.实现动画效果.方 ...

  3. Unit01： jQuery概述 、 jQuery选择器 、 jQuery操作DOM

    Unit01: jQuery概述 . jQuery选择器 . jQuery操作DOM 使用jQuery放大字体: <!DOCTYPE html> <html> <head ...

  4. 前端（十八）—— jQuery高级操作：选择器、文本属性与类、事件、文档操作、动画、结构关系

    JQ选择器.文本属性与类.事件.文档操作.动画.结构关系 可参考jQuery的API文档 一.选择器 1.css语法匹配 标签 | 类 | id | 交集 群组 | 后代 | 兄弟 伪类 | 属性 $ ...

  5. jQuery初识之选择器、样式操作和筛选器(模态框和菜单示例)

    一.jQuery 1.介绍 jQuery是一个快速.简洁的JavaScript框架,是继Prototype之后又一个优秀的JavaScript代码库(或JavaScript框架). jQuery设计的 ...

  6. jQuery选择器及常见操作

    jQuery http://jquery.cuishifeng.cn/ 模块 <=>类库 DOM/BOM/JavaScript的类库 版本: 1.x 1.12 2.x 3.x 转换: jq ...

  7. jQuery入门、jQuery选择器、jQuery操作

    一.什么是jQuery及如何使用 1.1 jQuery 简介 jQuery是一个兼容多浏览器的javascript函数库(把我们常用的一些功能进行了封装,方便我们来调用,提高我们的开发效率.),核心理 ...

  8. 一周学会Mootools 1.4中文教程:(1)Dom选择器

    利器: 君欲善其事须先利其器,好吧因为我们的时间比较紧迫,只有六天而已,那么六天的时间用死记硬背的方式学会Mt犹如天方夜谭,因此我们需要借鉴一下Editplus的素材栏帮我们记忆就好了,当我们需要用到 ...

  9. Dom,查找标签和操作标签

    Dom,查找标签和操作标签 文档对象模型(Document Object Model,DOM)是一种用于HTML和XML文档的编程接口.它给文档提供了一种结构化的表示方法,可以改变文档的内容和呈现方式 ...

随机推荐

  1. （3）学习笔记 ） ASP.NET CORE微服务 Micro-Service ---- Consul服务治理

    Consul是注册中心,服务提供者.服务提供者.服务消费者等都要注册到Consul中,这样就可以实现服务提供者.服务消费者的隔离. 除了Consul之外,还有Eureka.Zookeeper等类似软件 ...

  2. linuxC/C++面试问题总结整理

    linuxC/C++面试问题总结整理 因为一些原因重新找工作了,面的linux c/c++,这里把面试中经常碰到的问题总结一下. linuxC/C++面试问题总结整理 单元测试 关键字const 关键 ...

  3. PAT甲题题解-1109. Group Photo (25)-（模拟拍照排队）

    题意:n个人,要拍成k行排队,每行 n/k人,多余的都在最后一排. 从第一排到最后一排个子是逐渐增高的,即后一排最低的个子要>=前一排的所有人 每排排列规则如下: 1.中间m/2+1为该排最高: ...

  4. PAT甲题题解-1111. Online Map (30)-PAT甲级真题（模板题，两次Dijkstra，同时记下最短路径）

    题意:给了图,以及s和t,让你求s到t花费的最短路程.最短时间,以及输出对应的路径.   对于最短路程,如果路程一样,输出时间最少的. 对于最短时间,如果时间一样,输出节点数最少的.   如果最短路程 ...

  5. 【SE】Week1 : 个人博客作业

    快速看完整部教材,列出你不懂的 5 - 10 个问题,发布在你的个人博客上. 1)针对书中提到的NABCD模型中的N,如何发掘市场不明确的潜在用户需求? 2)PM是否负责团队职责的分配以及工程模块的设 ...

  6. 冲刺Two之站立会议4

    在完成了对主界面的设计之后,我们对自己的聊天室界面进行了优化,添加了一些标签和图片按钮等组件让界面更加美观一些.然后还查询了一些关于改进视频和音频质量的资料,准备开展相关工作.

  7. Yale数据库上的人脸识别

    一.问题分析 1. 问题描述 在Yale数据集上完成以下工作:在给定的人脸库中,通过算法完成人脸识别,算法需要做到能判断出测试的人脸是否属于给定的数据集.如果属于,需要判断出测试的人脸属于数据集中的哪 ...

  8. 团队作业（五）——旅游行业的手机App

    首先是作业要求: 在PM 带领下, 每个团队深入分析下面行业的App, 找到行业的Top 5 (从下面的三个备选中,任选一个行业即可) 英语学习/词典App 笔记App 旅游行业的手机App 我们选择 ...

  9. ubuntu18.04配置nvidia docker和远程连接ssh+远程桌面连接（三）

    ubuntu18.04配置nvidia docker和远程连接ssh+远程桌面连接(三) 本教程适用于想要在远程服务器上配置docker图形界面用于深度学习的用户. (三)配置远程桌面连接访问dock ...

  10. 使用ETL构建数据仓库的思考

    使用ETL构建数据仓库的思考 背景:公司的数据仓库建设项目启动在即,所谓万事开头难,如何在我们数仓建设规划的前期做好业务数据准备和系统建设规划是我们需要思考的问题,这里根据之前的自己参与过的公司ODS ...