亚洲最大看欧美片,亚洲图揄拍自拍另类图片,欧美精品v国产精品v呦,日本在线精品视频免费

  • 站長資訊網(wǎng)
    最全最豐富的資訊網(wǎng)站

    JavaScript中獲取元素的方法有哪些

    JavaScript中獲取元素的方法有:1、根據(jù)id獲取元素;2、根據(jù)標(biāo)簽名字獲取元素;3、根據(jù)name屬性的值獲取元素;4、根據(jù)類樣式的名字獲取元素;5、根據(jù)選擇器獲取元素。

    JavaScript中獲取元素的方法有哪些

    本教程操作環(huán)境:windows7系統(tǒng)、javascript1.8.5版、Dell G3電腦。

    1.根據(jù)id獲取元素

    document.getElementById("id屬性的值");

    2.根據(jù)標(biāo)簽名字獲取元素

    document.getElementsByTagName("標(biāo)簽的名字");

    3.根據(jù)name屬性的值獲取元素

    document.getElementsByName("name屬性的值");

    4.根據(jù)類樣式的名字獲取元素

    document.getElementsByClassName("類樣式的名字");

    5.根據(jù)選擇器獲取元素

    1.document.querySelector("選擇器");

    2.document.querySelectorAll("選擇器");

    1.根據(jù)id獲取元素

    document.getElementById("id屬性的值");

    返回值是一個(gè)元素對象

    案例:點(diǎn)擊按鈕彈框

        <body>     <input type="button" value="彈框" id="btn">         <script>         //根據(jù)id屬性的值從文檔中獲取這個(gè)元素                 var btnobj = document.getElementById("btn");       //為當(dāng)前的這個(gè)按鈕元素(對象),注冊點(diǎn)擊事件,添加事件處理函數(shù)(匿名函數(shù))                 btnobj.onclick = function () {            //響應(yīng)做的事情                     alert("碼仙");                 };     </script>     </body>

    2.根據(jù)標(biāo)簽名字獲取元素

    document.getElementsByTagName("標(biāo)簽的名字");

    返回值是一個(gè)偽數(shù)組

    案例:點(diǎn)擊按鈕改變多個(gè)p標(biāo)簽的文字內(nèi)容

        <body>     <input type="button" value="改變" id="btn">     <p id="dv">         <p>哈哈,我又變帥了</p>         <p>哈哈,我又變帥了</p>         <p>哈哈,我又變帥了</p>         <p>哈哈,我又變帥了</p>         <p>哈哈,我又變帥了</p>     </p>     <script>         //根據(jù)id獲取按鈕,注冊點(diǎn)擊事件,添加事件處理函數(shù)         document.getElementById("btn").onclick = function () {             //根據(jù)標(biāo)簽名字獲取標(biāo)簽             var pObjs = document.getElementsByTagName("p");             //var pObjs=document.getElementById("dv1").getElementsByTagName("p");             //循環(huán)遍歷這個(gè)數(shù)組             for (var i = 0; i < pObjs.length; i++) {                 //每個(gè)p標(biāo)簽,設(shè)置文字                 pObjs[i].innerText = "我們都是p";             }         };     </script>     </body>

    3.根據(jù)name屬性的值獲取元素

    document.getElementsByName("name屬性的值");

    返回值是一個(gè)偽數(shù)組

    案例:案例:點(diǎn)擊按鈕,改變所有name屬性值為name1的文本框中的value屬性值

    <body>     <input type="button" value="顯示效果" id="btn"/><br/>     <input type="text" value="您好" name="name1"/><br/>     <input type="text" value="您好" name="name2"/><br/>     <input type="text" value="您好" name="name1"/><br/>     <input type="text" value="您好" name="name3"/><br/>     <input type="text" value="您好" name="name1"/><br/>     <input type="text" value="您好" name="name1"/><br/>     <script>         //點(diǎn)擊按鈕,改變所有name屬性值為name1的文本框中的value屬性值         document.getElementById("btn").onclick = function () {             //通過name屬性值獲取元素-------表單的標(biāo)簽             var inputs = document.getElementsByName("name1");             for (var i = 0; i < inputs.length; i++) {                 inputs[i].value = "我很好";             }         };     </script>     </body>

    4.根據(jù)類樣式的名字獲取元素

    document.getElementsByClassName("類樣式的名字");

    返回值是一個(gè)偽數(shù)組

    案例:修改所有文本框的值

    <body>     <input type="button" value="修改文本框的值" id="btn"/><br/>     <input type="text" value="" class="text"/><br/>     <input type="text" value="" class="text"/><br/>     <input type="text" value="" class="text"/>     <script>         //根據(jù)id獲取按鈕,為按鈕注冊點(diǎn)擊事件,添加事件處理函數(shù)         document.getElementById("btn").onclick = function () {             //獲取所有的文本框             //根據(jù)類樣式的名字獲取元素             var inputs = document.getElementsByClassName("text");             for (var i = 0; i < inputs.length; i++) {                 inputs[i].value = "碼仙";             }         };     </script>     </body>

    5.根據(jù)選擇器獲取元素
    1.document.querySelector("選擇器");

    返回值是一個(gè)元素對象

    案例:點(diǎn)擊按鈕彈框

    <body>     <input type="button" value="顯示效果1" id="btn"/>     <input type="button" value="顯示效果2" class="btn"/>     <script>         //點(diǎn)擊按鈕彈出對話框         //根據(jù)選擇器的方式獲取元素         var btnObj1 = document.querySelector("#btn");         btnObj1.onclick = function () {             alert("我變帥了");         };         var btnObj2 = document.querySelector(".btn");         btnObj2.onclick = function () {             alert("哈哈,我又變帥了");         };     </script>     </body>

    2.document.querySelectorAll("選擇器");

    返回值是一個(gè)偽數(shù)組

    案例:修改所有文本框的值

    <body>     <input type="button" value="修改文本框的值" id="btn"/><br/>     <input type="text" value="" class="text"/><br/>     <input type="text" value="" class="text"/><br/>     <input type="text" value="" class="text"/>     <script>         document.getElementById("btn").onclick = function () {             //根據(jù)選擇器的方式獲取元素             var inputs = document.querySelectorAll(".text");             for (var i = 0; i < inputs.length; i++) {                 inputs[i].value = "碼仙";             }         };     </script>     </body>

    【推薦學(xué)習(xí):javascript高級教程】

    贊(0)
    分享到: 更多 (0)
    網(wǎng)站地圖   滬ICP備18035694號-2    滬公網(wǎng)安備31011702889846號