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文档的编程接口.它给文档提供了一种结构化的表示方法,可以改变文档的内容和呈现方式 ...
随机推荐
- mfc 类型间的强制转换
一. static_cast运算符 用法:static_cast < type-id > ( expression ) 该运算符把expression 转换为type-id类型,但没有运行 ...
- flask+socketio+echarts3 服务器监控程序（基于后端数据推送）
本文地址:http://www.cnblogs.com/hhh5460/p/7397006.html 说明 以前的那个例子的思路是后端监控数据存入数据库:前端ajax定时查询数据库. 这几天在看web ...
- 详解C#7.0新特性
1. out 变量(out variables) 以前我们使用out变量必须在使用前进行声明,C# 7.0 给我们提供了一种更简洁的语法 “使用时进行内联声明” .如下所示: 1 var input ...
- centos7 部署LNMP
1.安装Nginx 使用Nginx官方提供的rpm包 [root@nginx ~]# cat /etc/yum.repos.d/nginx.repo [nginx] name=nginx repo b ...
- 冒泡排序算法的C++,Java和Python实现和冒泡排序算法三种语言效率的比较
冒泡排序原理: 这一篇百度经验讲得很好,我不多说了 https://jingyan.baidu.com/article/6525d4b13f920bac7d2e9484.html 他讲的是C语言,没有 ...
- Github pages + Minimal-Mistakes + Disqus建立个人博客记录
本文详细记录了利用Github pages建立个人博客的步骤. github pages官方推荐使用Jekyll生成静态网页,jekyll支持各种不同的主题,Minimal-Mistakes是一个功能 ...
- （第十二周）新功能WBS
项目名:食物链教学工具 组名:奋斗吧兄弟 组长:黄兴 组员:李俞寰.杜桥.栾骄阳.王东涵 新增加的功能:背景音乐 功能 子功能 二级子功能 预计花费时间(小时) 实际花费时间(小时) 背景音乐 界面组 ...
- Linux内核分析 一二章读书笔记
第一章 Linux内核简介 1.Unix (1)Unix系统很简洁 (2)在Unix中,所以东西都被当作文件对待,通过一套相同的系统调用接口来进行:open(),read(),write(),lsee ...
- WPF使用路径（URI）引用资源文件
Uri uri = new Uri("pack://application:,,,/程序集名称;component/Resources/bj.png", UriKind.Absol ...
- 组件 --BreadCrumb--面包屑
面包屑组件多用于导航栏,对于大型网站,做面包屑导航栏 .breadcrumb .breadcrumb-item .active:表示现在正处在该页面 效果截图: 代码: <nav> < ...