day16-Dom选择器及内容文本操作

一、前言

　　之前我们学习了dom的选择器，学习了直接查找和间接查找，我们把每一个标签当作一个对象，然后对这个对象的属性进行处理。下面我们就来研究一下，dom选择器以及内容文本的操作。

二、Dom选择器

2.1、根据id直接查找

>>>obj = document.getElementById('i1');

2.2、间接查找

这个我们之前写了详细的博客，我们只做简单的介绍，就是根据标签的父标签，或者是字标签，或者是兄弟标签等，然后处理。

三、文本内容操作

操作内容如下：

<body>
    <div id="i1">
        老男孩
        <a>谷<span>歌</span></a>
    </div>
</body>

3.1、innerText

说明：仅仅只获取文本内容

>>>obj = document.getElementById('i1');
<div id=​"i1">​…​</div>​"
>>>obj.innerText;  //仅获取文本内容，不获取标签内容
"老男孩 谷歌"
>>>obj.innerText = "帅高高";
"帅高高"
>>>obj
<div id=​"i1">​帅高高​</div>​

那如果我们赋值含有标签内容，效果如何呢？

>>>obj.innerText = "<a href='http://www.baidu.com'>百度一下</a>";
"<a href='http://www.baidu.com'>百度一下</a>"
>>>obj
<div id=​"i1">​<a href='http://www.baidu.com'>百度一下</a>​</div>​

效果图：

结果是：把它当做了字符串变成了文本，不识别html的标签。

3.2、innerHTML

说明：获取全部内容

>>>obj = document.getElementById('i1');
<div id=​"i1">​…​</div>​
>>>obj.innerHTML;  //获取全部内容
"
        老男孩
        <a>谷<span>歌</span></a>
    "
>>>obj.innerHTML = "帅高高";  //修改内容
"帅高高"

那如果我们赋值含有标签内容，效果如何呢？

>>>obj.innerHTML = "<a href='http://wwww.baidu.com'>百度一下</a>" //赋值带标签的
"<a href='http://wwww.baidu.com'>百度一下</a>"
>>>obj
<div id=​"i1">​…​</div>​

效果图：

 

 结果：识别html的标签。

四、标签值的设置(value)

4.1、input输入框

操作的html如下：

<body>
    <div id="i1">
        老男孩
        <a>谷<span>歌</span></a>
    </div>
    <input type="text" id="i2"/>
</body>

说明：获取input标签中的value的值。

>>>obj = document.getElementById("i2");
<input type=​"text" id=​"i2">​
>>>obj.value;
""
>>>obj.value = "shuaigaogao"; //修改value的值
"shuaigaogao"

4.2、select选择框

操作的html如下：

<body>
    <select id="i3">
        <option value="bj">北京</option>
        <option value="sh">上海</option>
        <option value="nj">南京</option>
    </select>
</body>

说明：获取 select标签中选中的value值

>>>obj = document.getElementById("i3");
<select id=​"i3">​…​</select>​
>>>obj.value;
"bj"
>>>obj.value = "sh";
"sh"
>>>obj.value = "nj";
"nj"
>>>obj.value;
"nj"

效果图：

select特有的属性selecteIndex

说明：获取select的下标值

>>>obj.selectedIndex;
2
>>>obj.selectedIndex = 1;
1

效果图：

4.3、textarea多行文本框

操作的代码如下：

<body>
    <textarea id="i4"></textarea>
</body>

说明：获取textare标签中的value的值。

>>>obj = document.getElementById("i4");
<textarea id=​"i4" style=​"margin:​ 0px;​ width:​ 266px;​ height:​ 133px;​">​</textarea>​
>>>obj.value
""
>>>obj.value = "fgsqijfbqjwb";
"fgsqijfbqjwb"

 效果图：

 

五、输入框示例

5.1、需求说明

当我们点击输入框时，输入框中的 "请输入关键字" 自动为空，移开，又添加 "请输入关键字"

如图：

 

5.2、实现代码

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        .c1{
            height: 48px;
            font-size: 40px;
            line-height: 48px;
        }
    </style>
</head>
<body>
    <input id="i1" class="c1" type="text" value="请输入内容" onfocus="on1();" onblur="off1();"/>


    <script>
        function on1(){
            var tag = document.getElementById("i1");
            var val=tag.value;
            if(val="请输入内容"){
                tag.value="";
            }
        }

        function off1(){
            var tag=document.getElementById("i1");
            var val=tag.value;
            if(val.length==0){
                tag.value="请输入内容"
            }
        }
    </script>
</body>
</html>

知识点：

onfocus：只要获取光标，就执行这个方法。

onblur：移除光标，执行这个方法。

posted @ 2018-05-22 14:46  东郭仔  阅读(123)  评论(0)    收藏  举报