getElementsByTagName() 方法没有按预期工作答案

【问题标题】：getElementsByTagName() method doesnt work as expectedgetElementsByTagName() 方法没有按预期工作
【发布时间】：2015-04-12 10:38:49
【问题描述】：

我正在尝试使用此代码简单地更改所有 </p> 元素中的文本

<html>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<body>
    <p></p>
    <script>
        elem=document.getElementsByTagName("p");
        elem.innerHTML="work";
    </script>
</body>
</html>

据此，我希望 work 出现在页面上，但结果只是一个没有文本的空白页面。为什么？

【问题讨论】：

首先 getByTagName 返回一个结果数组，而不是单个元素。

标签： javascript html twitter-bootstrap

【解决方案1】：

getElementsByTagName 是 DOM 接口的方法。它接受一个标签名称作为输入并返回一个 NodeList（一些浏览器选择返回 HTMLCollection 代替，这没关系，因为它是节点列表）。

Difference between HTMLCollection, NodeLists, and arrays of objects

您必须设置 HTMLCollection/NodeList 的索引。

elem=document.getElementsByTagName("p");
elem[0].innerHTML="work";

您也可以对 HTML 文档中的每个 p 标记执行此操作。

var elem = document.getElementsByTagName("p");

for(var index = 0; index < elem.length; index++){
    elem[index].innerHTML="work";
}

【讨论】：

嗯，实际上它不是一个数组，而是一个 HTMLCollection。更多信息请访问*.com/questions/15763358/…

【解决方案2】：

它返回你需要循环的NodeList：

var elements = document.getElementsByTagName("p");

for(var i = 0; i < elements.length; i++){
    elements[i].innerHTML="work";
}

【讨论】：

【解决方案3】：

它返回元素列表

如果你有，那么你可以使用：

document.getElementsByTagName('p')[0]

如果你想将它应用到多个

那么你必须遍历列表

var list = document.getElementsByTagName('p')    
for(index in list){
  list[index].innerHTML = 'work';
}

【讨论】：

【解决方案4】：

假设你已经包含了 jquery，你可以这样做：

$("p").text("work");
or better


$(document).ready(function(){

$("p").text("work");/*when the dom of the page is fully loaded text  inside p tags will be changed to "work"*/
});

这样你有一个更快的跨浏览器解决方案

【讨论】：