javascript - 判断一个节点是否包含ap标签的简单方法

Question

我正在尝试确定 div 是否包含特定节点（在本例中为 p 节点）。我不知道为什么，但我的简单 JS 不起作用。

有人可以解释为什么这不起作用吗？

代码笔： https ://codepen.io/ns91/pen/OJJxZRb

let test = document.querySelector('div');

if (test.contains('P')) {
  console.log('has a p');
} else {
  console.log('has no ps');
}

<div>
  <h1>header</h1>
  <p>para</p>
  <p>para</p>
  <span>span</span>
  <p>para</p>
</div>

标签： javascript

Answer 1

如评论使用

test.querySelector('p')

test.contains('P')是

let test = document.querySelector('div');
const pTag = test.querySelector('p');

if (pTag !== null) {
  console.log('has a p');
} else {
  console.log('has no ps');
}

<div>
  <h1>header</h1>
  <p>para</p>
  <p>para</p>
  <span>span</span>
  <p>para</p>
</div>

如果你想使用Node.contains，请参考文档。它期望参数为节点而不是字符串

let test = document.querySelector('div');
const p = document.querySelector('.pTag')

if (test.contains( p )) {
  console.log('has a p');
} else {
  console.log('has no ps');
}

<div>
  <h1>header</h1>
  <p>para</p>
  <p class='pTag'>para</p>
  <span>span</span>
  <p>para</p>
</div>