在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技术和css编写日历，无需引入任何文件，可移植能力，使用方便,能够选择日期和时间（精确到秒...应用到document对象中的getElementById和getElementsByTagName方法、Date对象中的获取时间。
var inputs = document.getElementsByTagName("input"); for( var i = 0 ; inputs.length ; inputs++ ) { if(inputs[i].type == "text" ) { inputs[i].value = ""; } } 28.JS中用什么方法去读取DIV标记的...
javascript函数的解释，解释了具体函数的功能，一、函数JavaScript函数集合 1.document.write(""); 输出语句 2.JS中的注释为// 3.传统的HTML文档顺序是:document->html->(head,body) 4.一个浏览器窗口中的DOM顺序是:...
2. JavaScript语句与注释 5 (1) JavaScript语句结束符 5 (2) JavaScript代码块 5 (3) JavaScript注释 5 (4) JavaScript变量 5 变量命名规则 5 申明或创建变量 5 重新申明变量 5 3. JavaScript运算符 5 (1) ...
本文实例讲述了javascript清空table表格的方法。分享给大家供大家参考。具体如下： 1. 通常方法 循环table的rows，然后一个一个删除。 这个方法是通常的方法，可行，但是效率不好。 2. 另一个方法 var artTable = ...
JavaScript权威指南 犀牛书 Chapter 1. Introduction to JavaScript Section 1.1. JavaScript Myths Section 1.2. Versions of JavaScript Section 1.3. Client-Side JavaScript Section 1.4. JavaScript ...
var a = document.getElementById("all").getElementsByTagName("li"); var zz =new Array(a.length) for(var i=0;i ;i++) { zz[i]=a[i].innerHTML } //div的字符串数组付给zz var pageno=1; //当前页 var ...
JavaScript基本语法 document方法： getElementById(id) Node 返回指定结点的引用 getElementsByTagName(name) NodeList 返回文档中所有匹配的元素的集合 createElement(name) Node Node createTextNode(text) ...
我们在写js代码的时候，一般都会添加[removed]事件，主要是为了在DOM加载完后可以使用getElementById，getElementsByTagName等方法选取DOM元素进行操作，但是window.load会等到加载完DOM、脚本、CSS，最后加载完图片...
3. 使用定义函数与Dote()对象可以制作时钟特效 4. 使用history和location对象的相关属性和方法可以轻松的实现游览器中“后退”、“前进”和“刷新”按钮的功能 5. Document对象的getElementById()方法用于访问唯一的...
简要参考JavaScript JavaScript编程语言的简要参考。 在控制台上打印日志 console.log("This is a log message"); 通过他们的ID获取元素 ...list = document.getElementsByTagName("ul")[0]; NOTE: Retr
// var table = document.getElementById(tb_table);//获取第一个表格 // var array = table.getElementsByTagName(tr);//所有tr // for(var i = 1; i < array.length; i++) { // var id = array[i].children; //...
JavaScript操作DOM对象 0 核心 浏览器网页就是一个Dom树形结构！ 获取Dom节点：得到Dom节点 更新：更新Dom节点 添加：添加一个新的节点 删除：删除一个Dom节点 要操作一个Dom节点，就必须要先获得这个Dom节点。 1 ...
.getElementById(“id”)id选择器; .getElementsByName(“name”)name选择器; .getElementsByTagName(“tagname”)tag标签名选择器； .getElementsByClassName(“.classname”).class名选择器 示例代码： <!...
该游戏介绍了如何使用预定义JavaScript函数访问HTML网页中的DOM三个元素，并说明了它们之间的区别： getElementById（）， GetElementsByTagName（）， getElementsByClassName（）， getElementsByName（）， ...
JavaScript中取得元素的方法有三种：分别是： 1、getElementById() 方法：通过id取得HTML元素。 2、getElementsByName()方法：通过name取得元素，是一个数组。 3、getElementsByTagName()方法：通过HTML标签取得元素...
5.3.2 getElementById、getElementsByTagName和getElements-ByClassName 5.3.3 可复用性 5.3.4 避免产生副作用 5.3.5 通过传参实现定制 5.3.6 控制this关键字的指向 5.3.7 预留回调接口 5.3.8 编程中的DRY...
document.getElementsByName 3 document.getElementsByTagName 4 document.all 下面我主要谈谈以上几个方法的具体用法： 一．首先我来谈谈document.getElementById的用法。 Var obj=document.getElementById
css及html方面的技巧总结,点此前往: 前端开发中一些常用技巧总结, 你还可以前往兰芝博客, 查看由淘宝UED整理的前端tips: http://www.12sui.cn/category/css/. 1. document.getElementById的简写: //...
这里使用原生的javascript，用面向对象的方式创建一个容易维护使用方便的滑动菜单，调用方式如下： 代码如下: var $sliding = document.getElementById(“silding”); var s1 = new Sliding(); s1.commands = $...