根据tagName统计页面元素的个数

最新推荐文章于 2022-05-15 22:56:26 发布

亦木223

最新推荐文章于 2022-05-15 22:56:26 发布

阅读量555

点赞数

分类专栏：前端文章标签： list xhtml function html

本文链接：https://blog.youkuaiyun.com/Aries223/article/details/6614482

版权

前端专栏收录该内容

1 篇文章

订阅专栏

本文介绍了一个简单的JavaScript示例，展示了如何使用DOM API获取HTML文档中的列表项和段落元素的数量，并通过弹窗显示这些信息。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

function findElements()
{
	var listElements = document.getElementsByTagName('li');
	var paragrahps = document.getElementsByTagName('li');
	var msg = 'This document contains ' + listElements.length 
 
 
  
  
   
   
    
    + 'list items\n' + paragrahps.length + ' paragrahps.';
	alert(msg);
	
}

    
    

    
     
    
    window.onload = findElements;

    
    

    
    

    
    
      
      
       
       
        
         
       
       
      
      

    
    index.html

    
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>Dom Example</title>
<script src = "findElements.js" type="text/javascript"></script>
</head>
<body>
<h1>Heading</h1>
<p>Paragraph</p>
<h2>Subheading</h2>
<ul id = "eventsList">
<li>List1</li>
<li>List2</li>
<li><a href="http://www.google.com.hk">Linked List Item</a></li>
</ul>
<p>Paragraph</p>
<p>Paragrahp</p>
</body>
</html>

    
    



 

    
    

//页面显示效果如下

    
    Heading

    
    Paragraph

    
    Subheading

    
    List1
List2
Linked List Item

    
    Paragraph

    
    Paragrahp