通过'class'而不是'id'引用元素

我试图在新闻网站中引用元素（以获取文本块）并以简单的方式显示它们。通过'class'而不是'id'引用元素

我观看了关于引用元素的YouTube教程，并使用'getElementById'引用了段落。

我想使用的网站并不使用'Id ='，它主要使用'class ='，所以我不能使用这种相同的方法。

我试着交换'getElementById'为'getElementsByClassName'，但我得到的答案'未定义。'

代码：

<html lang="en"> 
<body> 
<p class="para1" > this is the 1st paragraph </p> 
<p> <br/> </p> 
<p> <br/> </p> 
<p> <br/> </p> 
<p class="para2" > this is the 2nd paragraph </p> 
</body> 
</html> 

<script type="text/javascript"> 
var input=document.createElement("input"); 
input.type="button"; 
input.value="Check"; 
input.onclick = showAlert1; 
input.setAttribute("style", "font-size:18px;position:absolute;top:100px;right:40px;"); 
document.body.appendChild(input);//Placement of check button on website; 

function showAlert1() 
{ 
alert(document.getElementsByClassName('para2').innerHTML); 
} 
</script>

来源

2015-06-03 Conor

有一点要记住的是，的getElementById（）返回一个元素，而getElementsByClassName方法（）返回元素列表（带有该类名称的元素的实时HTMLCollection）。你可能需要做的一件事是getElementsByClassName（）[0]，它会给你找到该类名的第一个元素。 – neilsimp1

你说：'参考元素（获取文本块）在新闻网站'。这个新闻网站与您的网站不同吗？你是否试图在浏览器中做到这一点？ – GitaarLAB

我没有域名，我使用Tampermonkey编辑上述新闻网站。是的，我正在使用Chrome浏览器。 – Conor

getElementsByClassName返回元素的集合（如阵列）。所以，你需要访问使用indexes这样的：

document.getElementsByClassName("someClass")[0]; 

//Or if you want to access all 
var len = document.getElementsByClassName("someClass").length; 
for(var i=0;i<len;i++){ 
//access like document.getElementsByClassName("someClass")[i] 
}

在你的情况

document.getElementsByClassName('para2')[0].innerHTML

来源

2015-06-03 16:16:03 Zee

哇，所以很容易回答。非常感谢。是完美的作品。只需要引用数组中的元素。我认为方括号中的数字表示该行。 – Conor

you have to add the script after html tag. 

<div class="increased">hi</div> <!-- first specify the tag--> 
<script type="text/javascript"> <!-- then call in script--> 
var i = 23; 
var elems=document.getElementsByClassName("increased"); 
for(var k = 0; k < elems.length; k++) { 
elems[k].style.size = '100px'; 
} 
</script>

来源

2015-06-03 16:35:01 Subhashini

我不明白这个解决方案。也许是因为我没有足够清楚解释。我无法写HTML内容（我的意思是网页上的内容）。我只是编写Tampermonkey脚本来提取HTML内容，并在页面的侧面制作一个按钮，当我单击它时将该信息作为警报弹出框输出。 – Conor

通过'class'而不是'id'引用元素

回答

相关问题