1. DOM：文档对象模型。把整个HTML当做大的对象。每一个标签认为是一个对象。（每一个个体就是一个对象）

2. 查找：

直接查找 var obj=document.getElementById("i1")

间接查找

（1）文本内容操作

　　　innerText; 获取文本内容，会把HTML标签自动过滤掉。

　　　innterHTML: 全部内容，含文本和标签。

　　　value： 通过value可以对input, select,textarea标签进行操作。

　　　　　A----input: 在input标签中，可以通过 obj.value 来获取/修改当前标签中的值。

　　　　　B----select: 通过 obj.value，获取当前选中元素的value值。（selectedIndex 获取角标然后进行相应的文本修改）

　　　　　C----textarea:多行文本，与input相同，可以通过 obj.value 来获取/修改当前标签中的值。

　　　　　　

看测试代码和效果：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="utf-8"/>

</head>

<body>

    <div id="i1">

        老男孩

        <a>谷歌</a>

    </div>

</body>

运行结果：

obj=document.getElementById('i1');

<div id=​"i1">​…​</div>​

obj.innerText;

"老男孩 谷歌"

obj.innerHTML;

"

        老男孩

        <a>谷歌</a>

    "

当设置值的时候的区别如下：（个人测试没有成功）

obj.innerText: 把输入的内容当做字符串设置成了文本。

obj,innerHTML: 标签。可以变成超链接进行点击了。

3. 关于文本操作的 input value:获取当前标签中的值。

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="utf-8"/>

</head>

<body>

    <div id="i1">

        老男孩

        <a>谷歌</a>

    </div>

    <input type="text" id="i2"/>

</body>

运行结果：

可以通过value关键字直接修改值

4. select标签。通过上面选择北京1，北京2，北京3，下面的value值也会发生变化。

反过来，通过设置下面的value值=13，也会改变上面的当前选项变成北京3.

5. obj.selectedIndex 的用法，获得角标值。

6.textarea标签：多行文本

7. 搜索框的实例。onfocus/onblur 通过获取光标的位置。onfocus/onblur：使聚焦/模糊不清的意思。

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<body>

    <div style="width:600px;margin:0 auto;">

        <input onfocus="Focus();" onblur="Blur();" type="text" value="请输入关键字"/>

    </div>

    <script>

        function Focus(){

            console.log(1);

        }

        function Blur(){

            console.log(2);

        }

    </script>

</body>

</html>

效果：当鼠标在上面时，输出1；当鼠标移走的时候，输出2；

最终的成型版本，注意：

val=tag.value;这句话只能获得value的值。

tag.value=="请输入关键字"，如果需要更改值的话，还得用这句原始的进行操作。

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<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>

</html>

效果：

8. 现代版的，一句话搞定。<input type="text" placeholder="请输入关键字"/>

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<body>

    <div style="width:600px;margin:0 auto;">

        <input id="i1" onfocus="Focus();" onblur="Blur();" type="text" value="请输入关键字"/>

        <input type="text" placeholder="请输入关键字"/>

    </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>

</html>

Dom选择器以及内容文本操作的更多相关文章

  1. Dom选择器--内容文本操作

    一.文本内容操作 内容: <body> <div id="i1"> 学习是我快乐? <a>晚饭吃什么</a> </div> ...

  2. jQuery 选择器 筛选器 样式操作 文本操作 属性操作 文档处理 事件 动画效果 插件 each、data、Ajax

    jQuery jQuery介绍 1.jQuery是一个轻量级的.兼容多浏览器的JavaScript库. 2.jQuery使用户能够更方便地处理HTML Document.Events.实现动画效果.方 ...

  3. 一周学会Mootools 1.4中文教程:(1)Dom选择器

    利器: 君欲善其事须先利其器,好吧因为我们的时间比较紧迫,只有六天而已,那么六天的时间用死记硬背的方式学会Mt犹如天方夜谭,因此我们需要借鉴一下Editplus的素材栏帮我们记忆就好了,当我们需要用到 ...

  4. jQuery-对标签元素 文本操作-属性操作-文档的操作

    一.对标签元素文本操作 1.1 对标签中内容的操作 // js var div1 = document.getElementById("div1"); div1.innerText ...

  5. 采用DOM进行表格的修改操作

    2015-08-31 <html> <head> <title>采用DOM进行表格的修改操作</title> <script language=& ...

  6. 如何设置secureCRT的鼠标右键为弹出文本操作菜单功能

    secureCRT的鼠标右键功能默认是粘贴的功能,用起来和windows系统的风格不一致, 如果要改为右键为弹出文本操作菜单功能,方便对选择的内容做拷贝编辑操作,可以在 options菜单----&g ...

  7. python中的文本操作

    python如何进行文本操作 1.能调用方法的一定是对象,比如数值.字符串.列表.元组.字典,甚至文件也是对象,Python中一切皆为对象. str1 = 'hello' str2 = 'world' ...

  8. 文本操作 $(..).text() $(..).html() $(..).val()最后一种主要用于input

    文本操作: $(..).text() # 获取文本内容 $(..).text('<a>1</a>') # 设置文本内容 $(..).html() $(..).html('< ...

  9. linux下的文本操作之 文本查找——grep

    摘要:你有没有这样的应用场景:调试一个程序,出现debug的提示信息,现在你需要定位是哪个文件包含了这个debug信息,也就是说,你需要在一个目录下的多个文件(可能包含子目录)中查找某个字符串的位置: ...

随机推荐

  1. 北京Uber优步司机奖励政策（4月2日）

    滴快车单单2.5倍,注册地址:http://www.udache.com/ 如何注册Uber司机(全国版最新最详细注册流程)/月入2万/不用抢单:http://www.cnblogs.com/mfry ...

  2. 老曹眼中的Linux基础

    Linux 几乎无处不在,不论是服务器构建,还是客户端开发,对操作系统的基本理解和基础技能的掌握对全栈来说都是必备的. 系统的选择 Linux发行版本大体分为两类,一类是商业公司维护的发行版本,一类是 ...

  3. Java >>>运算符 和 >> 运算符

    >>> 在java 表示有符号右移.什么意思呢?就是最高位符号位也会移动. 我们知道,>>表示有符号右移. -1>> 1 = -1 -1>>2 = ...

  4. 《绝地求生大逃杀》BE错误怎么办 BE服务未正常运行及安装失败解决方法

    <绝地求生大逃杀>BattlEye Launcher是游戏的反作弊程序,也是启动过程中做容易出现错误的,今天小编带来“爆锤吧务”分享的<绝地求生大逃杀>BE服务未正常运行及安装 ...

  5. Java连接redis集群操作存储、删除以及获取值

    pom文件添加: <!-- https://mvnrepository.com/artifact/redis.clients/jedis --> <dependency> &l ...

  6. react-native windows系统 红屏报assets缺失 500错误

    指定版本,react-native是facebook用mac系统开发的,windows系统兼容较差,新版本更是问题很多, 相对老版本更加稳定 react-native init demo --vers ...

  7. Python函数变量和返回值

    Python函数的全局变量和局部变量 1.不同的编程语言,程序可以分为函数和过程两大类,函数具有具体返回值,而过程则不具有具体的返回值,python只具有函数,因为对于它的一般函数,其返回值为所具体返 ...

  8. jQuery筛选器及对DOM修改（学习笔记）

    1.jQuery筛选器 注意:请先在管理Nuget程序包中查找jQuery包,并安装.也可以在jQuery官网下载. 实现: <!DOCTYPE html> <html xmlns= ...

  9. 前端开发工程师 - 02.JavaScript程序设计 - 第2章.进阶篇

    第2章--进阶篇 类型进阶 类型: Undefined Null Boolean String Number Object 原始类型(值类型):undefined, null, true, " ...

  10. (Python爬虫04)了解通用爬虫和聚焦爬虫,还是理论知识.快速入门可以略过的

    如果现在的你返回N年前去重新学习一门技能,你会咋做? 我会这么干: ...哦,原来这个本事学完可以成为恋爱大神啊, 我要掌握精髓需要这么几个要点一二三四..... 具体的学习步骤是这样的一二三.... ...