JavaScript 之 DOM选择器 及 事件

Dom  Document object module  文档对象模型

DOM是一种用于HTML和XML文档的编程接口。它给文档提供了一种结构化的表示方法，可以改变文档的内容和呈现方式。我们最为关心的是，DOM把网页和脚本以及其他的编程语言联系了起来

DOM将html文件转换成文档对象，然后对文档对象进行操作 (找到标签及操作标签)

 

1、找到标签

获取单个元素 ：document.getElementById('i1')
获取多个元素（列表）：document.getElementsByTagName('div')
获取多个元素（列表）： document.getElementsByClassName('c1')


a. 直接找
document.getElementById('i1') 　　// 根据ID获取一个标签（html id 不能重复，因此获取的是单个元素）

document.getElementsByName('xxx') 　　// 根据name属性获取标签集合（数组）
document.getElementsByClassName('c1') 　　// 根据class属性获取标签集合（数组）
document.getElementsByTagName('div') 　　// 根据标签名获取标签集合（数组）

b. 根据直接找的结果继续 间接找
parentElement　　 // 父节点标签元素
children // 所有子标签
firstElementChild　　 // 第一个子标签元素
lastElementChild　　 // 最后一个子标签元素
nextElementtSibling　　 // 下一个兄弟标签元素
previousElementSibling　　 // 上一个兄弟标签元素

 

2、操作标签

文本操作

innerText 、innerHTML、value、selectedIndex

标签.innerText 　　// 获取标签中的文本内容（若包含其他标签，则自动过滤，只获取文本）

标签.innerText = "" 　　// 对标签内部文本进行重新赋值
　　> tags=document.getElementsByTagName('a');
　　> for(var i=0;i<tags.length;i++){tags[i].innerTaxt=123;}

标签.innerHTML  // 获取标签中的所有内容包括所包含标签

obj.value 　　// 获取当前标签中的值, 如<input>、<textarea>标签中输入的文本、<select value='xxx'>
obj.value=‘’ 　　// 设置当前标签中的值

obj.selectedIndex 　 // 获取select标签中值的索引
obj.selectedIndex=   // 设置select标签中值的索引

checkbox对象.checked 　　// 获取checkbox标签值 
checkbox对象.checked = true  　　// 设置checkbox标签值, 选中(打钩)

 

搜索框示例：

<!DOCTYPE html>
<html> 
<head>
    <meta charset="UTF-8">
    <title>Examples</title>
</head>
<body >
    <input type="text" placeholder="请输入关键字" >  <!-- html最新浏览器才支持 -->

    <!-- 通过JS，可以实现输入关键字有智能提示，当用户输入字符时会悄悄往后台发请求，后台进行模糊匹配，把想要搜索的东西列举到输入框(position: relative;postion: absolute;)-->
    <input id="i1" onfocus="Focus();" onblur="Blur();" type="text" value="请输入关键字" />  <!-- onfocus 和 onbulr 属性监控鼠标或tab键 -->
    <script type="text/javascript">
        function Focus(){
            console.log('1')
            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>
View Code

 

样式操作

className、classList
obj.className='c1' 　　 // 定义或修改class=''的值
obj.classList 　　// 获取class 列表
obj.classList.add('c2') 　　// 添加指定样式
obj.classList.remove('样式名')　　//  删除指定样式

obj.style.xxx=''; // 设置某个样式属性
obj.style.frontSize='16px';
obj.style.backgroundColor='red';

示例：模态对话框

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .hide{
            display: none;
        }
        .c1{
            position: fixed;
            left: 0;
            top: 0;
            right: 0;
            bottom: 0;
            background-color: black;
            opacity: 0.6;
            z-index: 9;
        }
        .c2{
            width: 500px;
            height: 400px;
            background-color: white;
            position: fixed;
            left: 50%;
            top: 50%;
            margin-left: -250px;
            margin-top: -200px;
            z-index: 10;
        }
    </style>
</head>
<body style="margin: 0;">

    <div>
        <input type="button" value="添加" onclick="ShowModel();" />
        <input type="button" value="全选" onclick="ChooseAll();" />
        <input type="button" value="取消" onclick="CancleAll();" />
        <input type="button" value="反选" onclick="ReverseAll();" />

        <table>
            <thead>
                <tr>
                    <th>选择</th>
                    <th>主机名</th>
                    <th>端口</th>
                </tr>
            </thead>
            <tbody id="tb">

                <tr>
                    <td>
                        <input type="checkbox" />
                    </td>
                    <td>1.1.1.1</td>
                    <td>190</td>
                </tr>
                <tr>
                    <td><input type="checkbox"f id="test" /></td>
                    <td>1.1.1.2</td>
                    <td>192</td>
                </tr>
                <tr>
                    <td><input type="checkbox" /></td>
                    <td>1.1.1.3</td>
                    <td>193</td>
                </tr>
            </tbody>
        </table>
    </div>

    <!-- 遮罩层开始 -->
    <div id="i1" class="c1 hide"></div>
    <!-- 遮罩层结束 -->

    <!-- 弹出框开始 -->
    <div id="i2" class="c2 hide">
        <p><input type="text" /></p>
        <p><input type="text" /></p>
        <p>
            <input type="button" value="取消" onclick="HideModel();"/>
            <input type="button" value="确定"/>

        </p>

    </div>
    <!-- 弹出框结束 -->

    <script>
        function ShowModel(){
            document.getElementById('i1').classList.remove('hide');
            document.getElementById('i2').classList.remove('hide');
        }
        function HideModel(){
            document.getElementById('i1').classList.add('hide');
            document.getElementById('i2').classList.add('hide');
        }

        function ChooseAll(){
            var tbody = document.getElementById('tb');
            // 获取所有的tr
            var tr_list = tbody.children;
            for(var i=0;i<tr_list.length;i++){
                // 循环所有的tr，current_tr
                var current_tr = tr_list[i];
                var checkbox = current_tr.children[0].children[0];
                checkbox.checked = true;

            }
        }

        function CancleAll(){
            var tbody = document.getElementById('tb');
            // 获取所有的tr
            var tr_list = tbody.children;
            for(var i=0;i<tr_list.length;i++){
                // 循环所有的tr，current_tr
                var current_tr = tr_list[i];
                var checkbox = current_tr.children[0].children[0];
                checkbox.checked = false;

            }
        }

        function ReverseAll(){
            var tbody = document.getElementById('tb');
            // 获取所有的tr
            var tr_list = tbody.children;
            for(var i=0;i<tr_list.length;i++){
                // 循环所有的tr，current_tr
                var current_tr = tr_list[i];
                var checkbox = current_tr.children[0].children[0];
                if(checkbox.checked){checkbox.checked = false;}else{checkbox.checked = true;}}}

    </script>
</body>
</html>
View Code

示例：侧边栏菜单

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .hide{
            display: none;
        }
        .item .header{
            height: 35px;
            background-color: #2459a2;
            color: white;
            line-height: 35px;
        }
    </style>
</head>
<body>
    <div style="height: 48px"></div>

    <div style="width: 300px">

        <div class="item">
            <div id='i1' class="header" onclick="ChangeMenu('i1');">菜单1</div>
            <div class="content">
                <div>内容1</div>
                <div>内容1</div>
                <div>内容1</div>
            </div>
        </div>
        <div class="item">
            <div id='i2' class="header" onclick="ChangeMenu('i2');">菜单2</div>
            <div class="content hide">
                <div>内容2</div>
                <div>内容2</div>
                <div>内容2</div>
            </div>
        </div>
        <div class="item">
            <div id='i3' class="header" onclick="ChangeMenu('i3');">菜单3</div>
            <div class="content hide">
                <div>内容3</div>
                <div>内容3</div>
                <div>内容3</div>
            </div>
        </div>
        <div class="item">
            <div id='i4' class="header" onclick="ChangeMenu('i4');">菜单4</div>
            <div class="content hide">
                <div>内容4</div>
                <div>内容4</div>
                <div>内容4</div>
            </div>
        </div>
    </div>

    <script>
        function ChangeMenu(nid){
            var current_header = document.getElementById(nid);

            var item_list = current_header.parentElement.parentElement.children;

            for(var i=0;i<item_list.length;i++){
                var current_item = item_list[i];
                current_item.children[1].classList.add('hide');
            }

            current_header.nextElementSibling.classList.remove('hide');
        }
    </script>
</body>
</html>
View Code

 

属性操作

obj.attributes()　　 // 获取属性的字典
> obj=document.getElementById('i1')
< <input id=​"i1" onfocus=​"Focus()​;​" onblur=​"Blur()​;​" type=​"text" value=​"请输入关键字">​
> obj.attributes
< NamedNodeMap {0: id, 1: onfocus, 2: onblur, 3: type, 4: value, length: 5}

obj.setAttribute('key','value')　　 //设置标签属性
> obj.setAttribute('key1','value1')
< undefined
> obj
< <input id=​"i1" onfocus=​"Focus()​;​" onblur=​"Blur()​;​" type=​"text" value=​"请输入关键字" key1=​"value1">​

obj.removeAttribute('key)　　 // 移除标签属性
> obj.removeAttribute('onblur')
< undefined
> obj
< <input id=​"i1" onfocus=​"Focus()​;​" type=​"text" value=​"请输入关键字" key1=​"value1">​

 

创建标签，并添加到HTML

a. 字符串形式  -- insertAdjacentHTML()

b. 对象的方式  -- createElement()、appendChild()

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Examples</title>
</head>
<body >
    <input type="button" onclick="AddEle1()" value="+">
    <input type="button" onclick="AddEle2()" value="+">

    <!-- beforeBegin -->
    <div id='i1'>
        <!-- afterBegin  -->
        <p><input type="text" ></p>
        <!-- beforeEnd -->
    </div>
    <!-- afterEnd -->

    <script type="text/javascript">
        function AddEle1(){
            // 使用字符串创建标签
            console.log('1')
            var tag = "<p> <input type='text' /> </p>" 
            document.getElementById('i1').insertAdjacentHTML('beforeEnd',tag); // 参数为字符串
        }

        function AddEle2(){
            // 通过对象方式创建标签
            var tag = document.createElement('input');
            tag.setAttribute('type','text');
            tag.style.frontSize='16px';
            tag.style.color='red';

            var p = document.createElement('p');
            p.appendChild(tag);

            document.getElementById('i1').appendChild(p); // 参数为标签对象
        }
    </script>
</body>
</html>
View Code

 

提交表单，任何标签通过DOM都可以提交表单

submit() 

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Examples</title>
</head>
<body >
    <form id="f1" action="http://www.qq.com">
        <input type="text" >
        <input type="submit" value="提交">
        <a onclick="submitForm()"> 提交 </a>
    </form>
    <script type="text/javascript">
        function submitForm() { 
            document.getElementById('f1').submit()
        }
    </script>
</body>
</html>
View Code

 

其他操作：

console.log() 　　// 输出
alert() 　　//  弹出框
confirm() 　　// 确认框

> alert(123)

> v = confirm('确定删除吗？')

< false  // 点击取消返回值为 false，点击确定返回值为true

    

location.href 　　// 获取当前url
location.href = “http://xxx” 　　// 重定向，跳转
locate.reload() 　　//页面刷新，相当与location.href = location.href

setInterval 　　// 多次定时器
clearInterval 　　// 清除多次定时器
　　> var obj=setInterval(function(){...}, time)
　　> clearInterval(obj);

setTimeout 单次定时器，只执行一次
clearTimeout 清除单次定时器

　　> var obj=setTimeout(function(){...}, time)
　　> clearTimeout(obj )

 

代码示例：alert()

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <script>
        // 创建一个3秒的定时器
        setInterval("alert(123);", 3000);   
    </script>    
    <script>
        function f1(){
            console.log(1);
        }
        setInterval("f1();", 3000);
    </script>
</body>
</html>
View Code

代码示例：字体滚动

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div id="i1">欢迎周总莅临指导</div>

    <script>
        function func(){
            // 根据ID获取指定标签的内容,赋于局部变量
            var tag = document.getElementById('i1');
            // 获取标签内部的内容
            var content = tag.innerText;

            var f = content.charAt(0);
            var l = content.substring(1,content.length);

            var new_content = l + f;
            tag.innerText = new_content;
        } 
        setInterval('func()', 500);
    </script>
</body>
</html>
View Code

 

事件

绑定事件三种方式

a. 直接在标签中绑定 ：<标签  事件='func()'>　　　　

<input id='i1' type='button' onclick='clickOn(this) '>　<!-- this 表示当前触发事件的标签 -->

function clickOn(self){

　　// self 当前点击的标签

}

b. 先获取Dom对象，然后进行绑定 ：domObj.onclick = function(){...}

doument.getElementById('i1').onclick

<input id='i1' type='button'>

　　document.getElementById('i1').onclick = function(){

　　// this 代指当前点击的标签

}

示例：行为、样式、结构相分离的页面

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Examples</title>
</head>
<body >
    <table border='1' width='300px'>
        <tr><td>1</td><td>2</td><td>3</td></tr>
        <tr><td>1</td><td>2</td><td>3</td></tr>
        <tr><td>1</td><td>2</td><td>3</td></tr>
    </table>
    <script type="text/javascript">
        var myTrs = document.getElementsByTagName('tr');
        var len = myTrs.length;
        for(var i=0; i<len;i++){
            // i=0, i=1, i=2 
            myTrs[i].onmouseover = function(){
                // myTrs[i].style.backgroundColor = 'red';  // 注意这里不能写myTrs[i]，循环时function()内部并未执行，当鼠标移动时执行函数此时i=2，所以看不到效果。
                this.style.backgroundColor = 'red';   // 谁调用这个事件，this就指向谁

            }

            myTrs[i].onmouseout = function(){
                this.style.backgroundColor = '';   
            }            
        }
    </script>
</body>
</html>
View Code

示例： 侧边栏（使用 this）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .hide{
            display: none;
        }
        .item .header{
            height: 35px;
            background-color: #2459a2;
            color: white;
            line-height: 35px;
        }
    </style>
</head>
<body>
    <div style="height: 48px"></div>

    <div style="width: 300px">

        <div class="item">
            <div class="header" onclick="ChangeMenu(this);">菜单1</div>
            <div class="content">
                <div>内容1</div>
                <div>内容1</div>
                <div>内容1</div>
            </div>
        </div>
        <div class="item">
            <div class="header" onclick="ChangeMenu(this);">菜单2</div>
            <div class="content hide">
                <div>内容2</div>
                <div>内容2</div>
                <div>内容2</div>
            </div>
        </div>
        <div class="item">
            <div class="header" onclick="ChangeMenu(this);">菜单3</div>
            <div class="content hide">
                <div>内容3</div>
                <div>内容3</div>
                <div>内容3</div>
            </div>
        </div>
        <div class="item">
            <div class="header" onclick="ChangeMenu(this);">菜单4</div>
            <div class="content hide">
                <div>内容4</div>
                <div>内容4</div>
                <div>内容4</div> 
            </div>
        </div>
    </div>

    <script>
        function ChangeMenu(self){  // self 形参表示当前点击的标签
            // 如果在这里写this, 代指全局对象(window),而不是当前点击的标签

            var current_header = self;
            var item_list = current_header.parentElement.parentElement.children;

            for(var i=0;i<item_list.length;i++){
                var current_item = item_list[i];
                current_item.children[1].classList.add('hide');
            }

            current_header.nextElementSibling.classList.remove('hide');
        }
    </script>
</body>
</html>
View Code

 c. 先获取Dom对象，然后进行绑定 ：domObj.addEventListener(‘事件'，function(){..}，false/true)  可以对同一Dom对象绑定多个事件

事件之捕捉与冒泡：

示例1：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div id='test' style="background-color: red">&nbsp;</div>    
    <script>
        var mydiv= document.getElementById('test');
        mydiv.addEventListener('click',function(){console.log('aaa')},false);
        mydiv.addEventListener('click',function(){console.log('bbb')},false);
    </script>
</body>
</html>
View Code

示例2：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        #main {
            background-color: red;
            width:300px;
            height: 400px;
        }

        #content {
            background-color: pink;
            width: 150px;
            height: 200px;
        }
    </style>
</head>
<body> 
    <div id='main'>
        <div id='content'></div>
    </div>
    <script>
        var mymain = document.getElementById('main');
        var mycontent = document.getElementById('content');
        // false 为冒泡，true 为捕捉
        mymain.addEventListener('click',function(){console.log('main')},false);
        mycontent.addEventListener('click',function(){console.log('content')},false);
    </script>
</body>
</html>
View Code

 

posted @ 2017-11-01 15:54  bobo0609  Views(441)  Comments(0)    收藏  举报