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

打印页面