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文档的编程接口.它给文档提供了一种结构化的表示方法,可以改变文档的内容和呈现方式 ...
随机推荐
- 双面间谍（spy）
双面间谍 链接 分析: 戳这 代码: #include<cstdio> #include<algorithm> #include<cstdio> #include& ...
- 委托、多播委托（MulticastDelegate）
委托.多播委托(MulticastDelegate) 多播委托(MulticastDelegate)继承自 Delegate ,表示多路广播委托:即,其调用列表中可以拥有多个元素的委托.实际上,我们自 ...
- JQuery快速入门-选择器
JQuery选择器 JQuery 选择器继承了CSS 与Path 语言的部分语法,允许通过标签名.属性名或内容对DOM 元素进行快速.准确的选择,而不必担心浏览器的兼容性,通过jQuery 选择器对页 ...
- TensorFlow 实现线性回归
1.生成高斯分布的随机数 导入numpy模块,通过numpy模块内的方法生成一组在方程 y = 2 * x + 3 周围小幅波动的随机坐标.代码如下: import numpy as np impor ...
- 个人新站 【EXP技术分享博客】 落成~ 全新的技术资源~ 欢迎莅临~
对的,我筹备了大半年的个站技术网站正式开张了~ EXP技术分享博客: http://exp-blog.com CSDN上面大部分文章已经迁移过去了,以后也会更多地在新站点更新~ 为了庆祝新站开张,近期 ...
- FINAUNCE金融业增速反弹信贷投放创新高叠加股市回暖
FINAUNCE金融业增速反弹信贷投放创新高叠加股市回暖,金融业增加值增速回暖,不过难以回到2015年的巅峰. 国家统计局4月18日发布的数据显示,今年一季度,国内生产总值21.34万亿元,按可比价格 ...
- 【Beta阶段】第二次Scrum Meeting！
每日任务内容: 本次会议为第二次Scrum Meeting会议~ 由于本次会议项目经理召开时间较晚,所以在公寓7层召开,所以女生没来…召开时间大家集会10分钟,经理与后端探讨20分钟. 队员 昨日完成 ...
- Game over 作业
终于有一篇不拼代码拼码字的作业了,哈哈哈..... 从寒假到这次结束,经历的博客及编码作业的过程 前面七次作业做个分类: 通往博客园和C++的第一步. 知识点:让我们对C++做一个预习,在学C++前有 ...
- Practice1小学四则运算（改进）
#include<stdio.h> #include<stdlib.h> #include<time.h> void srand(unsigned);//随机生成不 ...
- [BUG随想录] 看不见的分隔符: Zero-width space
今天在调试一段代码的时候,有一个输入不能为空的库函数抛出了异常(为空就会抛出异常,就是这么傲娇).自己暗骂了自己一番,怎么这么大意,于是追溯源头,开始寻找输入控制的地方.但是当我找到时我惊呆了,我明明 ...