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优步司机奖励政策 (1月18日-1月24日)

    本周已经公开奖励整的城市有:北 京.成 都.重 庆.上 海.深 圳.长 沙.佛 山.广 州.苏 州.杭 州.南 京.宁 波.青 岛.天 津.西 安.武 汉.厦 门,可按CTRL+F,搜城市名快速查找. ...

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

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

  3. 厦门Uber优步司机奖励政策（12月14日到12月20日）

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

  4. 『Python Kivy』Kivy模板语言KV说明

    语言概念 KV语言允许你以声明的方式创建控件树,以及绑定控件属性到其他的控件或使用一种自然的方式进行回调. 它允许非常快速并灵活的改变你的UI. 它还可以让你的应用程序与应用程序的界面进行分隔. 如何 ...

  5. react-native android 初始化问题

    最近开始接触rn,官方起手,装了一堆工具,然后启动项目的时候出现了一堆问题,这里针对我遇到的一些问题提供一些解决方案. 本人开发环境mac,在启动ios的时候没啥大问题,可以直接启动,这里提示一点,因 ...

  6. Prism MEF example

    Related Attributes These attributes are under namespace System.ComponentModel.Composition Import The ...

  7. JMeter常用元器件

    测试计划, 是整个工程的根节点, 可以取别名, 并添加注释, 里面的设置是全局变量: 线程组, 是一组线程的集合, 可以取别名, 并添加注释, 里面的设置只对本线程组有效: HTTP请求, 也就是取样 ...

  8. [JSON].typeOf( keyPath )

    语法:[JSON].typeOf( keyPath ) 返回:[String | Number | Boolean | Json | Array |  Function | 空字符] 说明:获取指定键 ...

  9. CTC (Connectionist Temporal Classification) 算法原理

    (原创文章,转载请注明出处哦~) 简单介绍CTC算法 CTC是序列标注问题中的一种损失函数. 传统序列标注算法需要每一时刻输入与输出符号完全对齐.而CTC扩展了标签集合,添加空元素. 在使用扩展标签集 ...

  10. 【Machine Learning】如何处理机器学习中的非均衡数据集？

    在机器学习中,我们常常会遇到不均衡的数据集.比如癌症数据集中,癌症样本的数量可能远少于非癌症样本的数量:在银行的信用数据集中,按期还款的客户数量可能远大于违约客户的样本数量.   比如非常有名的德国信 ...