JavaScript操作DOM：getElementsByName, getElementsByTagName与getAttri...

"这篇文档主要讲解了JavaScript中如何利用DOM（Document Object Model）来操控HTML元素，包括通过不同方法选择元素、获取元素属性以及修改元素内容。" 在JavaScript中，DOM是HTML和XML文档的一种结构化表示，它允许我们通过编程方式访问和操作页面上的任何元素。以下将详细阐述文中提到的三个关键知识点： 1. **通过`getElementsByName()`获取具有相同name属性的元素** `getElementsByName()`方法用于查找页面上所有具有指定name属性的元素。在示例中，有三个`<p>`元素的`pname`属性值为"pn"。调用此方法返回一个NodeList对象，包含了所有匹配的元素。`length`属性表示这个列表中的元素数量，因此`alert(count.length)`会显示3。然后通过索引`count[2]`选取第三个元素并更改其`innerHTML`属性，将"hello"替换为"world"。 2. **通过`getElementsByTagName()`获取特定类型的元素** `getElementsByTagName()`方法则用于获取文档中所有指定类型的元素。在这个例子中，同样有三个`<p>`元素，调用此方法会返回包含这些元素的NodeList。与之前一样，`length`属性返回元素的数量，而`innerHTML`的修改使得第三行文本由"hello"变为"world"。 3. **通过`getAttribute()`获取元素的属性值** `getAttribute()`方法用于获取HTML元素的特定属性值。在提供的例子中，`<a>`标签有一个`id`属性和一个`title`属性。通过`getElementById()`找到这个元素后，使用`getAttribute("id")`可以获取到`id`属性的值，即"aid"。类似地，`getAttribute("title")`会返回`title`属性的值，即"得到a的标签属性"。 除了上述方法，DOM还提供了其他多种操作HTML元素的方式，如： - **`getElementById()`**：根据元素的唯一ID获取元素。 - **`querySelector()`和`querySelectorAll()`**：前者返回匹配CSS选择器的第一个元素，后者返回匹配选择器的所有元素的NodeList。 - **`createElement()`和`appendChild()`**：动态创建新元素并将其添加到文档中。 - **`removeChild()`**：删除指定的子元素。 - **`innerHTML`和`textContent`**：分别用于设置或获取元素的HTML内容和纯文本内容。 - **`style`属性**：用于直接操作元素的内联样式。 掌握这些DOM操作技巧对于JavaScript开发者来说至关重要，因为它们允许程序与用户界面进行交互，实现动态更新、事件响应等功能。理解并熟练运用DOM，能让你更好地控制网页的动态行为，提升用户体验。