Thuộc tính nodeName trong HTML DOM

Thuộc tính nodeName trong HTML DOM trả về một chuỗi tương ứng với tên của nút (node).

Cú pháp

Node.nodeName

Giá trị trả về

• Tên thẻ in hoa cho các nút phần tử (element nodes)
• Tên thuộc tính cho các nút thuộc tính (attribute nodes)
• #comment cho các nút chú thích (comment nodes)
• #document cho nút tài liệu (document node)
• #text cho các nút văn bản (text nodes)

Lưu ý: Các khoảng trắng được coi là nút văn bản.

Ví dụ

Dưới đây là ví dụ minh họa thuộc tính nodeName:

<!DOCTYPE html>
<html>
<head>
  <title>HTML DOM nodeName</title>
  <style>
    form { width: 70%; margin: 0 auto; text-align: center; }
    * { padding: 2px; margin: 5px; }
    input[type="button"] { border-radius: 10px; }
  </style>
</head>
<body>
  <form>
    <fieldset>
      <legend>HTML-DOM-nodeName</legend>
      <label for="example">Trang web ví dụ: </label>
      <input id="urlSelect" type="url" name="urlAddress" value="https://www.example.com" disabled>
      <input type="button" onclick="getNodeNames()" value="Lấy tất cả tên">
      <div id="divDisplay"></div>
    </fieldset>
  </form>
  <script>
    var urlSelect = document.getElementById("urlSelect");
    var commentNode = document.createComment("My Example URL");
    urlSelect.appendChild(commentNode);
    var divDisplay = document.getElementById("divDisplay");
    function getNodeNames() {
      divDisplay.textContent = 'Body: ' + document.body.nodeName;
      divDisplay.textContent += ' & input: ' + urlSelect.nodeName;
      divDisplay.textContent += ' & comment: ' + commentNode.nodeName;
    }
  </script>
</body>
</html>

Kết quả

Trước khi nhấn nút 'Lấy tất cả tên':

Sau khi nhấn nút 'Lấy tất cả tên':