前端JavaScrip之DOM对象

一概述

DOM（Document Object Model）是当网页被加载时浏览器创建的页面文档对象模型。DOM用结构化的方式描述了标记语言的文件内容。JavaScript中几乎所有有意义的行为都是围绕DOM展开的，比如：读写页面元素、响应页面事件、进行表单验证等。

HTML DOM被构建为树结构，在DOM内部每个HTML页面被描述为一个以document为根节点的树，HTML中的每一个标记<..>都被表示为该树中的一个节点，比如如下一个HTML文件：

浏览器加载时生成的DOM树如下：

通过可编程的对象模型，JavaScript 获得了足够的能力来创建动态的 HTML。

JavaScript 能够改变页面中的所有 HTML 元素
JavaScript 能够改变页面中的所有 HTML 属性
JavaScript 能够改变页面中的所有 CSS 样式
JavaScript 能够对页面中的所有事件做出反应

二 DOM节点

2.1 节点类型

在 HTML DOM （文档对象模型）中，每个部分都是节点：

文档本身是文档节点（重点）
所有 HTML 元素是元素节点（重点）
所有 HTML 属性是属性节点
HTML 元素内的文本是文本节点
注释是注释节点

2.2 节点关系

节点树中的节点彼此拥有层级关系。
父(parent)，子(child)和同胞(sibling)等术语用于描述这些关系。父节点拥有子节点。同级的子节点被称为同胞（兄弟或姐妹）。

在节点树中，顶端节点被称为根（root）
每个节点都有父节点、除了根（它没有父节点）
一个节点可拥有任意数量的子节点
同胞是拥有相同父节点的节点

下面的图片展示了节点树的一部分，以及节点之间的关系：

访问 HTML 元素（节点），访问 HTML 元素等同于访问节点，我们能够以不同的方式来访问 HTML 元素。

2.3 节点查找

2.3.1 直接查找节点

document.getElementById(“idname”)          // id查找，返回对拥有指定id的第1个对象的引用
document.getElementsByTagName(“tagname”)   // 标签名称查找，返回带有指定标签名的对象集合
document.getElementsByName(“name”)         // 属性name查找，返回带有指定名称的对象集合
document.getElementsByClassName(“name”)    // 属性classname查找，返回带有指定属性名的对象集合

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div id="d1">
        <div class="c1">我的class是c1</div>
        <div class="c1" name="joe">我的class是c1，我的name是joe</div>
        <div id="d2">我的id是d2</div>
        <p>Hello World</p>
    </div>

    <script>
        var d = document.getElementById("d1");  // 标签<div id="d1">的节点
        console.log(d);
        var d1 = document.getElementsByTagName("div");  // <div>节点的结合
        console.log(d1);
        var n = document.getElementsByName("joe");  // 指定名称节点的结合
        console.log(n);
        var c = document.getElementsByClassName("c1");  // 指定ClassName节点的结合
        console.log(c);
    </script>
</body>
</html>

View Code

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div id="div1">
        <div class="c1">我的class是c1</div>
        <div class="c1" name="joe">我的class是c1，我的name是joe</div>
        <div id="div2">我的id是d2</div>
        <p>Hello World</p>
    </div>

    <script>
        var div1 = document.getElementById("div1");
        //支持
        var ele1 = div1.getElementsByTagName("p");
        alert(ele1.length);
        //支持
        var ele2 = div1.getElementsByClassName("c1");
        alert(ele2.length);
        //不支持
        var ele3 = div1.getElementById("div2");
        alert(ele3.length);
        //不支持
        var ele4 = div1.getElementsByName("joe");
        alert(ele4.length)
    </script>
</body>
</html>

局部查找

注意：涉及到寻找元素，注意<script>标签的位置！

2.3.2 导航节点查找

parentElement           // 父节点标签元素
children                // 所有子标签
firstElementChild       // 第一个子标签元素
lastElementChild        // 最后一个子标签元素
nextElementtSibling     // 下一个兄弟标签元素
previousElementSibling  // 上一个兄弟标签元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div id="div1">
        <h3>这是一个标题</h3>
        <div id="div2">我的class是c1</div>
        <div name="joe">我的class是c1，我的name是joe</div>
        <div id="div3">我的id是d2</div>
        <p>Hello World</p>
    </div>

    <script>
        var ele1 = document.getElementById("div2");
        console.log(ele1);  // <div id="div2">我的class是c1</div>

        var ele2 = ele1.nextElementSibling;  // 下一个兄弟标签元素
        console.log(ele2);  // <div name="joe">我的class是c1，我的name是joe</div>

        var ele3 = ele1.previousElementSibling;  // 上一个兄弟标签元素
        console.log(ele3);  // <h3>这是一个标题</h3>

        var parentEle = ele1.parentElement;  // 父节点标签元素
        console.log(parentEle);

        var childs = parentEle.children;   // 所有子标签
        console.log(childs);

        var fristChild = parentEle.firstElementChild;   // 第一个子标签元素
        console.log(fristChild);  // <h3>这是一个标题</h3>

        var lastChild = parentEle.lastElementChild;   // 最后一个子标签元素
        console.log(lastChild);   // <p>Hello World</p>
    </script>
</body>
</html>

View Code

注意：js中没有办法找到所有的兄弟标签

2.4 节点操作

2.4.1 创建节点

createElement(标签名) ：创建一个指定名称的元素。

//示例
var tag = document.createElement("input");
tag.setAttribute("type","password");

2.4.2 增加节点

追加一个子节点（作为最后的子节点）
somenode.appendChild(newnode)
 
把增加的节点放到某个节点的前边（添加兄弟节点）
somenode.insertBefore(newnode,某个节点);  // 不指定节点，则添加到最前面

2.4.3 删除节点

removeChild()：获得要删除的元素，通过父元素调用删除

<script>
    var parent = document.getElementById("div1");
    var child = document.getElementById("div2");
    parent.removeChild(child)
</script>

View Code

2.4.4 替换节点

somenode.replaceChild(newnode, 某个节点);

<script>
    var parent = document.getElementById("div1");
    var child = document.getElementById("div2");
    var newTag = document.createElement("p");
    parent.replaceChild(newTag, child);
</script>

View Code

2.5 节点属性操作

2.5.1 innerText/innerHTML

innerText：不管赋值还是取值，只能识别纯文本
innerHTML：既可以识别纯文本，也可以识别标签

<div id="d1">xxxx</div>
<div id="d2"><p>oooo</p></div>

<script>
    //innerText：不管赋值还是取值，只能识别纯文本
    var a = document.getElementById('d1');
    console.log(a);
    //取值操作
    console.log(a.innerText);  // xxxx
    console.log(a.innerHTML);  // xxxx
    //赋值操作
    //        a.innerText = 'Hello World';
    a.innerHTML = '<a href="">Hello World</a>';

    //innerHtml：既可以识别纯文本，也可以识别标签
    var b = document.getElementById('d2');
    console.log(b);
    //取值操作
    console.log(b.innerText);  // oooo
    console.log(b.innerHTML);  // <p>oooo</p>
    //赋值操作
    //        b.innerText = 'Hello JavaScript';
    b.innerHTML = '<a href="">Hello JavaScript</a>';
    </script>

View Code

注意：

innerHTML 给节点添加html代码，不是w3c的标准，但是主流浏览器支持
使用innerHTML赋值时，语句一点要写在<body>中，否则报错。因为写在上面，在文件开始执行时，未加载到元素，会找不到需要操作的元素。

2.5.2 attribute操作

elementNode.setAttribute(name,value)      // 设置属性
elementNode.getAttribute(属性名)　　　　　// 获取属性值。等同于：elementNode.属性名(DHTML)
elementNode.removeAttribute(属性名);      // 删除属性

<body>
    <div id="d1" class="c1">xxxx</div>

<script>
    var a = document.getElementsByClassName('c1')[0];
    // 获取属性值
    // 方式一
    var c = a.getAttribute("class");
    console.log(c);
    // 方式二：以成员变量的方式访问
    var d1 = a.id;  // 该方式不能获取class的属性值
    console.log(d1);

    // 属性赋值
    // 方式一
    a.setAttribute("class", "c11");
    // 方式二：以成员变量的方式访问赋值
    a.id = "d2";  // 该方式不能给class属性赋值
    </script>
</body>

View Code

2.5.3 value获取当前选中的value值

input
select(selectedIndex)
textarea

2.5.4 class相关操作

elementNode.className            // 查询class
elementNode.classList.add　　　　// 增加class
elementNode.classList.remove　　 // 删除calss

<body>
    <div id="d1" class="c1 c2 c3"></div>
    <script>
        var a = document.getElementById("d1");
        document.write(a.className);           // c1 c2 c3
        a.classList.add("c4");
        document.write(a.className);           // c1 c2 c3 c4
        a.classList.remove("c1");
        document.write(a.className);           // c2 c3 c4
    </script>
</body>

View Code

2.5.5 改变css样式

<body>
    <div id="d1">Hello world</div>
    <script>
        document.getElementById("d1").style.color = "red";
        document.getElementById("d1").style.fontSize = "24px";
    </script>
</body>

View Code

注意：

css属性名称中包含“-”，在此处变更为字母大写；
操作css属性一定是通过“style”去操作；
在后面的jQuery中为：$(selector).css.属性名称；
操作其他属性则不需要“style”，注意不要混淆。

三 DOM Event（事件）

3.1 事件类型

onclick        当用户点击某个对象时调用的事件句柄
ondblclick     当用户双击某个对象时调用的事件句柄

onfocus        元素获得焦点               练习：输入框
onblur         元素失去焦点               应用场景：用于表单验证,用户离开某个输入框时,代表已经输入完了,我们可以对它进行验证.
onchange       域的内容被改变             应用场景：通常用于表单元素,当元素内容被改变时触发.（三级联动）

onkeydown      某个键盘按键被按下          应用场景: 当用户在最后一个输入框按下回车按键时,表单提交.
onkeypress     某个键盘按键被按下并松开
onkeyup        某个键盘按键被松开

onload         一张页面或一幅图像完成加载

onmousedown    鼠标按钮被按下
onmousemove    鼠标被移动
onmouseout     鼠标从某元素移开
onmouseover    鼠标移到某元素之上
onmouseleave   鼠标从元素离开

onselect       文本被选中
onsubmit       表单提交时触发

3.2 绑定事件的方式

<input type="button" id="d1" onclick="func1(this)" value="点击">

<script>
    function func1(self){               // 形参不能是this;
        console.log("hello world");
        console.log(self);              //<input type="button" id="d1" onclick="foo(this)" value="点击">
    }
</script>

方式一

<input type="button" id="d1" value="点击">

<script>
    var ele = document.getElementById("d1");
    ele.onclick = function () {
        console.log("hello world");
        console.log(this);       //<input type="button" id="d1" value="点击">
    }
</script>

方式二

3.3 事件详细介绍

onload

onload 属性开发中只给 body元素加。这个属性的触发标志着页面内容被加载完成。

应用场景：当有些事情我们希望页面加载完立刻执行，那么可以使用该事件属性。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <script>

//        window.onload = function(){
//            var ele = document.getElementById("d1");
//            ele.onclick = function(){
//                alert(123);
//            };
//        };

        function func() {
            var ele = document.getElementById("d1");
            ele.onclick = function(){
                alert(123);
            };
        };

    </script>
</head>
<body onload="func()">  // 放在其他元素中无效
    <input type="button" id="d1" value="点击">
</body>
</html>

View Code

事件传播

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

    <div id="d1" style="background-color: gray; width:300px; height:300px;">
        <div id="d2" style="background-color: blueviolet; width:200px; height:200px;"></div>
    </div>

    <script type="text/javascript">
        document.getElementById("d1").onclick=function(){
            alert('d1触发');
        };
        document.getElementById("d2").onclick=function(event){
            alert('d2触发');
            event.stopPropagation();    // 阻止事件向外层div传播
        }
    </script>
</body>
</html>

View Code

提醒：何为事件传播，当一个区域有多个事件时，防止同时执行多个事件，加入了事件传播，从而只会执行内部事件。

onsubmit

当表单在提交时触发。该属性也只能给form元素使用。应用场景：在表单提交前验证用户输入是否正确。如果验证失败，在该方法中我们应该阻止表单的提交。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <script>
        window.onload = function(){
            var ele = document.getElementById("form");
            ele.onsubmit = function(event) {
                // 阻止表单提交方式一：onsubmit 命名的事件函数，可以接受返回值。其中返回false表示拦截表单提交，其他为放行
//                alert("验证失败，表单不会提交!");
//                return false;
                // 阻止表单提交方式二：event.preventDefault(); 通知浏览器不要执行与事件关联的默认动作。
                alert("验证失败，表单不会提交!");
                event.preventDefault();
            };
        };
    </script>
</head>
<body>
    <form id="form">
        <input type="text"/>
        <input type="submit" value="提交" />
    </form>
</body>
</html>

View Code

onselect

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <input type="text">

    <script>
        var ele = document.getElementsByTagName("input")[0];
            ele.onselect = function(){
                alert("文本被选中");
            };
    </script>
</body>
</html>

View Code

onchange

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <select id="d1">
        <option value="">111</option>
        <option value="">222</option>
        <option value="">333</option>
    </select>

    <script>
    var ele = document.getElementById("d1");
        ele.onchange = function(){
              alert("内容已改变");
        }
    </script>
</body>
</html>

View Code

onkeydown

Event 对象：Event 对象代表事件的状态，比如：事件在其中发生的元素、键盘按键的状态、鼠标的位置、鼠标按钮的状态。

事件通常与函数结合使用，函数不会在事件发生前被执行！event对象在事件发生时系统已经创建好了，并且会在事件函数被调用时传给事件函数。

我们获得仅仅需要接收一下即可。比如：onkeydown，我们想知道哪个键被按下了，需要问下event对象的属性，这里就是KeyCode。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

    <input type="text" id="d1"/>

    <script>
        var ele = document.getElementById("d1");
        ele.onkeydown = function(e){
            e = e||window.event;
            var keynum = e.keyCode;
            var keychar = String.fromCharCode(keynum);
            alert(keynum+'---->'+keychar);
        };
    </script>

</body>
</html>

View Code

onmouseout&onmouseleave

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #container{
            width: 300px;
        }
        #title{
            cursor: pointer;
            background: #ccc;
            text-align: center;
            line-height: 50px;
            font-size: 20px;
        }
        #list{
           display: none;
        }

        #list div{
            line-height: 30px;
            text-align: center;
        }
        #list .item1{
            background-color: green;
        }

        #list .item2{
            background-color: rebeccapurple;
        }

        #list .item3{
            background-color: lemonchiffon;
        }
    </style>
</head>
<body>
    <p>先看下使用onmouseleave的效果:</p>
    <div id="container">
        <div id="title">onmouseleave事件</div>
        <div id="list">
            <div class="item1">第一行</div>
            <div class="item2">第二行</div>
            <div class="item3">第三行</div>
        </div>
    </div>

    <script>
    // 1.不论鼠标指针离开被选元素还是任何子元素，都会触发onmouseout事件
    // 2.只有在鼠标指针离开被选元素时，才会触发onmouseleave事件

    var container = document.getElementById("container");
    var title = document.getElementById("title");
    var list = document.getElementById("list");

    title.onmouseover = function(){
        list.style.display = "block";
    };

//    container.onmouseleave = function(){   // 改为onmouseout试一下
//       list.style.display = "none";
//    };

    // 因为mouseout事件是会冒泡的，也就是onmouseout事件可能被同时绑定到了container的子元素title和list上
    // 所以鼠标移出每个子元素时也都会触发我们的list.style.display="none";


    // 思考：如果这样会产生什么效果
    list.onmouseout=function(){
       list.style.display="none";
    };

    // 为什么移出第一行时，整个list会被隐藏?
    // 其实是同样的道理，onmouseout事件被同时绑定到list和它的三个子元素item上，所以离开任何一个
    // 子元素同样会触发list.style.display="none";

    </script>
</body>
</html>

View Code

再次说明两者区别：

不论鼠标指针离开被选元素还是任何子元素，都会触发onmouseout 事件
只有在鼠标指针离开被选元素时，才会触发onmouseleave 事件

四实例练习

4.1 左侧菜单

重要知识点：

classList的应用
除自己外其他兄弟标签的查找

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            margin: 0 auto;
            padding: 0;
        }
        .outer{
            width: 80%;
            height: 315px;
            margin-top: 20px;
        }
        #left{
            float: left;
            width: 20%;
            height: 315px;
            background-color: #7A77C8;
        }
        #right{
            float: left;
            width: 80%;
            height: 315px;
            background-color: blueviolet;
            font-size: 30px;
            text-align: center;
            line-height: 315px;
        }
        .title{
            font-size: 20px;
            height: 30px;
            line-height: 30px;
            padding-left: 20px;
            background-color: blue;
            margin-top: 5px;
        }
        .menu-list{
            list-style-type: none;
            padding-left: 20px;
            color: white;
            line-height: 25px;
        }
        .hide{
            display: none;
        }

    </style>
</head>
<body>
    <div class="outer">
        <div id="left">
            <div class="menu">
                <div class="title">手机</div>
                <ul class="menu-list">
                    <li>华为</li>
                    <li>一加</li>
                    <li>小米</li>
                </ul>
            </div>
            <div class="menu">
                <div class="title">电视</div>
                <ul class="menu-list hide">
                    <li>长虹</li>
                    <li>康佳</li>
                    <li>海信</li>
                </ul>
            </div>
            <div class="menu">
                <div class="title">电脑</div>
                <ul class="menu-list hide">
                    <li>联想</li>
                    <li>华硕</li>
                    <li>华为</li>
                </ul>
            </div>
        </div>
        <div id="right">内容</div>
    </div>
    <script>
        var eles = document.getElementsByClassName("title");
        for(i=0;i<eles.length;i++){
            eles[i].onclick=function () {
                this.nextElementSibling.classList.remove("hide");
                for(var j=0;j<eles.length;j++){
                    if (eles[j]!=this){
                        eles[j].nextElementSibling.classList.add("hide");
                    }
                }
            }
        }
    </script>
</body>
</html>

View Code

4.2 搜索框

重要知识点：

onfocus&onblur的使用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

</head>
<body>

    <input id="d1" type="text" value="请输入内容">
    <script>
        var ele = document.getElementById("d1");
        ele.onfocus = function() {
            if(ele.value == "请输入内容"){
                ele.value = "";
            }
        }
        ele.onblur = function() {
            if(!ele.value.trim()){
                ele.value = "请输入内容";
            }
        }
    </script>

</body>
</html>

View Code

4.3 模态对话框

重要知识点：

对相同属性名称的标签处理是动态的，在判断长度时需要注意

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .back{
            background-color: white;
            height: 2000px;
        }

        .shade{
            position: fixed;
            top: 0;
            bottom: 0;
            left:0;
            right: 0;
            background-color: grey;
            opacity: 0.4;
        }

        .hide{
            display: none;
        }

        .models{
            position: fixed;
            top: 50%;
            left: 50%;
            margin-left: -100px;
            margin-top: -100px;
            height: 200px;
            width: 200px;
            background-color: wheat;

        }
    </style>
</head>
<body>
<div class="back">
    <input class="c" type="button" value="click">
</div>

<div class="shade hide handles"></div>

<div class="models hide handles">
    <input class="c" type="button" value="cancel">
</div>


<script>


    var eles=document.getElementsByClassName("c");
    var handles=document.getElementsByClassName("handles");
    for(var i=0;i<eles.length;i++){
        eles[i].onclick=function(){

            if(this.value=="click"){

                for(var j=0;j<handles.length;j++){

                    handles[j].classList.remove("hide");

                 }

            }
            else {
                for(var j=0;j<handles.length;j++){

                    handles[j].classList.add("hide");
                }

            }
        }
    }

</script>

</body>
</html>

View Code

4.4 全选&反选&取消

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        input{
            margin-top: 10px;
        }
        button{
            margin-left: 15px;
        }
        .select_all{
            margin-left: 0px;
        }
    </style>
</head>
<body>
    <form>
        <input type="radio">&nbsp;选项一<br>
        <input type="radio">&nbsp;选项二<br>
        <input type="radio">&nbsp;选项三<br>
        <input type="radio">&nbsp;选项四<br>
        <input type="radio">&nbsp;选项五<br>
    </form>
    <br>
    <button class="select_all">全选</button>
    <button class="select_reverse">反选</button>
    <button class="cancel">取消</button>

    <script>
        var select_all = document.getElementsByClassName("select_all")[0];
        var select_reverse = document.getElementsByClassName("select_reverse")[0];
        var cancel = document.getElementsByClassName("cancel")[0];
        var inputs = document.getElementsByTagName("input");
        select_all.onclick = function () {
            for(i=0;i<inputs.length;i++){
                inputs[i].checked=true;
            }
        }
        select_reverse.onclick = function () {
            for(i=0;i<inputs.length;i++){
                if(inputs[i].checked){
                    inputs[i].checked=false;
                }else {
                    inputs[i].checked=true;
                }
            }
        }
        cancel.onclick = function () {
            for(i=0;i<inputs.length;i++){
                inputs[i].checked=false;
            }
        }
    </script>
</body>

View Code

4.5 select正反移动

重要知识点：

节点的操作，父节点添加子节点，节点的相互移动等；
for循环对数据长度进行判断时，注意其是否为动态的，以免造成错误；
select标签中的option可以通过select.options获取。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            margin: 10px auto;
            padding: 0;
        }
        .outer {
            width: 500px;
            height: 370px;
            background-color: #c0cddf;
        }

        .left{
            width: 200px;
            height: 350px;
            background-color: #cccccc;
            font-size: 20px;
            line-height: 30px;
            margin-top: 10px;
            margin-left: 10px;
            float: left;
        }
        option{
            margin-top: 10px;
            padding-left: 5px;
        }
        .choice{
            display: inline-block;
            width: 80px;
            height: 350px;
            text-align: center;
            float: left;
            margin-top: 10px;
        }
        .choice button{
            display: inline-block;
            width: 50px;
            height: 25px;
            font-size: 20px;
            line-height: 25px;
            margin-top: 40px;
        }
        .right{
            width: 200px;
            height: 350px;
            background-color: #cccccc;
            font-size: 20px;
            line-height: 30px;
            margin-top: 10px;
            float: left;
        }
    </style>


</head>
<body>

    <div class="outer">
        <select class="left" multiple="multiple" size="10">
            <option>choice1</option>
            <option>choice2</option>
            <option>choice3</option>
            <option>choice4</option>
            <option>choice5</option>
            <option>choice6</option>
            <option>choice7</option>
            <option>choice8</option>
            <option>choice9</option>
            <option>choice10</option>
        </select>
        <span class="choice">
            <button class="choice_move">></button>
            <button class="all_move">>></button>
            <button class="reverse_choice_move"><</button>
            <button class="reverse_all_move"><<</button>
        </span>

        <select class="right" multiple="multiple" size="10">

        </select>
    </div>
    <script>
        var choice_move = document.getElementsByClassName("choice_move")[0];
        var all_move = document.getElementsByClassName("all_move")[0];
        var reverse_choice_move = document.getElementsByClassName("reverse_choice_move")[0];
        var reverse_all_move = document.getElementsByClassName("reverse_all_move")[0];
        var right = document.getElementsByClassName("right")[0];
        var left = document.getElementsByClassName("left")[0];

        choice_move.onclick = function () {
            var left_options = left.options;
            for(i=0;i<left_options.length;i++){
                if(left_options[i].selected){
                    right.appendChild(left_options[i]);
                    i--;
                }
            }
        }

        all_move.onclick = function () {
            var left_options = left.options;
            for(i=0;i<left_options.length;i++){
                right.appendChild(left_options[i]);
                i--;
            }
        }

        reverse_choice_move.onclick = function () {
            var right_options = right.options;
            for(i=0;i<right_options.length;i++){
                if(right_options[i].selected){
                    left.appendChild(right_options[i]);
                    i--;
                }
            }
        }
        reverse_all_move.onclick = function () {
            var right_options = right.options;
            for(i=0;i<right_options.length;i++){
                left.appendChild(right_options[i]);
                i--;
            }
        }
    </script>

</body>
</html>

View Code

4.6 二级联动

重要知识点：

js对象（类似py字典）不能通过索引获取key，可以通过for/in进行遍历，获取value通过objectname.key或者objectname[key]两种方式；
遍历数组对象时，为索引值；
节点的创建、添加；
selectedIndex以及inneHTML的应用；
[select].options.length=0的应用，清空select下的option标签。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        select{
            height: 22px;
            margin-left: 10px;
        }
    </style>
</head>
<body>
    <select class="pro" name="province">
        <option>请选择省份</option>
    </select>

    <select class="city" name="city">
        <option>请选择城市</option>
    </select>

    <script>
        data={"河北省":["石家庄","廊坊","邯郸"],
            "河南省":["郑州","漯河","开封"],
            "湖北省":["武汉","黄冈","黄石"],
            "湖南省":["长沙","湘潭","娄底"],
            "四川省":["成都","绵阳","德阳"],};
        var pro = document.getElementsByClassName("pro")[0];
        var city = document.getElementsByClassName("city")[0];

        for(var i in data){
            var option_pro = document.createElement("option");
            option_pro.innerHTML = i;
            pro.appendChild(option_pro);
        }
        pro.onchange = function () {
//            console.log(this);
//            console.log(this.options);
//            console.log(this.selectedIndex);
            province = (this.options[this.selectedIndex]).innerHTML;
            citys = data[province];
            city.options.length=0;    //清空
            for(var i in citys){
                var option_city = document.createElement("option");
                option_city.innerHTML = citys[i];
                city.appendChild(option_city);
            }
        }

    </script>
</body>
</html>

View Code

4.7 跑马灯

重要知识点：

setInterval的使用；
字符串字符的查询与拼接等字符串操作。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .c1{
            color: red;
            background-color: gray;
            text-align: center;
            line-height: 50px;
            font-size: 30px;
        }
    </style>

</head>
<body>

    <p class="c1">欢迎光临中国北京</p>

    <script>
        function test() {
            var ele = document.getElementsByClassName("c1")[0];
            var connect=ele.innerText;
            var first_char = connect.charAt();    //默认为第一个字符
            var other_char = connect.substr(1,connect.length);
            var new_str = other_char+first_char;
            ele.innerText = new_str;
        }
        setInterval(test,1500)
    </script>

</body>
</html>

View Code

参考：http://www.cnblogs.com/yuanchenqi/articles/6893904.html#_label5

posted @ 2018-09-15 20:40 Joe1991 阅读(157) 评论(0) 收藏举报

刷新页面返回顶部

Joe1991

前端JavaScrip之DOM对象

一 概述

二 DOM节点

2.1 节点类型

2.2 节点关系

2.3 节点查找

2.4 节点操作

2.5 节点属性操作

三 DOM Event（事件）

3.1 事件类型

3.2 绑定事件的方式

3.3 事件详细介绍

四 实例练习

4.1 左侧菜单

4.2 搜索框

4.3 模态对话框

4.4 全选&反选&取消

4.5 select正反移动

4.6 二级联动

4.7 跑马灯

公告

一概述

四实例练习