javascript - 获取具有相同类但带有过滤器的 div 的内部文本

Question

我将以下代码应用到控制台以从网页获取信息:

var elements = document.getElementsByClassName( 'company_name' ),
innerHTMLs = [];
for ( var i = 0; i < elements.length; ++i )
innerHTMLs.push( elements[i].innerHTML );
console.log( innerHTMLs );

我应该怎么做才能确保如果给定元素没有innerHTML，我会得到0或null？

问候

Answer 1

var elements = document.getElementsByClassName( 'company_name' ),
innerHTMLs = [];
for ( var i = 0; i < elements.length; ++i ){
  innerHTMLs.push( elements[i].innerHTML?elements[i].innerHTML:0 );
console.log( innerHTMLs );
}

代码elements[i].innerHTML?elements[i].innerHTML:0使用 ternary operator这模拟了一个内联 if 语句，其中 ? 之前的部分定义条件语句，后面的部分是语句为 true 时返回的值。 :之后的部分是条件评估为 false 时返回的内容。

如果你完整地写下它，它将变成以下内容(因为你是 javascript 的新手，了解这一点也很好):

if (elements[i].innerHTML) {
 innerHTMLs.push(elements[i].innerHTML);
} else {
 innerHTMLs.push(0);
}

<小时/>

其他信息

仍然有一些事情可以/必须改变，以使其更好地工作。

• 声明计数器时( i 在本例中)您想要使用 let而不是var 。在你的例子中它不会有任何区别。但当您想在同一范围内使用另一个循环时，就会出现差异。 var作用域为整个区域，无论是全局的还是在函数中，而 let将变量的作用域限制在 block 级别，这意味着 let您的柜台名称为 i 仅在 for 循环中声明。这是可取的，因为您显然不想使用其他字母或类似 ii 的东西。 ，iii 等等，为您的柜台。这使得代码更具可读性并且不太可能产生意外行为。

  var elements = document.getElementsByClassName( 'company_name' ),
      innerHTMLs = [];
  for (let i = 0; i < elements.length; ++i ){
    innerHTMLs.push( elements[i].innerHTML?elements[i].innerHTML:0 );
    console.log( innerHTMLs );
  }
  

• 使用后使用增量:您对 ++i 的声明意味着，您在使用计数器之前递增它。在某些情况下，这非常有用，但在这种情况下，它会跳过 elements 中的第一个项目。 -大批。为了您的目的，请使用i++ ，所以计数器将为 0当进行第一次迭代时。拥有它0第一次迭代很重要，因为数组从 0 开始索引不是1 .

  var elements = document.getElementsByClassName( 'company_name' ),
      innerHTMLs = [];
  for (let i = 0; i < elements.length; i++ ){
    innerHTMLs.push( elements[i].innerHTML?elements[i].innerHTML:0 );
    console.log( innerHTMLs );
  }