在javascript中，操作HTML DOM时，需要经常用到getElementById 与 getElementsByTagName两个函数，下面记录一下这两个函数的具体区别所在：
getElementById(idName)函数：
根据提供的idName获取页面中的对象。得到的结果是单一的对象。比如：
document.getElementById('left') ----- 获取ID为left的对象【记住：每个id在页面中都是唯一的】
getElementsByTagName(tagName)函数：
根据提供的tagName获取页面中的指定标记的对象，得到的结果是一个数组。比如以下代码：
var p = document.getElementsByTagName("p"); //获取所有的<p>...</p>
var first_p = p[0]; //这是第一个段落
first_p.parentNode.removeChild[first_p]; // 删除这个段落
最后附上一个实例：
<html>
<head>
<title>HTML DOM实例演示</title>
<script type="text/javascript">
function delete_firstP()
{
var p = document.getElementsByTagName("p")[0];
p.parentNode.removeChild(p);
}
function delete_h1()
{
var h1 = document.getElementById("dv").getElementsByTagName("h1")[0];
h1.parentNode.removeChild(h1);
}
</script>
</head>
<body>
<p>hello,world!</p>
<div id="dv">
<h1>hello,world!</h1>
<h2>hello,world!</h2>
<h3>hello,world!</h3>
</div>
<div>
<input type="button" value="删除h1" onclick="delete_h1()" />
<input type="button" value="删除第一段" onclick="delete_firstP();" />
</div>
</body>
</html>
分享到：
相关推荐
这些方法各有其特性和适用场景，理解它们的区别对于编写高效且兼容性的JavaScript代码至关重要。 1. `document.all`： 这个属性是旧版Internet Explorer（IE4-IE8）特有的，它返回一个包含文档中所有元素的集合。`...
本文将深入探讨`document.all`与`getElementById`、`getElementsByName`、`getElementsByTagName`这四个方法的区别和用法。 1. `document.all` `document.all` 是一个数组集合，它包含了HTML文档中所有的元素，...
常用的方法有getElementById、getElementsByClassName、getElementsByTagName等，以及创建、删除和修改元素的API。 五、事件处理 JavaScript通过事件驱动模型实现用户交互。常见的事件有点击（click）、鼠标移动...
DOM操作：`getElementById`与`getElementsByTagName` 在提供的代码中，可以看到两个自定义函数`$get`和`$tag`，它们分别用于封装`document.getElementById`和`document.getElementsByTagName`方法。这两个方法是DOM...
- 学习选取元素（getElementById、getElementsByTagName等）、创建和删除元素，以及属性的操作。 3. **事件处理** - 了解JavaScript如何监听和处理用户行为，如点击、鼠标移动、键盘输入等事件。 - 使用...
DOM提供了一系列接口，如getElementById、getElementsByTagName等，用于查找、创建和修改HTML元素。 四、事件处理 JavaScript通过事件监听来响应用户交互，如点击、鼠标移动等。事件处理有两种方式：事件处理程序...
4. **DOM操作**：通过JavaScript操作HTML元素，包括选择元素（getElementById、getElementsByTagname、querySelector等）、修改元素内容和样式、添加或删除元素。 5. **事件处理**：事件监听与触发、事件对象、事件...
学习DOM编程包括理解元素选择（getElementById、getElementsByTagname等）、遍历节点、属性操作、事件处理以及CSS操作等，这些都是实现网页动态效果的关键。 4. **表单验证技术**：在Web开发中，表单验证是确保用户...
11. DOM操作：DOM（Document Object Model）是HTML和XML文档的编程接口，JavaScript通过DOM可以查找、修改、添加和删除元素，例如getElementById、getElementsByTagName、appendChild等。 **六、异步编程** 12. ...
例如，getElementById、getElementsByTagName、appendChild等方法是DOM操作的常用API。 五、异步JavaScript和XML（AJAX） AJAX允许在不刷新整个页面的情况下与服务器交换数据并更新部分网页内容。它结合了...
加载XML文件后，会得到一个`XMLDocument`对象，可以使用`getElementsByTagName`, `getElementById`, `getElementsByClassName`等方法获取XML节点。 3. **查询XML数据** - `getElementsByTagName`: 通过标签名查找...
1. JavaScript 与 WMLScript、Java、Java、Java：JavaScript 是一种客户端脚本语言，通常用于浏览器中的交互，而WMLScript是为无线标记语言（WML）设计的，与JavaScript类似但不相同。Java是一种完整的编程语言，...
- 使用JavaScript操作DOM元素，包括选择元素（getElementById、getElementsByTagname等）、添加删除元素 - 属性操作，修改元素的样式、内容 - 事件处理，如点击（click）、鼠标移动（mousemove）、表单提交（submit...
常见的DOM方法有getElementById、getElementsByTagName、querySelector等。 4. **事件处理**：JavaScript通过监听和响应用户或浏览器的事件，如点击、滚动、提交等，来实现交互性。例如，addEventListener用于添加...
2. **遍历DOM**：学习如何遍历DOM树，查找特定的元素，如使用`getElementById`、`getElementsByTagName`、`getElementsByClassName`等方法。 3. **创建和删除元素**：掌握动态创建新元素、插入到DOM树中，以及删除...
实例中会包含元素的选择（getElementById、getElementsByTagname等）、属性操作、文本内容修改、插入和删除节点等操作。 5. **事件处理**：JavaScript能够响应用户的行为，例如点击、滚动、提交表单等，这些都涉及...
熟悉getElementById、getElementsByTagname、querySelectorAll等方法，以及createElement、appendChild、innerHTML等操作是基础。 最后，异步编程是JavaScript的重要部分，包括回调函数、Promise、async/await等。...
熟悉DOM节点的概念，如元素节点、属性节点和文本节点，以及使用方法如getElementById、getElementsByTagName等，能帮助开发者实现对网页内容的动态控制。 三、事件处理 JavaScript的事件处理机制使得网页具有响应...
6. **DOM遍历与选择**：学会使用`getElementById`、`getElementsByClassName`、`getElementsByTagName`等方法，以及更高效的`querySelector`和`querySelectorAll`选择器，是高效操作DOM的关键。 7. **DOM操作**：...