Question

我尝试使用此代码简单地更改所有</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出现在页面上，但结果只是一个没有文字的空白页面。为什么呢？

Answer 1

getElementsByTagName是DOM接口的方法。它接受一个标签   将name命名为input并返回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";
}

Answer 2

它会返回您需要循环的NodeList：

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

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

Answer 3

它返回元素列表

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

document.getElementsByTagName('p')[0]

如果你想将它应用于多个

那么你必须遍历列表

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

Answer 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"*/
});

通过这种方式，您可以更快地进行跨浏览器解析

getElementsByTagName（）方法无法按预期工作

4 个答案: