如何在JS中获得相同级别的元素值？

Question

我在JavaScript中遇到了DOM结构的问题。

我有几个div元素与类.item

<div class="item">
  <p class="title">Lorem ipfsum</p>
  <p>...</p>
  <a class="bttn">Button</a>
</div>

那么，如何通过单击同一个.item上的bttn来获取.title的文本值？ 在JQ中它看起来像这个$(this).parent('.title')但是我怎么能在Vanilla JS中做到这一点？

Answer 1

请记住：jQuery只是JavaScript。 它是一些方便的层，超过了一些凌乱的部分。 您可以使用.parentNode访问父节点。 将它与querySelector结合，你就有了解决方案。

 document.querySelector('.bttn').addEventListener('click', function() { console.log(this.parentNode.querySelector('.title')); }); 

 <div class="item"> <p class="title">Lorem ipfsum</p> <p>...</p> <a class="bttn">Button</a> </div> 

Answer 2

从单击的按钮父级中，搜索.title元素以检索其文本，如下所示：

 document.querySelector('.bttn').addEventListener('click', function() { console.log(this.parentNode.querySelector('.title').innerText); }); 

 <div class="item"> <p class="title">Lorem ipfsum</p> <p>...</p> <a class="bttn">Button</a> </div> 

Answer 3

因为你有几个带有类项的div，你需要在纯JS中翻译每个按钮的click事件处理程序以及我建议使用的相关逻辑：

• Document.querySelectorAll（ 'BTTN'）
• Array.prototype.forEach（）
• Element.closest（）及其Polyfill是为了确保浏览器之间的兼容性。

另一种方法是使用：

Node.previousSibling ：Node.previousSibling只读属性返回其父节点的childNodes列表中紧邻指定节点之前的节点，如果指定节点是该列表中的第一个节点，则返回null。

 // // closest Polifyll: from MDN // if (window.Element && !Element.prototype.closest) { Element.prototype.closest = function (s) { var matches = (this.document || this.ownerDocument).querySelectorAll(s), i, el = this; do { i = matches.length; while (--i >= 0 && matches.item(i) !== el) { }; } while ((i < 0) && (el = el.parentElement)); return el; }; } function previousSiblingByClassName(ele, className) { var el = ele; while (el = el.previousSibling) { if (el.classList != undefined && el.classList.contains(className)) { return el; } }; return el; } Array.prototype.forEach.call(document.querySelectorAll('.bttn'), function (ele, idx) { ele.addEventListener('click', function (e) { console.log('Using closest: ' + this.closest('.item').querySelector('.title').textContent); console.log('Using previousSibling: ' + previousSiblingByClassName(this, 'title').textContent); }); }); 

 <div class="item"> <p class="title">Lorem ipfsum1</p> <p>...</p> <a class="bttn">Button</a> </div> <div class="item"> <p class="title">Lorem ipfsum2</p> <p>...</p> <a class="bttn">Button</a> </div> <div class="item"> <p class="title">Lorem ipfsum3</p> <p>...</p> <a class="bttn">Button</a> </div> 

Answer 4

像这样：

this.parentNode.querySelector('.title');