javascript - 为什么我的 if 语句适用于 else if，而不适用于 OR 运算符

Question

我在控制台中写了一小段 JS，循环浏览 LinkedIn 上推荐的联系人，如果文本包含某个单词，则忽略该卡片，否则单击“X”关闭按钮。

最初我是这样写的:

const list = document.querySelector('.mn-pymk-list__cards');
const cards = list.querySelectorAll('.mn-pymk-list__card');

cards.forEach( (card, i) => {

  setTimeout( ()=>{
    let text = card.querySelector('.member-insights__count');

    if( !text.textContent.includes('Sharon') || text === null ) {
        card.querySelector('.pymk-card__close-btn').click();
       } else {
        card.style.background = 'green';
       }
  }, i * 1000 )

});

但是，当它运行时，它有时会出错(同时继续迭代)“无法读取 null 的 textContent”。

但是，当我这样写代码时:

const list = document.querySelector('.mn-pymk-list__cards');
const cards = list.querySelectorAll('.mn-pymk-list__card');

cards.forEach( (card, i) => {

  setTimeout( ()=>{
    let text = card.querySelector('.member-insights__count');

    if( text === null ) {
        card.querySelector('.pymk-card__close-btn').click();
    } else if (!text.textContent.includes('Sharon')) {
        card.querySelector('.pymk-card__close-btn').click();
    } else {
        card.style.background = 'green';
    }
  }, i * 1000 )

});

它运行得非常好，并且按照我的意愿行事。

问题:我不明白为什么第一个选项不起作用，因为它看起来更简洁并且理论上应该做同样的事情？

我怀疑这与以下事实有关:在 LinkedIn 上，一些建议的联系人没有类“.member-insights__count”，而是类“.member-insights__info”。

但是，这仍然会使文本解析为 null，对吗？

任何见解都会很棒!

Answer 1

if( !text.textContent.includes('Sharon') || text === null ) {

当 text 为 null 时，您希望这段代码做什么？它会崩溃，因为您无法访问 null 的属性或方法。

您需要先检查是否为 null。

if( text === null || !text.textContent.includes('Sharon') ) {