DOM元素选取教程：ID、标签名、name和class方法详解

本文档主要介绍了在Delphi编程中选取DOM (Document Object Model) 元素的几种常见方法。DOM是用于HTML和XML文档的编程接口，允许开发者动态操作页面内容。以下是介绍的选取DOM元素的四个核心方法： 1. 通过ID选取元素（getElementById()） - 语法: `document.getElementById(id)` - 说明: 此方法接收一个字符串参数，即元素的ID。它会查找文档中具有指定ID的唯一元素，并返回该元素的引用。 - 代码示例: ```html <div id="div1">我是第一个div</div> ... <script> var div1 = document.getElementById("div1"); console.log(div1); </script> ``` - 输出结果: 会打印出具有指定ID（如"div1"）的DOM元素。 2. 通过标签名选取元素（getElementsByTagName()） - 语法: `document.getElementsByTagName(tagName)` - 说明: 此方法接收一个字符串参数，返回文档中所有匹配指定标签名的元素列表，返回的是一个NodeList对象，类似类数组。 - 代码示例: ```html <ul> <li>1</li> <li>2</li> <li>3</li> </ul> ... <script> var lis = document.getElementsByTagName("li"); console.log(lis); </script> ``` - 输出结果: 打印出所有`<li>`标签的列表。 3. 通过name属性选取元素（getElementsByName()） - 语法: `document.getElementsByName(name)` - 说明: 此方法接收一个字符串参数，返回具有指定name属性值的所有元素集合，同样返回的是一个NodeList对象。 - 注意: 此方法仅适用于HTML表单中的`<input>`、`<select>`等元素，对于其他标签可能无效。 4. 通过CSS类选取元素（getElementsByClassName()） - 语法: `document.getElementsByClassName(className)` - 说明: 此方法接收一个字符串参数，返回文档中所有具有指定CSS类名的元素集合。 - 示例未提供，但应用方式与`getElementsByTagName()`类似。 通过理解这些方法，Delphi开发者可以灵活地根据需求选择适合的DOM元素进行操作，从而实现动态网页内容的管理和修改。在实际开发中，结合事件监听、JavaScript或其他脚本语言，可以构建更加复杂的交互式用户界面。