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月4日~1月10日）

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

  2. LeetCode: 51. N-Queens（Medium）

    1. 原题链接 https://leetcode.com/problems/n-queens/description/ 2. 题目要求 游戏规则:当两个皇后位于同一条线上时(同一列.同一行.同一45度 ...

  3. 从细节处谈Android冷启动优化

    本文来自网易云社区 Android APP冷启动优化,对于Android开发同学而言可能是个老生常谈的技优了. 之所以花时间写一篇冷启动优化的文章: 我想从另外一个角度来说冷启动优化,如题所述,从细节 ...

  4. hadoop 家族图

    hadoop家族

  5. outer join test

    create table t1_outerjoin(a int, b int , c int); create table t2_outerjoin(a int); create table t3_o ...

  6. logstash-input-jdbc and logstash-ouput-jdbc

    要求通过logstash从oracle中获取数据,然后相应的直接传入mysql中去. 基本测试成功的配置文件如下: input { stdin { } jdbc { jdbc_connection_s ...

  7. Jquery获取DOM绑定事件

    获取到当前正在执行的事件: $('#testDive').bind('click', function(event){alert('event: ' + event.type)}); 获取所有绑定事件 ...

  8. Unity Shader学习笔记 - 用UV动画实现沙滩上的泡沫

    这个泡沫效果来自远古时代的Unity官方海岛Demo, 原效果直接复制3个材质球在js脚本中做UV动画偏移,这里尝试在shader中做动画并且一个pass中完成: // Upgrade NOTE: r ...

  9. Python常用函数--return 语句

    在Python教程中return 语句是函数中常用的一个语句.return 语句用于从函数中返回,也就是中断函数.我们也可以选择在中断函数时从函数中返回一个值.案例(保存为 function_retu ...

  10. Spring Cloud（九）：配置中心（消息总线）【Finchley 版】

    Spring Cloud(九):配置中心(消息总线)[Finchley 版]  发表于 2018-04-19 |  更新于 2018-05-07 |  我们在 Spring Cloud(七):配置中心 ...