HTML - DOM 元素 tagName 屬性

**tagName** 屬性以大寫形式提供定義網頁上元素的 HTML 標籤的名稱。

語法

element.tagName;

返回值

tagName 屬性返回一個字串值，該值包含元素的 HTML 標籤名稱，並以大寫字母表示。

HTML DOM 元素“tagName”屬性示例

以下是一些示例，展示瞭如何使用“tagName”屬性來識別網頁中元素的 HTML 標籤。

獲取 Div 元素的標籤名稱

此示例在單擊按鈕時使用 tagName 屬性訪問並顯示**<div>**元素的標籤名稱。

<!DOCTYPE html>
<html lang="en">
<head> 
  <title>TagName Property Example</title>
</head>

<body>
  <h1>HTML - DOM Element</h1>
  <h2>tagName Property</h2>
  <div id="myDiv"> 
    Click the button to get My tag Name!!
  </div>
  
  <button onclick="getTagName()">
    Get Tag Name
  </button> 
  
  <p id="t_Dis"></p>

  <script> 
    function getTagName() {
        var divEle=document.getElementById('myDiv');
        
        // Get the tag name and display it
        
        var tagName = divEle.tagName;
        document.getElementById('t_Dis').textContent
        = 'Tag Name of myDiv: ' + tagName;  
        }
  </script>
</body>

</html>

動態處理不同的標籤名稱

此示例使用一個函式來訪問並動態顯示在段落元素（**<p>**）中單擊的按鈕的標籤名稱。

<!DOCTYPE html>
<html lang="en">
<head> 
  <title>TagName Property Example</title>
</head>

<body>
  <h1>HTML - DOM Element</h1>
  <h2>tagName Property</h2>
  <h4>Click a button to get its tag name:</h4>
  
  <button onclick="getTagName(this)">
  	Button 1
  </button>
  <button onclick="getTagName(this)">
  	Button 2
  </button>
  <button onclick="getTagName(this)">
  	Button 3
  </button>

  <p id="t_Dis"></p>

  <script>
    // Function to get and display the tag name
    function getTagName(element) {
      var tagName = element.tagName;
      var buttonText = element.textContent;
      
      document.getElementById('t_Dis').textContent
      = 'Tag Name of'+buttonText+':'+tagName; 
    }
  </script>
</body>

</html>

支援的瀏覽器

屬性
tagName	是	是	是	是	是

html_dom_element_reference.htm

列印頁面