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文档的编程接口.它给文档提供了一种结构化的表示方法,可以改变文档的内容和呈现方式 ...
随机推荐
- Scala学习(一)--Scala基础学习
Scala基础学习 摘要: 在篇主要内容:如何把Scala当做工业级的便携计算器使用,如何用Scala处理数字以及其他算术操作.在这个过程中,我们将介绍一系列重要的Scala概念和惯用法.同时你还将学 ...
- dotnet core webapi 发布部署到docker的步骤
1. 创建web api项目,编译并测试成功 2. 在项目的根目录添加Dockerfile文件,注意:Dockerfile文件名区分大小写 文件内容如下 # 基于microsoft/dotnet:la ...
- R绘图 第六篇：绘制线图（ggplot2）
线图是由折线构成的图形,线图是把散点从左向右用直线连接起来而构成的图形,在以时间序列为x轴的线图中,可以看到数据增长的趋势. geom_line(mapping = NULL, data = NULL ...
- LeetCode 3Sum Closest (Two pointers)
题意 Given an array S of n integers, find three integers in S such that the sum is closest to a given ...
- tensorflow 曲线拟合
tensorflow 曲线拟合 Python代码: import numpy as np import tensorflow as tf import matplotlib.pyplot as plt ...
- Python数据信号处理库RadioDSP: 引入ThinkDSP实现思想
RadioDSP是针对无线通信领域的数字信号处理库,它采用了ThinkDSP的思想,对于无线通信中的IQ信号可以绘制频谱图和时域图.目前项目还在起始阶段,详细的代码可以参考链接: https://gi ...
- java中多态的实现机制
多态的概念: 简单来说就是事物在运行过程中存在的不同状态,即父类或接口定义的引用变量指向子类或具体实现类的实例对象.程序调用方法在运行期才进行动态绑定,而不是引用变量的类型中定义的方法. 多态存在的前 ...
- PAT甲题题解-1103. Integer Factorization (30)-（dfs）
该题还不错~. 题意:给定N.K.P,使得可以分解成N = n1^P + … nk^P的形式,如果可以,输出sum(ni)最大的划分,如果sum一样,输出序列较大的那个.否则输出Impossible. ...
- Scrum Meeting NO.1
Scrum Meeting No.1 1.会议内容 不出所料地,组员们都在忙着写编译.编译大作业的进度已经接近尾声,码农们已经磨刀霍霍向软工-- 在上一周,bugphobia和我们组决定共同使用一套后 ...
- beta4
吴晓晖(组长) 过去两天完成了哪些任务 昨天FloatingActionButton和权限获取调整 今天复习,没写东西,晚点有空了写 展示GitHub当日代码/文档签入记录 接下来的计划 推荐算法 还 ...