在Web开发中，获取HTML元素是常用的操作之一。使用JavaScript，我们可以非常灵活地获取页面上各种元素，并对它们进行操作。本文将详细讲解如何使用JavaScript来获取HTML元素的标记名。
我们来看一下通过元素的ID获取HTML元素的方法。DOM提供了一个名为getElementById的方法，它可以返回一个与指定id属性相对应的节点对象。需要注意的是，该方法区分大小写，且只能通过document对象来调用。例如，document.getElementById('demo')会返回ID为'demo'的元素。该方法兼容主流浏览器，甚至包括老旧的IE6+浏览器。
接下来，我们来了解通过标签名字获取元素的方法。getElementsByTagName方法返回一个对象数组（HTMLCollection集合），每个对象对应文档里有着给定标签名的一个元素。此方法也可以被普通的元素调用，不只限于document对象。例如，document.getElementsByTagName('li')将获取页面中所有的<li>元素。使用时需注意，由于返回的是HTMLCollection，它并不是真正的数组，可能需要进行遍历操作。
此外，getElementsByClassName方法是通过指定class名来获取元素的一种方式。与getElementsByTagName类似，它返回一个包含所有具有指定class属性值的元素的HTMLCollection。较老的浏览器（如IE6）不支持此方法，但可以通过特定的hack方式来弥补这个缺陷。使用方法如下：document.getElementsByClassName('demo')会返回所有class为'demo'的元素。
为了进一步扩展获取元素的方法，我们还可以通过选择器来获取元素。虽然DOM标准本身并未提供这样的方法，但我们可以参考getElementsByClassName方法的实现原理，自己实现一套选择器。例如，通过类名、标签名以及其他CSS选择器（如ID、属性选择器等）获取元素。这种实现方式虽然需要编写额外的代码，但提供了更加灵活的元素获取能力。
为了说明如何使用这些方法，文章中提供了两个脚本示例。第一个示例通过document.getElementById获取元素，并使用element.tagName获取该元素的标记名，然后通过alert弹窗展示出来。第二个示例展示了如何在jQuery中获取元素标记名，使用的是$("#content-header").get(0).tagName这样的语法。
在实际的开发中，我们可以根据需要选择合适的方法来获取页面元素。getElementById适合于获取具有唯一标识符的元素，getElementsByTagName适合于按标签名获取一组元素，而getElementsByClassName适合于按class获取一组元素。而自定义选择器则为获取元素提供了更大的灵活性和强大的功能，尽管这需要额外的实现代码。
总结来说，通过这些方法，我们不仅可以获取页面上的元素，还可以根据不同的需求和场景，选择最恰当的方式来进行元素的操作，从而提升开发效率和代码的可维护性。如果想进一步深入了解如何扩展JavaScript的元素获取能力，建议研究一下CSS选择器的语法和相关的DOM操作技术。
