一、文本内容操作

　　内容：　　

<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. 设计模式学习---UML常见关系的实现

    一.UML基本构造 UML的基本构造含3种: (1) 事物(4种):结构事物,行为事物,分组事物,注释事物 (2) 关系(4种):泛化关系,实现关系,依赖关系,关联关系 (3) 图(10种):用例图, ...

  2. [CF1083D]The Fair Nut’s getting crazy[单调栈+线段树]

    题意 给定一个长度为 \(n\) 的序列 \(\{a_i\}\).你需要从该序列中选出两个非空的子段,这两个子段满足 两个子段非包含关系. 两个子段存在交. 位于两个子段交中的元素在每个子段中只能出现 ...

  3. R语言学习 第二篇：矩阵和数组

    向量是一维的,只有行这一个维度,没有其他维度.R可以创建更高维度的数据对象,例如,矩阵.数据框.数组,索引高维度的对象时,需要使用元素的下标.这些对象的下标都使用中括号[]和索引,第一个维度是row, ...

  4. let和const----你所不知道的JavaScript系列（2）

    let 众所周知,在ES6之前,声明变量的关键字就只有var.var 声明变量要么是全局的,要么是函数级的,而无法是块级的. var a=1; console.log(a); console.log( ...

  5. 简单测评拨号VPS——云立方&淘宝卖家

    做爬虫的同学不可避免地要使用代理IP,除了各网站公布的免费代理IP外,我们还可以选择拨号VPS,本文简单对两家(类)拨号VPS提供商进行测评,如有差错,欢迎指出,非常感谢. 使用过程 云立方 第一次听 ...

  6. laravel从5.2到5.5从入门到精通视频教程共16套

    laravel从5.2到5.5从入门到精通视频教程共16套,大部分都是实战项目比如P2P.博客.短网址.知乎门户.app软件开发.微信商城实战等 课程目录: 01.Laravel框架从入门到精通02. ...

  7. 关于几个vcenter的合并心得！

    由于最近公司领导觉得公司几个vcenter管理的不同网段IP,办公的时候操作不方便,故本人把几个vcenter上面的esxi主机合并到一个里面! 通过几次测试,发现最简单的方法就是直接用一台vcent ...

  8. PAT甲题题解-1029. Median (25)-求两序列的中位数，题目更新了之后不水了

    这个是原先AC的代码,但是目前最后一个样例会超内存,也就是开不了两个数组来保存两个序列了,意味着我们只能开一个数组来存,这就需要利用到两个数组都有序的性质了. #include <iostrea ...

  9. 1090. Highest Price in Supply Chain (25)-dfs求层数

    给出一棵树,在树根出货物的价格为p,然后每往下一层,价格增加r%,求所有叶子节点中的最高价格,以及该层叶子结点个数. #include <iostream> #include <cs ...

  10. [转帖]SQLSERVER 使用触发器实现 禁用sa用户 在非本机登录

    原贴地址: https://blog.csdn.net/reblue520/article/details/51580102 具体的方法为: 创建一个触发器 CREATE TRIGGER forbid ...