快捷導(dǎo)航

JS document對(duì)象簡(jiǎn)單用法完整示例

更新時(shí)間：2020年01月14日 10:23:47 作者：qq_42412646

這篇文章主要介紹了JS document對(duì)象簡(jiǎn)單用法,結(jié)合完整實(shí)例形式詳細(xì)分析了JS document對(duì)象獲取、輸出、節(jié)點(diǎn)調(diào)用等相關(guān)操作技巧,需要的朋友可以參考下

本文實(shí)例講述了JS document對(duì)象簡(jiǎn)單用法。分享給大家供大家參考，具體如下：

<html>
    <head>
        <title>js-document對(duì)象學(xué)習(xí)</title>
        <meta charset="UTF-8"/>
        <script type="text/javascript">
//            直接獲取對(duì)象
            function testGetElementById(){    //通過(guò)id獲取對(duì)象
//                var gby=window.document.getElementById(); //window可以省去不寫(xiě)
                var gby=document.getElementById("sid");
                alert(gby);    //輸出的返回值是標(biāo)簽的類型[object HTMLInputElement]
            }
            function testGetElementsByName(){    //通過(guò)name獲取對(duì)象
                var gbn=document.getElementsByName("umane");
                alert(gbn);    //輸出的返回值類型是[object NodeList]一個(gè)對(duì)象類型的數(shù)組
                alert(gbn.length);  //Nodelist的元素是節(jié)點(diǎn)元素，長(zhǎng)度是節(jié)點(diǎn)的個(gè)數(shù)。每一個(gè)容器或標(biāo)簽算是一個(gè)節(jié)點(diǎn)。
            }
            function testGetElementsByTagName(){   //通過(guò)TagName(標(biāo)簽)獲取對(duì)象
                var gbt=document.getElementsByTagName("input");
                alert(gbt);    //輸出返回值類型是[object HTMLCollection]是一個(gè)對(duì)象元素的集合
                alert(gbt.length);  //其集合的數(shù)目是所有input個(gè)數(shù)
            }
            function testGetElementsByClassName(){   //通過(guò)class獲取對(duì)象
                var gbc=document.getElementsByClassName("clname");
                alert(gbc);    //輸出返回值類型是[object HTMLCollection]是一個(gè)對(duì)象元素的集合
                alert(gbc.length);  //集合元素的長(zhǎng)度是含有傳入類屬性的元素個(gè)數(shù)。
            }
//            間接獲取對(duì)象
            function testParent(){   //利用父節(jié)點(diǎn)調(diào)用其節(jié)點(diǎn)對(duì)象
                var showdiv=document.getElementById("showdiv");
                var tchild=showdiv.childNodes;
                alert(tchild);    //輸出返回值類型是[object NodeList]的一個(gè)list數(shù)組
                alert(tchild.length);  //返回子節(jié)點(diǎn)的長(zhǎng)度 13，是由于在div中和text有換行符算一個(gè)子節(jié)點(diǎn)
            }
            function testChild(){   //利用子節(jié)點(diǎn)調(diào)用其父節(jié)點(diǎn)
                var showdiv=document.getElementById("child");
                var tparent=showdiv.parentNode;
                alert(tparent);    //輸出返回值類型是[object HTMLDivElement](其父節(jié)點(diǎn)的類型)
            }
            function testBorther(){   //利用子節(jié)點(diǎn)調(diào)用其父節(jié)點(diǎn)
                var showdiv=document.getElementById("target");
                var topBorther=showdiv.previousSibling;   //輸出參考對(duì)象上面的元素
                var lowBorther=showdiv.nextSibling     //輸出參考元素的下面的元素
                alert(topBorther+":::"+lowBorther);    //輸出返回值類型是[object HTMLDivElement](其父節(jié)點(diǎn)的類型)
            }
        </script>
        <style type="text/css">
            .clname{}
            #showdiv{
                border: solid 2px cyan;
                width: 300px;
                height: 400px;
            }
            input[type=text]{
                margin-left: 3px;
            }
        </style>
    </head>
    <body>
        <h3>js-document對(duì)象學(xué)習(xí)</h3>
        <h4>直接調(diào)用</h2>
        <input type="button" name="" id="sid" value="測(cè)試GetElementById" onclick="testGetElementById()" />
        <input type="button" name="umane" id="" value="測(cè)試GetElementByName" onclick="testGetElementsByName()" />
        <input type="button" name="" id="" value="測(cè)試GetElementsByTagNames" class="clname" onclick="testGetElementsByTagName()" />
        <input type="button" name="" id="" value="測(cè)試GetElementsByClassName" class="clname" onclick="testGetElementsByClassName()" />
        <hr /><br />
        <h4>間接調(diào)用</h2>
        <input type="button" name="" id="" value="測(cè)試Parent" onclick="testParent()" />
        <input type="button" name="" id="" value="測(cè)試 Child" onclick="testChild()" />
        <input type="button" name="" id="" value="測(cè)試Borther" onclick="testBorther()" />
        <div id="showdiv">
            <input type="text" name="" id="parent" value="" />
            <input type="text" name="" id="child" value="" />
            <input type="text" name="" id="target" value="" />
            <input type="text" name="" id="" value="" />
            <input type="text" name="" id="" value="" />
            <input type="text" name="" id="" value="" />
        </div>
    </body>
</html>

運(yùn)行結(jié)果：