Question

我需要检查；如果在内容 div 之前存在按钮。

如何使用纯 javascript 执行此操作？我确实尝试过 parentElement.tagName 和 parentNode.tagName，但没有奏效。

附加说明：我正在尝试列出 div 内容，如果按钮在内容 div 之前不存在，我会将按钮与 createElement 一起放置。（请注意：createElement 不是这个问题的一部分，我已经知道该怎么做）

我的例子在这里：

const test = document.querySelectorAll('[id="test"] > .content');

for (let x = 0; x < test.length; x++) {
  console.log(test[x].parentElement.tagName);
  console.log(test[x].parentNode.tagName);
}

<div id="test">
  <div class="content">1</div>
  <div class="content">2</div>
  <button class="button">TEST 3</button>
  <div class="content">3</div>
  <div class="content">4</div>
  <div class="content">5</div>
</div>

JSFIDLE：https://jsfiddle.net/juq2c4se/1/

Answer 1

previousElementSibling.tagName 应该有帮助：

const test = document.querySelectorAll('[id="test"] > .content');
for (let x = 0; x < test.length; x++) {
  const contentElem = test[x];
  if(!contentElem.previousElementSibling || contentElem.previousElementSibling.tagName!=='BUTTON') {
    const btn = document.createElement("btn");
    btn.innerHTML = `<button class="button">TEST ${x+1}</button>`;
    contentElem.parentNode.insertBefore(btn, contentElem);
  }
}

<div id="test">
  <div class="content">1</div>
  <div class="content">2</div>
  <button class="button">TEST 3</button>
  <div class="content">3</div>
  <div class="content">4</div>
  <div class="content">5</div>
</div>

Answer 2

父级和兄弟级之间存在差异。在你的情况下 div id="test" 是父级。由于您正在寻找“内容 div 之前的按钮”，因此您需要一个兄弟姐妹，如果我理解正确，那么您需要使用 test[i].previousElementSibling.tagName 在此处阅读有关 Node.previousElementSibling 的更多信息：https://developer.mozilla.org/en-US/docs/Web/API/NonDocumentTypeChildNode/previousElementSibling

Answer 3

使用 tagName 而不是 TagName。更改此：console.log(test[x].parentElement.TagName) console.log(test[x].parentElement.tagName);

tagName 上的 t 应该是小写。您可以在此处阅读更多信息：https://developer.mozilla.org/en-US/docs/Web/API/Element/tagName .

Answer 4

因为我很难理解您的问题，因为 <button> 不能有嵌套元素。因此，您可以通过以下方式根据标签名称找出按钮与 siblings 和 parent 相关的位置。

const container = document.getElementById('test');
const firstButton = container.getElementsByTagName('button')[0]
if(firstButton) {
  const divBefore = firstButton.previousElementSibling.nodeName === 'DIV'
  const divAfter = firstButton.nextElementSibling.nodeName === 'DIV'
  const divParent = firstButton.parentElement.nodeName === 'DIV'
}

我使用 getElementById 来限制 getElementsByTagName 的范围

在for循环中检查divs时父元素是否是按钮

4 个答案: