前言

根據 W3C 的 HTML DOM 標準，HTML 文件中的所有內容都是節點：

• 整個文件是一個文件節點
• 每個 HTML 元素是元素節點
• HTML 元素內的文字是文字節點
• 每個 HTML 屬性是屬性節點
• 註釋是註釋節點

屬性節點

比如有一個p標籤元素節點

<p id="p2" class="text-center" >點我看看</p>

那麼它有2個屬性節點：id="p2"和class="text-center" 和一個文字節點點我看看

獲取元素的屬性

示例

 <div>
        <p id="p2" class="text-center" >屬性節點</p>
    </div>
    <script>
        p2 = document.getElementById("p2");
        console.log(p2.attributes);  // NamedNodeMap {0: id, 1: class, id: id, class: class, length: 2}
        console.log(p2.getAttributeNames());  // ['id', 'class']
        // 根據節點名稱，獲取屬性節點
        console.log(p2.getAttributeNode('id'));  // id="p2"
        console.log(p2.getAttributeNode('class'));  // class="text-center"
        // 根據節點名稱，獲取對應的值
        console.log(p2.getAttribute('id')) // p2
        console.log(p2.getAttribute('class')) // text-center
    </script>
 

獲取屬性節點的值

比如有一個p標籤元素節點

<p id="p2" class="text-center" >點我看看</p>

它有的屬性節點是：id="p2"和class="text-center"
屬性節點是鍵值對的，可以根據屬性名稱，獲取對應的值，比如根據id屬性，獲取到"p2", 根據class屬性，獲取到"text-center"

獲取元素的屬性

示例

    <div>
        <p id="p2" class="text-center" >獲取屬性節點</p>
    </div>
    <script>
        p2 = document.getElementById("p2");
        console.log(p2.tagName);  // P
        console.log(p2.id);  // p2
        console.log(p2.className);  // text-center
        console.log(p2.nodeName);  // P
    </script>

input標籤示例

    <div>
        <p id="p2" class="text-center" >獲取屬性節點</p>
        <label for="user">使用者名稱</label>
        <input id="user" type="text" class="form-control"  name="username" placeholder="請輸入" value="yo yo">
    </div>
    <script>
        p2 = document.getElementById("user");
        console.log(p2.nodeName);  // INPUT
        console.log(p2.tagName);  // INPUT
        console.log(p2.id);  // user
        console.log(p2.type);  // text
        console.log(p2.className);  // form-control
        console.log(p2.name);  // username
        console.log(p2.placeholder);  // 請輸入
        console.log(p2.value);  // yo yo
    </script>

或者可以用getAttribute() 獲取指定的屬性，傳一個屬性的名稱引數

    p2 = document.getElementById("user");
    console.log(p2.getAttribute('id'));  // user
    console.log(p2.getAttribute('type'));  // text
    console.log(p2.getAttribute('class')); // form-control
    console.log(p2.getAttribute('name'));  // username
    console.log(p2.getAttribute('placeholder')); // 請輸入
    console.log(p2.getAttribute('value')); // yo yo

修改元素屬性節點

修改元素屬性節點的值跟前面獲取屬性方法一樣，給屬性重新複製即可

 <div>
        <p id="p2" class="text-center" >修改屬性節點</p>
        <label for="user">使用者名稱</label>
        <input id="user" type="text" class="form-control"  name="username" placeholder="請輸入" value="yo yo">
    </div>
    <script>
        p2 = document.getElementById("user");
        // 修改屬性
        p2.type = 'password';
        p2.className = 'test';
        p2.name = 'password';
        p2.value = 'hello';
        console.log(p2.type);  // password
        console.log(p2.className);  // test
        console.log(p2.name);  // password
        console.log(p2.value);  // hello
    </script>

或者可以用setAttribute() 設定指定的屬性名稱

        p2 = document.getElementById("user");
        // 修改屬性
        p2.setAttribute('type', 'password');
        p2.setAttribute('class', 'test');
        p2.setAttribute('name', 'password');
        p2.setAttribute('value', 'hello');
        console.log(p2.type);  // password
        console.log(p2.className);  // test
        console.log(p2.name);  // password
        console.log(p2.value);  // hello

總結

重點掌握2個方法

• getAttribute() 獲取指定屬性名稱的值
• setAttribute() 設定指定的屬性名稱對應的值

也可以通過element.屬性名稱 獲取對應的值