HTML DOM-->獲取屬性節點

本文轉載自查看原文 2020-04-17 21:59 1344 javascript

1.方法一：

　　獲取官方定義的屬性直接使用：

　　　　元素節點.屬性名

　　得到元素對應屬性的屬性值

　　舉例：獲取placeholder的屬性值

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>js_excise</title>
        <script src="./js/js_excise.js" type="text/javascript" charset="utf-8"></script>
    </head>
    <body style="height: 187.5rem;">
        <input id="in" type="text" name="Text" placeholder="please your name">
        <script type="text/javascript">
            var js = document.getElementById('in')
                console.log(js.placeholder)
        </script>
    </body>
</html>

　　輸出：

　　修改對應屬性的屬性值：

　　　　元素節點.屬性名=新的屬性值

　　舉例：將placeholder="please your name"改為‘please enter your name’

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>js_excise</title>
        <script src="./js/js_excise.js" type="text/javascript" charset="utf-8"></script>
    </head>
    <body style="height: 187.5rem;">
        <button onclick="func()">更新</button>
        <input id="in" type="text" name="Text" placeholder="please your name">
        <script type="text/javascript">
            var js = document.getElementById('in')
                console.log(js.placeholder)
            function func(){
                js.placeholder = 'please enter your name'
                console.log(js.placeholder)
            }
        </script>
    </body>
</html>

　　輸出：

2.方法二：

　　元素節點.getAttribute("屬性名")

　　得到元素對應屬性的屬性值

　　注意：該方法還可以獲取自定義屬性

　　舉例1：獲取placeholder屬性的值

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>js_excise</title>
        <script src="./js/js_excise.js" type="text/javascript" charset="utf-8"></script>
    </head>
    <body style="height: 187.5rem;">
        <button onclick="func()">更新</button>
        <input id="in" type="text" name="Text" placeholder="please your name">
        <script type="text/javascript">
            var js = document.getElementById('in')
            console.log(js.getAttribute('placeholder'))
        </script>
    </body>
</html>

　　輸出：

　　舉例2：獲取自定義屬性my的值

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>js_excise</title>
        <script src="./js/js_excise.js" type="text/javascript" charset="utf-8"></script>
    </head>
    <body style="height: 187.5rem;">
        <button onclick="func()">更新</button>
        <input id="in" type="text" name="Text" placeholder="please your name" my='abner'>
        <script type="text/javascript">
            var js = document.getElementById('in')
            console.log(js.getAttribute('my'))
        </script>
    </body>
</html>

　　輸出：

　　修改元素對應屬性的屬性值

　　　　元素節點.setAttribute("屬性名"，“新的屬性值”)

　　舉例：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>js_excise</title>
        <script src="./js/js_excise.js" type="text/javascript" charset="utf-8"></script>
    </head>
    <body style="height: 187.5rem;">
        <button onclick="func()">更新</button>
        <input id="in" type="text" name="Text" placeholder="please your name" my='abner'>
        <script type="text/javascript">
            var js = document.getElementById('in')
            console.log('my更改前：'+js.getAttribute('my'))
        function func(){
            js.setAttribute('my','hello world')
            console.log('my更改后：'+js.getAttribute('my'))
        }
        </script>
    </body>
</html>

　　輸出：

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 HTML DOM-->獲取標簽(元素)節點 HTML DOM-->獲取文本節點 Dom--屬性以及創建標簽 HTML DOM-->焦點事件[focus()/blur()] 獲取HTML DOM節點元素的方法的總結 HTML DOM-->鼠標事件單擊(click)與雙擊(dblclick) jsp獲取dom節點以及節點的文本值和參數屬性值 HTML DOM-->事件對象(阻止冒泡、阻止默認行為) HTML DOM-->鍵盤事件：keydown/keyup/keypress DOM遍歷節點以及屬性