一、文本内容操作

　　内容：　　

<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. 记一次 java 连接 linux ssh服务 权限验证失败的原因和解决过程

    下面的问题我是通过之前的ssh测试类找出原因的,因为我的测试类跑通了,但是程序跑不通,看了一下源码发现还有一处没有进行解密,所以才会权限验证失败. // 出现权限验证失败的原因就在这里,因为老板要求对 ...

  2. Macaca 基础原理浅析

    导语 前面几篇文章介绍了在Macaca实践中的一些实用技巧与解决方案,今天简单分析一下Macaca的基础原理.这篇文章将以前面所分享的UI自动化Macaca-Java版实践心得中的demo为基础,进行 ...

  3. JavaScript 为什么不要使用 eval

    本文内容 eval 隐藏的 eval 安全问题 结论 参考资料   eval eval 函数是一个高等级的函数,它与任何对象都无关.其参数,如果是一个字符串表达式,那么该函数计算表达式的值:如果是一个 ...

  4. EntityFramework Core 2.x （ef core） 在迁移中自动生成数据库表和列说明

    在项目开发中有没有用过拼音首字母做列名或者接手这样的项目? 看见xmspsqb(项目审批申请表)这种表名时是否有一种无法抑制的想肛了取名的老兄的冲动? 更坑爹的是这种数据库没有文档(或者文档老旧不堪早 ...

  5. 使用tensorflow实现mnist手写识别(单层神经网络实现)

    import tensorflow as tf import tensorflow.examples.tutorials.mnist.input_data as input_data import n ...

  6. docker 安装 kali

    1.安装 docker pull kalilinux/kali-linux-docker 2.运行容器 docker run -t -i kalilinux/kali-linux-docker /bi ...

  7. 微软职位内部推荐-Senior NLP Scientist

    微软近期Open的职位: Job Title: Senior NLP Scientist Location: Suzhou, China Suzhou, one of the most vibrant ...

  8. Android Studio发布Release版本之坑--Unknown host 'd29vzk4ow07wi7.cloudfront.net'

    使用Android Studio发布Release版本时,出现Unknown host 'd29vzk4ow07wi7.cloudfront.net'...错误. 解决方法:修改本机的DNS为8.8. ...

  9. Linux内核分析——第三周学习笔记

    20135313吴子怡.北京电子科技学院 chapter1 知识点梳理 一.Linux内核源代码简介 (视频中对目录下的文件进行了简介,记录如下) arch目录 占有相当庞大的空间 arch/x86目 ...

  10. wordpress学习三：wordpress自带的模板学习

    在<学习二>里,大概说了下怎么去查找模板,本节我们以一个简单的模板为例子,继续说说wordpress的模板机制,看看做一个自己的模板需要哪些知识点. 页面模板渲染 wordpress的模板 ...