标签：span DOM 对象 getElementsByTagName alert getElementById
9.1 DOM的定义
9.2 DOM的基础
9.3 节点的选择
9.3.1 通过 ID 检索
在 JavaScript 中，如果要对 HTML 文档中的指定节点进行选择，Document.getElementById() 方法是一种最为常见的手段。该方法可以像下面这样书写。
var element = document.getElementById('hzh');
这样就能够取得 ID 为 hzh 的元素。ID 在 DOM树中必须是唯一的。在 DOM 中并没有对存在多个相同 ID 的情况做出规定。不过，大部分的浏览器都采用了返回第一个找到的元素的方式。
不过即便如此，也不应该根据这一规则来进行设计。这样的做法是错误的，ID 必须是唯一的（代码清单9.2）。
代码清单 9.2 在同时存在多个相同 ID 时 getElementById() 方法的行为
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>在同时存在多个相同 ID 时 getElementById() 方法的行为</title>
</head>
<body>
<div id="hzh">第一个hzh</div>
<div id="hzh">第二个hzh</div>
<div id="hzh">第三个hzh</div>
<script>
var element = document.getElementById('hzh');
alert(element.innerHTML); // 大部分浏览器都会返回第一个hzh。不过这并不是一个绝对标准
</script>
</body>
</html>
9.3.2 通过标签名检索
可以通过下面这样的方式，使用 Element.getElementsByTagName() 方法来取得具有该标签名的所有节点。标签名还可以使用
'*'作为通配符。可以通过'*'来获取所有元素。
var spanElements = document.getElementsByTagName('span'); // 仅获取span元素
var allElements = document.getElementsByTagName('*'); // 获取所有的元素
Document.getElementById() 是只存在于 Document 对象中的方法，而Element.getElementsByTagName() 则是同时存在于 Document 对象与 Element 对象这两者中的方法。在执行某个 Element 对象的 getElementsByTagName() 方法时，该 Element 对象的子孙节点中具有指定标签名的元素也将被获取（代码清单 9.3）。
代码清单 9.3 getElementById() 与 getElementsByTagName()
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>getElementById() 与 getElementsByTagName()</title>
</head>
<body>
<p id="huangzihan">
<span>hzh1</span>
<span>hzh2</span>
<span>hzh3</span>
<span>hzh4</span>
</p>
<p id="hzh">
<span>黄子涵</span>
</p>
<script>
var huangzihan = document.getElementById('huangzihan');
// Element 对象中没有 getElementById() 方法
alert("查看Element对象中有没有getElementById() 方法？");
alert(huangzihan.getElementById); // => undefined
// Element 对象中存在 getElementsByTagName() 方法
alert("查看Element 对象中是否存在 getElementsByTagName() 方法？");
alert(huangzihan.getElementsByTagName); // => function getElementsByTagName() { [native code] }
// 从 huangzihan 的子孙节点中取得元素 span
var huangzihanSpans = huangzihan.getElementsByTagName('span');
alert("huangzihan 的子孙节点中span元素的个数：");
alert(huangzihanSpans.length); // => 3
// 从整个文档中获取元素 span
var allSpans = document.getElementsByTagName('span');
alert("从整个文档中span元素的个数：");
alert(allSpans.length); // => 4
</script>
</body>
</html>
Live 对象的特征
在这里需要注意的是，getElementsByTagName() 所能取得的对象是一个 NodeList 对象，而不是单纯的 Node 对象的数组。而 NodeList 对象的一大特征就是它是一个 Live 对象。可以写出代码清单 9.4 这样的代码。
代码清单 9.4 Live 对象
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Live 对象</title>
</head>
<body>
<div id="hzh">
<span>黄子涵</span>
<span>黄子涵是帅哥！</span>
</div>
<script>
var hzh1 = document.getElementsByTagName('span');
alert("第一次打印span元素的个数：");
alert(hzh1.length);
var hzh2 = document.createElement('span');
hzh2.appendChild(document.createTextNode('黄子涵是靓仔！'));
var hzh3 = document.getElementById('hzh');
hzh3.appendChild(hzh2);
alert("第二次打印span元素的个数：");
alert(hzh1.length);
</script>
</body>
</html>
在上面的代码中，最初取得的 hzh1.length 值为 2，这是很显然的。之后，通过 JavaScript 新增了一个 span 元素。再一次显示 hzh2.length 时其值变为了 3。
如果是在新增了 span 之后再执行 getElementsByTagName()，自然不会觉得有什么问题，但这里明明是一个在新增 span 之前就已经取得的 NodeList 对象，却能够知道新增了 span 之后的状态，是不是觉得有点奇怪？而这就是 Live 对象的一个特征。
Live 对象始终具有 DOM 树实体的引用。因此，对 DOM 树做出的变更也会在 Live 对象中得到体现。
9.3.3 通过名称检索
通过 HTMLDocument.getElementsByName() 方法，可以将 name 属性的值作为限定条件来获取属性。不过因为只能在 form 标签或 input 标签等标签中使用 name 属性，所以与 getElementById() 相比，它的使用频率较低。
9.3.4 通过类名检索
通过使用 HTMLElement.getElementsByClassName() 方法，就可以获取指定类名的元素。其中的类名可以指定多个值。如果想要指定多个类名，则需要使用空白符作为分隔字符串。也就是类似于 'classA classB' 的形式。这时，会取得 classA 与 classB 这两个类名所指定的元素。
该方法并不属于 DOM Core 或 DOM HTML 标准，而是一种 HTML5 规定的功能。不过在实际使用中并不需要对此过于在意。
从这是一个在 HTML5 标准中定义的方法这一点上也能知道，只有现代的浏览器才对该方法提供了支持。在 Internet Explorer 8 以及更早的版本中无法使用这一方法。不过其实在很多 JavaScript 库中，都有类似于 getElementsByClassName() 这一方法的实现，所以只要利用库的话，同样能够简单地在Internet Explorer 8 以及更早的版本中使用这样的功能。
9.4 节点的创建与新增
9.5 节点的内容更改
9.6 节点的删除
9.7 innerHTML/textContent
9.8 DOM操作的性能
标签：span,DOM,对象,getElementsByTagName,alert,getElementById 来源： https://www.cnblogs.com/Huang-zihan/p/16329495.html
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。