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 进程的诞生和死亡
 进程概念  进程的诞生  进程的死亡一. 进程: .简单的说双击一个EXE图标时,系统就会产生一个相应的进程,分配相应的资源,并执行相应的代码. .标准一些的说法: 进程是一个具有独立功能 ...
5.Xilinx RapidIO核例子工程源码分析
https://www.cnblogs.com/liujinggang/p/10091216.html 一.软件平台与硬件平台软件平台: 操作系统:Windows 8.1 64-bit 开发套件:V ...
TensorFlow训练MNIST数据集（1） —— softmax 单层神经网络
1.MNIST数据集简介首先通过下面两行代码获取到TensorFlow内置的MNIST数据集: from tensorflow.examples.tutorials.mnist import inp ...
spring boot 实现文件下载
html 代码 js部分 window.location.href= this.Baseurl+'/plan/down?file='+filename; spring boot 后台代码@GetMap ...
[Direct2D开发] 从资源加载位图
转载请注明出处:http://www.cnblogs.com/Ray1024 一.概述 Direct2D使用Windows图像处理组件 (WIC) 来加载位图.从文件加载位图的方法很简单,而且网上的教 ...
dokuwiki 配置 sendmail 邮件发送
dokuwiki 发送邮件有2种方式: 一是直接使用 PHP 自带发送功能,需要配置 PHP.ini 文件, 我没试过,可参考官网 https://www.dokuwiki.org/tips:mail ...
关于go v1.11安装后出现不能正常运行测试程序的问题
本人最近安装go1.11后出现上述问题,没有找到原因,可能之前安装过的旧的版本在windows下环境变量设置出现了问题,修改后仍然无效,后来删除所有安装版本,及go环境变量,重新下载1.10版本进行安 ...
11.12 Daily Scrum(保存草稿后忘了发布·····）
在实现过程中,我们发现要将不同人开发的组件整合起来并不是一件容易的事,于是我们调整了一下任务,修改了一下各自的程序: Today's tasks Tomorrow's tasks 丁辛餐厅列表 ...
《Linux内核分析》第一周笔记计算机是如何工作的
一.计算机是如何工作的? 1.存储程序计算机工作模型 1)冯诺依曼体系结构学习研究计算机的基本概念.就是指存储程序计算机.所有的有计算功能的电子设备小到计算器,大到超级计算机核心部分都可以用这种体系 ...
Win2008r2 由ESXi 转换到 HyperV的处理过程
1. 大部分2008r2 采取了 windows loader的方式激活这种方式会导致hyperV 启动失败因为他家在了错误的bios类型所以第一步建议使用windows loader 卸载 ...