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、3日）

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

  2. P1011 车站

    P1011 车站 题目描述 火车从始发站(称为第1站)开出,在始发站上车的人数为a,然后到达第2站,在第2站有人上.下车,但上.下车的人数相同,因此在第2站开出时(即在到达第3站之前)车上的人数保持为 ...

  3. 无偏方差为什么除以n-1

    设样本均值为,样本方差为,总体均值为,总体方差为,那么样本方差有如下公式:. 很多人可能都会有疑问,为什么要除以n-1,而不是n,但是翻阅资料,发现很多都是交代到,如果除以n,对样本方差的估计不是无偏 ...

  4. EF Core注意事项

    流程:https://docs.microsoft.com/en-us/ef/core/get-started/aspnetcore/new-db 1.Both Entity Framework 6. ...

  5. 92套AE抖音快闪模板（精品）

    包含很多场景和类型,直接用即可,下载地址:百度网盘,https://pan.baidu.com/s/1bRFql1zFWyfpTAwa6MhuPA 内容截图:    

  6. ACID、数据库隔离级别

    ACID: A(Atomicity):原子性,要么全部执行,要么都不执行 C(consistency):一致性: 特点: 1.一个操作除法级联,这些必须成功,否则全部失败(原子性) 2.所有节点同步更 ...

  7. asp.net core2.1项目应用Ant Design(一)

    无意中发现了Ant Design这个组件库后,深深被他丰富的组件吸引了,大家感兴趣的可以去官网感受下,组件的应用和效果真是的太强大了,对于我们这些小公司,无自主研发前端团队的来说,无疑特别方便:htt ...

  8. Spring 配置String转Date

    操作步骤: 1. 实现 org.springframework.core.convert.converter.Converter 接口 2. 配置 org.springframework.contex ...

  9. Python全栈 MongoDB 数据库（Mongo、 正则基础、一篇通）

                  终端命令:       在线安装:         sudo apt-get install mongodb         默认安装路径 :  /var/lib/mong ...

  10. CSP201403-2：窗口

    引言:CSP(http://www.cspro.org/lead/application/ccf/login.jsp)是由中国计算机学会(CCF)发起的"计算机职业资格认证"考试, ...