How to get element level value in JS?
I am facing a problem with DOM structure in JavaScript.
I have multiple div elements with class .item
<div class="item">
<p class="title">Lorem ipfsum</p>
<p>...</p>
<a class="bttn">Button</a>
</div>
So how can I get the text value of .title by clicking on bttn on the same .item? In JQ it looks like $(this).parent('.title')
, but how can I do it in Vanilla JS?
source to share
Since you have multiple divs with a class element and you need to translate into pure JS the click event handler for each button and the associated logic, I would suggest using:
- Document.querySelectorAll ('. Bttn')
- Array.prototype.forEach ()
- Element.closest () and its Polyfill to ensure cross-browser compatibility.
Another way:
Node.previousSibling : The read-only Node.previousSibling property returns the node immediately preceding the one specified in its parent's childNodes list, or null if the specified node is the first in that list.
//
// 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>
source to share
Remember: jQuery is just JavaScript. This is a comfortable layer on top of some dirty parts. You can access the parent node using .parentNode
. Combine that with querySelector
and you have a solution.
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>
source to share
From the click of the parent of the button, find the element .title
to get its text as shown below:
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>
source to share