Dom选择器以及内容文本操作

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>

posted on 2017-08-29 13:52 momo8238 阅读(938) 评论(0) 收藏举报