JS——DOM

　　通过DOM对HTML的文档树进行操作，

一、DOM选择器

（一）直接获取标签

　　有四种方式：document.getElementById（）、document.getElementsByTagName（）、document.getElementsByClassName（）、document.getElementsByName（），

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

    </style>

</head>
<body>
   <div>
       <div class="c1">
           the first level
           <div name="n1">1_11</div>
           <div>1_22</div>
           <div id="i1">
               <a>1_33 hello a</a>
           </div>
           hahaha
           <div class="c1">1_44</div>
       </div>
       <div class="c1">
           <div name="n1">2_55</div>
           <p name="n1">2_77</p>
           <a>2_66</a>
       </div>

   </div>


    <script language="JavaScript">
        //直接获取元素的四种方法：通过id、class、name、标签名，
        var p1 = document.getElementById("i1");
        console.log(p1);

        var p2 = document.getElementsByTagName("a");
        console.log(p2);        // [a, a]
        for(var i=0;i<p2.length;i++){
            console.log(p2[i]);
        };

        var p3 = document.getElementsByClassName("c1");
        console.log(p3);        // [div.c1, div.c1, div.c1]
        for(var j=0;j<p3.length;j++){
            console.log(p3[j]);
        };

        var p4 = document.getElementsByName("n1");
        console.log(p4);        // [div, div, p]
        for(var k=0;k<p4.length;k++){
            console.log(p4[k]);
        };

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

View Code

（二）间接获取标签，不含文本

　　主要方法：parentElement、children、firstElementChild、lastElementChild、previousElementSibling、nextElementSibling，

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

    </style>

</head>
<body>
   <div>
       <div class="c1">
           the first level
           <div name="n1">1_11</div>
           <div>1_22</div>
           <div id="i1">
               <a>1_33 hello a</a>
           </div>
           hahaha
           <div class="c1">1_44</div>
       </div>
       <div class="c2">
           <div name="n1">2_55</div>
           <p name="n1">2_77</p>
           <a>2_66</a>
       </div>

   </div>


    <script language="JavaScript">
        //间接获取，方式一：仅取标签，不含文本
        var p1 = document.getElementById("i1");
        console.log(p1);

        var fa1 = p1.parentElement;             //父节点标签
        console.log(fa1);

        var cd1 = fa1.children;                 //全部子标签
        console.log(cd1);       // [div, div, div#i1, div.c1, n1: div, i1: div#i1]
        for(var i=0;i<cd1.length;i++){
            console.log(cd1[i]);
        };

        var fir = fa1.firstElementChild;        //第一个子标签
        console.log(fir);
        var bef = fir.previousElementSibling;   //前一个标签
        console.log(bef);      //null

        var las = fa1.lastElementChild;         //最后一个子标签
        console.log(las);
        var aft1 = las.nextElementSibling;      //后一个标签
        console.log(aft1);      //undefined

        var laspn = las.previousElementSibling.nextElementSibling;
        console.log(laspn === las);   //true


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

View Code

（三）间接获取标签，含文本

　　主要方法：parentNode、childNodes、firstChild、lastChild、previousSibling、nextSibling，

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

    </style>

</head>
<body>
   <div>
       <div class="c1">
           the first level
           <div name="n1">1_11</div>
           <div>1_22</div>
           <div id="i1">
               <a>1_33 hello a</a>
           </div>
           hahaha
           <div class="c1">1_44</div>
       </div>
       <div class="c2">
           <div name="n1">2_55</div>
           <p name="n1">2_77</p>
           <a>2_66</a>
       </div>

   </div>


    <script language="JavaScript">
        //间接获取，方式二：仅取标签，含文本
        var p = document.getElementById("i1");

        //1、parentElement与parentNode完全相同，都表示父节点，
        var fa = p.parentElement;
        var fa_text = p.parentNode;
        console.log(fa === fa_text);  //true

        /*//2、所有子节点,包含文本
        var chi = fa_text.childNodes;

        console.log(chi.length);   //9
        for(var i=0;i<chi.length;i++){
            console.log(chi[i]);
        };
            //nodeType:1标签、3文本，
        for(var i=0;i<chi.length;i++){
            if(chi[i].nodeType == 1){
                console.log("标签",chi[i]);
            }else if(chi[i].nodeType == 3){
                console.log("文本",chi[i]);
            }else{
                console.log("something wrong");
            };
        };*/

        //3、各节点
        var fir = fa.firstChild;
        console.log("第一个子节点",fir);
        var las = fa.lastChild;
        console.log("最后一个子节点",las);
        var bef = las.previousSibling;
        console.log("最后一个子节点前面的节点",bef);
        var aft = fir.nextSibling;
        console.log("第一个子节点后面的节点",aft);

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

View Code

　　注意：可以使用nodeType判断是文本还是标签，1:标签、3文本，

二、DOM的内容操作：值

（一）innerText：取文本内容或进行文本赋值，不包含标签

（二）innerHTML：取全部内容或者赋值，包含标签

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

    </style>

</head>
<body>
   <div>
       <p>关于DOM的内容操作：值</p>
       <input id="i1" type="text" />
       <div id="test">测试<strong>hahaha</strong></div>
       <select id="loca">
           <option value="1">上海</option>
           <option value="2">北京</option>
           <option value="3">合肥</option>
       </select>

   </div>


    <script language="JavaScript">
        var p = document.getElementById("test");
        //取值
        var pt = p.innerText;       //取标签内文本，不含标签，
        console.log(pt);                    //测试hahaha
        var pH = p.innerHTML;       //取标签内全部内容，含标签，
        console.log(pH);                    //测试<strong>hahaha</strong>
        //赋值
        p.innerText = "xixi";
        console.log(p.innerText);           //xixi

        p.innerHTML = "<hr><p>xixi</p><hr>";
        console.log(p.innerText);           //xixi
        console.log(p.innerHTML);           //<hr><p>xixi</p><hr>


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

View Code

（三）value：关于表单值的获取和赋值

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

    </style>

</head>
<body>
   <div>
       <p>关于DOM的内容操作：值</p>
       <input id="i1" type="text" value="默认"/>
       <div id="test">测试<strong>hahaha</strong></div>
       <select id="loca">
           <option value="1">上海</option>
           <option value="2">北京</option>
           <option value="3">合肥</option>
       </select>

   </div>


    <script language="JavaScript">
        var p = document.getElementById("loca");
        var pv = p.value;
        console.log(pv);         //取当前表单的值
        p.value = 2;             //为当前表单赋值

        var p = document.getElementById("i1");
        var pv = p.value;
        console.log(pv);         //取当前表单的值
        p.value = "更改";        //为当前表单赋值

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

View Code

三、DOM的内容操作：样式

（一）className 字符串形式返回指定标签的样式名称

（二）classList 列表形式返回指定标签的全部样式

（三）classList.remove（“ ”）删除指定标签的样式

（四）classList.add（“ ”）为指定标签添加样式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>text</title>
    <style>
        .hide{
            display:None;
        }
        .mo{
            position:fixed;
            top:0;
            bottom:0;
            left:0;
            right:0;
            background:rgba(0,0,0,.6);
            z-index:2;
        }
        .rg{
            position:fixed;
            width:400px;
            height:300px;
            top:50%;
            left:50%;
            margin-top:-150px;
            margin-left:-200px;
            z-index:3;
        }
    </style>

</head>
<body>
    <div>
        <table>
            <tr>
                <td>11</td>
                <td>11</td>
                <td>
                    <input type="button" value="click" onclick="show();">
                </td>
            </tr>
            <tr>
                <td>11</td>
                <td>11</td>
                <td>
                    <input type="button" value="click" onclick="show();">
                </td>
            </tr>
            <tr>
                <td>11</td>
                <td>11</td>
                <td>
                    <input type="button" value="click" onclick="show();">
                </td>
            </tr>
        </table>
   </div>
    <div id="model" class="mo hide"></div>
    <div id="content" class="rg hide">
        <p>用户名：<input type="text" /></p>
        <p>密码：<input type="password" /></p>
        <input type="button" value="确定">
        <input type="button" value="取消" onclick="cancle();">
    </div>



    <script language="JavaScript">
        function show(){
            document.getElementById("model").classList.remove("hide");
            document.getElementById("content").classList.remove("hide");
        };
        function cancle(){
            document.getElementById("model").classList.add("hide");
            document.getElementById("content").classList.add("hide");
        };

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

View Code

　 注意：this作为参数，可以进行传递

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>text</title>
    <style>
        ul{
            padding:0;
            margin:0;
        }
        .totle{
            position:fixed;
            top:0;
            bottom:0;
            width:150px;
            background:blue;
        }
        .menu{
            border:1px solid black;
        }
        .title{
            background:red;
            cursor:pointer;
        }
        .content{
            background:white;
        }
        .hide{
            display:none;
        }

    </style>

</head>
<body>
    <div class="totle">
        <div class="menu">
            <div class="title" onclick="show(this);">菜单一</div>
            <div class="content hide">
                <ul>
                    <li>内容一</li>
                    <li>内容一</li>
                    <li>内容一</li>
                </ul>
            </div>
        </div>
        <div class="menu">
            <div class="title" onclick="show(this);">菜单二</div>
            <div class="content hide">
                <ul>
                    <li>内容二</li>
                    <li>内容二</li>
                    <li>内容二</li>
                </ul>
            </div>
        </div>
            <div class="menu">
            <div class="title" onclick="show(this);">菜单三</div>
            <div class="content hide">
                <ul>
                    <li>内容三</li>
                    <li>内容三</li>
                    <li>内容三</li>
                </ul>
            </div>
        </div>
            <div class="menu">
            <div class="title" onclick="show(this);">菜单四</div>
            <div class="content hide">
                <ul>
                    <li>内容四</li>
                    <li>内容四</li>
                    <li>内容四</li>
                </ul>
            </div>
        </div>
    </div>

    <script language="JavaScript">
        function show(arg){
            //选中的菜单
            var current_node = arg;

            //显示选中菜单的内容：去掉内容标签样式中的hide
            current_node.nextElementSibling.classList.remove("hide");

            //隐藏其他菜单内容：其他菜单内容标签中的样式中添加hide
            var c_menu = current_node.parentElement;
            var all_menus = c_menu.parentElement.children;
            for (var i=0;i<all_menus.length;i++){
                if (all_menus[i] == c_menu){

                }else{
                    all_menus[i].lastElementChild.classList.add("hide");
                }
            };
        };

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

View Code

发表于 2017-08-14 15:56 笨笨是个名字阅读(124) 评论(0) 收藏举报

刷新页面返回顶部

JS——DOM

公告

导航