一、文本内容操作

　　内容：　　

<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. SQL Server 常用内置函数

    本文用于收集在运维中经常使用的系统内置(built-in)函数,持续整理中 一,常用Metadata函数 1,查看数据库的ID和Name db_id(‘DB Name’),db_name('DB ID ...

  2. effective c++ 笔记 (26-29)

    //---------------------------15/04/09---------------------------- //#26   尽可能延后变量定义式的出现时间 { /*  1:只要 ...

  3. Katalon Studio学习笔记(二)——请求响应中文乱码解决方法

    Katalon Studio接口测试发现返回的中文消息是乱码,这是因为KS的编码格式是UTF-8,因此导致中文字体出现乱码.如下图所示: 在我们的系统中添加一个名字为JAVA_TOOL_OPTIONS ...

  4. [T-ARA][Ma boo]

    歌词来源:http://music.163.com/#/song?id=22704447 作曲 : 金道勋/Rhymer [作曲 : 金道勋/Rhymer] 作词 : 金道勋 [作词 : 金道勋] 사 ...

  5. [T-ARA][O My God]

    歌词来源:http://music.163.com/#/song?id=22704432 눈을 뜨면 생각이나고 길을 걷다 생각이나고 [nu-neul ddeu-myeon saeng-ga-gi ...

  6. BugPhobia准备篇章：团队Beta阶段准备工作分析

    0x00:序言 To the searching tags, you may well fall in love withhttp://xueba.nlsde.buaa.edu.cn/ 再见,无忧时光 ...

  7. 《Linux内核设计与实现》第18章读书整理

    第十八章.调试 18.1 准备开始 如果bug能重现的话,将会有很大的帮助. 18.2 内核中的bug Bug多种多样,产生的原因可以有无数的原因,表象也变化多端. 从隐藏在源代码中的错误到展现在目击 ...

  8. 2013337朱荟潼 Linux第三章读书笔记——进程管理

    第三章 进程管理 总结 fork创造的子进程复制了父进程资源,包括内存及进程描述符的内容,资源的复制而不是指针的复制. vfork的行为更像一个线程(指没有自已独立的内存空间),更明显的是vfork的 ...

  9. 解决p4c安装时protobuf未定义引用的错误

    安装好p4c的依赖之后,执行make -j2时出现以下问题: undefined references to `google::protobuf::internal::LogMessage::oper ...

  10. Sprint report

    Sprint report 一.需求分析:随着在校大学生人数的不断增加,许多高校出现了许多个校区并存的局面,并且校区之间的地理位置跨度非常大,给高校选课带来了很大的不方便,数据处理手工操作,工作量大, ...