Question

我正在尝试打印具有列表的网站的前十个条目，我希望结果在控制台本身。这是使用

的HTML结构

$url="https://xxx.xxx.xx.xx:xxxx/rest/customers/".$user_id."/credentials";

这是我尝试在控制台中运行的内容：

<div class=classname>
  <b>The text i want</b>
</div>

我不知道接下来该做什么。我对javascript很新，所以任何帮助都会非常感激。

Answer 1

您可以使用innerText属性来获取文本。

此外，使用基于list.length的比较来运行for循环而不是10 for(var i=0;i<10;i++)之类的任意数字。

＆＃13;

list = document.getElementsByClassName('classname')
for(var i=0;i < list.length;i++)
{
  console.log(list[i].innerText);
}

＆＃13;

<div class="classname">
  <b>The text i want</b>
</div>

＆＃13;

请注意，与textConten不同，innerText不会显示屏幕上不可见的任何文字或<script>标记内的文字。 See this了解有关差异的更多信息。

Answer 2

使用textContent或innerText获取所需的文字。 list[i].textContent

您也可以使用.innerHTML这也会显示标签。

<强>演示

＆＃13;

list = document.getElementsByClassName('classname')
for(var i=0;i<list.length;i++)
{
  console.log (list[i].textContent)
}

＆＃13;

<div class=classname>
  <b>The text i want</b>
</div>

＆＃13;

Answer 3

首先，您需要使用textContent来获取所选元素节点内的文本内容。

另外，为了简化在JavaScript中定位嵌套元素，您可以使用以下函数：

querySelectorAll

querySelector

＆＃13;

var myTags = document.querySelectorAll(".classname b");

for( var i = 0; i < myTags.length; i++ ){
  var curTag = myTags[i];
  console.log( curTag.textContent );
}

＆＃13;

<div class=classname>
  <b>The text i want</b>
</div>

<div class=classname>
  <b>The text i want (2nd time)</b>
</div>

<div class=classname>
  <b>The text i want (3rd time)</b>
</div>

＆＃13;

Answer 4

使用jQuery，它很简单：

$('.classname').each(function(i,e) {
    if (i==10) return false;
    console.log($(e).text());
});

＆＃13;

$('.classname').each(function(i,e) {
    if (i==10) return false;
    console.log($(e).text());
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class=classname>
  <b>The text i want 1</b>
</div>
<div class=classname>
  <b>The text i want 2</b>
</div>
<div class=classname>
  <b>The text i want 3</b>
</div>
<div class=classname>
  <b>The text i want 4</b>
</div>
<div class=classname>
  <b>The text i want 5</b>
</div>
<div class=classname>
  <b>The text i want 6</b>
</div>
<div class=classname>
  <b>The text i want 7</b>
</div>
<div class=classname>
  <b>The text i want 8</b>
</div>
<div class=classname>
  <b>The text i want 9</b>
</div>
<div class=classname>
  <b>The text i want 10</b>
</div>
<div class=classname>
  <b>The text i want 11</b>
</div>
<div class=classname>
  <b>The text i want 12</b>
</div>

＆＃13;

使用jquery在嵌套的html标记中获取文本

4 个答案: