Dom选择器--内容文本操作
一、文本内容操作
内容：
<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选择器--内容文本操作的更多相关文章
- Dom选择器以及内容文本操作
1. DOM:文档对象模型.把整个HTML当做大的对象.每一个标签认为是一个对象.(每一个个体就是一个对象) 2. 查找: 直接查找 var obj=document.getElementById(& ...
- jQuery 选择器 筛选器 样式操作 文本操作 属性操作 文档处理 事件 动画效果 插件 each、data、Ajax
jQuery jQuery介绍 1.jQuery是一个轻量级的.兼容多浏览器的JavaScript库. 2.jQuery使用户能够更方便地处理HTML Document.Events.实现动画效果.方 ...
- Unit01： jQuery概述 、 jQuery选择器 、 jQuery操作DOM
Unit01: jQuery概述 . jQuery选择器 . jQuery操作DOM 使用jQuery放大字体: <!DOCTYPE html> <html> <head ...
- 前端（十八）—— jQuery高级操作：选择器、文本属性与类、事件、文档操作、动画、结构关系
JQ选择器.文本属性与类.事件.文档操作.动画.结构关系 可参考jQuery的API文档 一.选择器 1.css语法匹配 标签 | 类 | id | 交集 群组 | 后代 | 兄弟 伪类 | 属性 $ ...
- jQuery初识之选择器、样式操作和筛选器(模态框和菜单示例)
一.jQuery 1.介绍 jQuery是一个快速.简洁的JavaScript框架,是继Prototype之后又一个优秀的JavaScript代码库(或JavaScript框架). jQuery设计的 ...
- jQuery选择器及常见操作
jQuery http://jquery.cuishifeng.cn/ 模块 <=>类库 DOM/BOM/JavaScript的类库 版本: 1.x 1.12 2.x 3.x 转换: jq ...
- jQuery入门、jQuery选择器、jQuery操作
一.什么是jQuery及如何使用 1.1 jQuery 简介 jQuery是一个兼容多浏览器的javascript函数库(把我们常用的一些功能进行了封装,方便我们来调用,提高我们的开发效率.),核心理 ...
- 一周学会Mootools 1.4中文教程:(1)Dom选择器
利器: 君欲善其事须先利其器,好吧因为我们的时间比较紧迫,只有六天而已,那么六天的时间用死记硬背的方式学会Mt犹如天方夜谭,因此我们需要借鉴一下Editplus的素材栏帮我们记忆就好了,当我们需要用到 ...
- Dom,查找标签和操作标签
Dom,查找标签和操作标签 文档对象模型(Document Object Model,DOM)是一种用于HTML和XML文档的编程接口.它给文档提供了一种结构化的表示方法,可以改变文档的内容和呈现方式 ...
随机推荐
- python 23 种 设计模式
频率 所属类型 模式名称 模式 简单定义 5 创建型 Singleton 单件 保证一个类只有一个实例,并提供一个访问它的全局访问点. 4 创建型 Abstract Factory 抽象工厂 提供一个 ...
- CF 55 D. Beautiful numbers
D. Beautiful numbers 链接 题意: 求[L,R]中多少个数字可以整除它们的每一位上的数字. 分析: 要求模一些数字等于0等价于模它们的lcm等于0,所以可以记录当前出现的数字的lc ...
- 当系统扩展遇到违背OO的里氏原则（LSP）的时候怎么办 ？
先转一篇写得很好的文章:http://www.cnblogs.com/CodeGuy/archive/2012/03/26/2418803.html ========================= ...
- Android Studio Xposed模块编写（二）
阅读本文前,假设读者已经看过Android Studio Xposed模块编写(一) 相关环境已经搭建完成.本文演示案例与上文环境一致,不在赘述. 1.概述 Xposed是非常牛叉的一款hook框架 ...
- effective c++ 笔记 (23-25)
//---------------------------15/04/08---------------------------- //#23 宁以non_member.non_friend替换m ...
- 微软职位内部推荐-Senior NLP Scientist
微软近期Open的职位: Job Title: Senior NLP Scientist Location: Suzhou, China Suzhou, one of the most vibrant ...
- Individual Project - Word frequency program by HJB
using System;using System.Collections.Generic;using System.IO;using System.Linq;using System.Text;us ...
- 运行Maven时报错：No goals have been specified for this build
No goals have been specified for this build. You must specify a valid lifecycle phase or a goal in t ...
- Day Nine
站立式会议 站立式会议内容总结 331 今天:学习plupload 遇到问题:无 明天:学习中文分词 442 今天:解决gradle以及项目计划页面的bug 遇到的问题:调用工具类以及配置gradle ...
- 老李的blog使用日记（3）
匆匆忙忙.碌碌无为,这是下一个作业,VS,多么神圣高大上,即使这样,有多少人喜欢你就有多少人烦你,依然逃不了被推销的命运,这抑或是它喜欢接受的,但是作为被迫接受者,能做的的也只有接受,而已. 既来之则 ...