Is there a pure JS equivalent of jQuery .is() on modern browsers?
I know there is the querySelector method, but I want to check the node itself, rather than finding child nodes.
Looks like matchesSelector is what I want.
https://developer.mozilla.org/en-US/docs/Web/API/Element.matches
Polyfill is here:
https://gist.github.com/jonathantneal/3062955
this.Element && function(ElementPrototype) {
ElementPrototype.matchesSelector = ElementPrototype.matchesSelector ||
ElementPrototype.mozMatchesSelector ||
ElementPrototype.msMatchesSelector ||
ElementPrototype.oMatchesSelector ||
ElementPrototype.webkitMatchesSelector ||
function (selector) {
var node = this, nodes = (node.parentNode || node.document).querySelectorAll(selector), i = -1;
while (nodes[++i] && nodes[i] != node);
return !!nodes[i];
}
}(Element.prototype);
You've already answered your own question, but as per my comment above I looked through the jQuery.fn.is function. This isn't a strip from the source, because the function they're using is more generalized so it can be used across multiple other functions, But I've boiled it down to this function:
function is(elem, selector){ //elem is an element, selector is an element, an array or elements, or a string selector for `document.querySelectorAll`
if(selector.nodeType){
return elem === selector;
}
var qa = (typeof(selector) === 'string' ? document.querySelectorAll(selector) : selector),
length = qa.length,
returnArr = [];
while(length--){
if(qa[length] === elem){
return true;
}
}
return false;
}
DEMO
Another approach: Wrap the element you're testing in a parent then run querySelector from that
function is(el, selector) {
var div = document.createElement('div');
div.innerHTML = el.outerHTML;
return div.querySelector(selector);
}
I ran one test and it worked:
JS
var a = document.querySelector('a');
if(is(a, '.foo[name=foo]')) {
console.log('YES');
} else {
console.log('Nope');
}
HTML
Meow
I am sure this can be done a lot prettier.
According to youmightnotneedjquery.com depending on your IE compatibility requirement, you can even end up with simpler version:
var is = function(element, selector) {
return (element.matches || element.matchesSelector || element.msMatchesSelector ||
element.mozMatchesSelector || element.webkitMatchesSelector ||
element.oMatchesSelector).call(element, selector);
};
is(element, '.my-class');
With ES6 this would be:
const is = (element, selector) =>
(element.matches || element.matchesSelector || element.msMatchesSelector ||
element.mozMatchesSelector || element.webkitMatchesSelector ||
element.oMatchesSelector).call(element, selector);
};
is(element, '.my-class');
Following the concept from #AdamMerrifield it could be useful building the method is on any element through the Element.prototype chain by doing:
Element.prototype.is = function(match) {
...
};
Element is supported by all major browsers, even by IE 8+.
Here is a DEMO.
Related
I spent some time searching but have only seen too many regular "walk the DOM" blogs or answers that only go one level UP with getRootnode()
Pseudo code:
HTML
<element-x>
//# shadow-root
<element-y>
<element-z>
//# shadow-root
let container = this.closest('element-x');
</element-z>
</element-y>
</element-x>
The standard element.closest() function does not pierce shadow boundaries;
So this.closest('element-x') returns null because there is no <element-x> within <element-z> shadowDom
Goal:
Find <element-x> from inside descendant <element z> (any nested level)
Required:
A (recursive) .closest() function that walks up the (shadow) DOMs and finds <element-x>
Note: elements may or may not have ShadowDOM (see <element y>: only lightDOM)
I can and will do it myself tomorrow; just wondered if some bright mind had already done it.
Resources:
https://developer.mozilla.org/en-US/docs/Web/API/Node/getRootNode
https://developer.mozilla.org/en-US/docs/Web/API/ShadowRoot/host
Update
This is the UNminified code from the answer below:
closestElement(selector, base = this) {
function __closestFrom(el) {
if (!el || el === document || el === window) return null;
let found = el.closest(selector);
if (found)
return found;
else
__closestFrom(el.getRootNode().host);
}
return __closestFrom(base);
}
Update #2
I changed it to a method on my BaseElement:
closestElement(selector, el = this) {
return (
(el && el != document && el != window && el.closest(selector)) ||
this.closestElement(selector, el.getRootNode().host)
);
}
Events
As Intervalia comments; yes Events are another solution.
But then... an Event needs to be attached to an ancestor... How to know which ancestor to use?
This does the same as .closest() from inside any child (shadow)DOM
but walking up the DOM crossing shadowroot Boundaries
Optimized for (extreme) minification
//declared as method on a Custom Element:
closestElement(
selector, // selector like in .closest()
base = this, // extra functionality to skip a parent
__Closest = (el, found = el && el.closest(selector)) =>
!el || el === document || el === window
? null // standard .closest() returns null for non-found selectors also
: found
? found // found a selector INside this element
: __Closest(el.getRootNode().host) // recursion!! break out to parent DOM
) {
return __Closest(base);
}
Note: the __Closest function is declared as 'parameter' to avoid an extra let declaration... better for minification, and keeps your IDE from complaining
Called from inside a Custom Element:
<element-x>
//# shadow-root
<element-y>
<element-z>
//# shadow-root
let container = this.closestElement('element-x');
</element-z>
</element-y>
</element-x>
Excellent examples! Wanted to contribute a TypeScript version that has a minor difference -- it follows assignedSlot while traversing up the shadow roots, so you can find the closest matching element in a chain of nested, slotted custom elements. It's not the fanciest way to write the TypeScript, but it gets the job done.
closestElement(selector: string, base: Element = this) {
function __closestFrom(el: Element | Window | Document): Element {
if (!el || el === document || el === window) return null;
if ((el as Slotable).assignedSlot) el = (el as Slotable).assignedSlot;
let found = (el as Element).closest(selector);
return found
? found
: __closestFrom(((el as Element).getRootNode() as ShadowRoot).host);
}
return __closestFrom(base);
}
The equvalent in JS is:
closestElement(selector, base = this) {
function __closestFrom(el) {
if (!el || el === document || el === window)
return null;
if (el.assignedSlot)
el = el.assignedSlot;
let found = el.closest(selector);
return found
? found
: __closestFrom(el.getRootNode().host);
}
return __closestFrom(base);
}
Something like this should do the trick
function closestPassShadow(node, selector) {
if (!node) {
return null;
}
if (node instanceof ShadowRoot) {
return this.closestPassShadow(node.host, selector);
}
if (node instanceof HTMLElement) {
if (node.matches(selector)) {
return node;
} else {
return this.closestPassShadow(node.parentNode, selector);
}
}
return this.closestPassShadow(node.parentNode, selector);
}
just a to endolge legibility / code style. this should be typescript friendly as well.
const closestElement = (selector, target) => {
const found = target.closest(selector);
if (found) {
return found;
}
const root = target.getRootNode();
if (root === document || !(root instanceof ShadowRoot)) {
return null;
}
return closestElement(selector, root.host);
};
I'm working on a project in which I use es6 code with babel.
I use the following code:
let result= xmlDocument.querySelector("xmlNodeSelector");
for (let child of result.children) { /* do something */ }
The problem it doens't work on IE11 since no children property.
I create the following polyfill but it didn't help:
if(Element.prototype.hasOwnProperty('children')){
return;
}
Object.defineProperty(Element.prototype, 'children', {
get: function(){
let children = new HTMLCollection();
for(let i=0; i < this.childNodes.length; i++){
let item = this.childNodes[i];
if(item.nodeName !== '#text'){
children.push(item);
}
}
return children;
}
});
When I debug IE11 I can see the prototype is Element but the property is not added. In addition when using:
selectorResult instanceof Element
selectorResult instanceof Node
I get false on both.
At the moment I use a method to extract children rather then adding to the prototype which is what i prefer.
Any suggestions?
Thanks in advance
The following code adds the property children to all HTML,XML and SVG elements - just tested it under IE11:
//make sure we have Node.children and Element.children available
(function (constructor) {
if (constructor &&
constructor.prototype &&
constructor.prototype.children == null) {
Object.defineProperty(constructor.prototype, 'children', {
get: function () {
var i = 0, node, nodes = this.childNodes, children = [];
//iterate all childNodes
while (node = nodes[i++]) {
//remenber those, that are Node.ELEMENT_NODE (1)
if (node.nodeType === 1) { children.push(node); }
}
return children;
}
});
}
//apply the fix to all HTMLElements (window.Element) and to SVG/XML (window.Node)
})(window.Node || window.Element);
I found that polyfill on MDN.
This polyfill will return an array, instead of an HTMLCollection, but you can still make use of Node.children.length and Node.children[index].
Using this polyfill you could iterate your result like this:
var resChildren = result.children
var index, maxindex;
for (index=0, maxindex=resChildren.length; index<maxindex; index++)
{
/* do_something_with(resChildren[index]); */
}
var myElement = document.querySelector('div.example');// <div..></div>
/*
* A lot time after, codes executed, whatever
*/
if( myElement.isInDocument )
{
// Do something
}
Is there a easy way to know if 'myElement' still in document?
From Mozilla:
function isInPage(node) {
return (node === document.body) ? false : document.body.contains(node);
}
Since every element in the document is a child of the document, check to see if your element is:
function isInDocument(e) {
while( e.parentNode) e = e.parentNode;
return e === document;
}
One way is to use contains()
var myElement = document.querySelector('div.example');
console.log("elment ", myElement);
console.log("contains before ", document.body.contains(myElement));
myElement.parentNode.removeChild(myElement);
console.log("contains after ", document.body.contains(myElement));
JSFiddle
You can first see if the .contains() method exists and use it if available. If not, walk the parent chain looking for the document object. From a prior project using code like this, you can't just rely on parentNode being empty (in some versions of IE) when you get to document so you have to also explicitly check for document like this:
function isInDocument(e) {
if (document.contains) {
return document.contains(e);
} else {
while (e.parentNode && e !== document) {
e = e.parentNode;
}
return e === document;
}
}
For modern browsers the answer is myElement.isConnected
https://developer.mozilla.org/en-US/docs/Web/API/Node/isConnected
I am trying to find the closest element with a specific tag name without jquery. When I click on a <th> I want to get access to the <tbody> for that table. Suggestions? I read about offset but didn't really understand it too much. Should I just use:
Assume th is already set to clicked th element
th.offsetParent.getElementsByTagName('tbody')[0]
Very simple:
el.closest('tbody')
Supported on all browsers except IE.
UPDATE: Edge now support it as well.
No need for jQuery.
More over, replacing jQuery's $(this).closest('tbody') with $(this.closest('tbody')) will increase performance, significantly when the element is not found.
Polyfill for IE:
if (!Element.prototype.matches) Element.prototype.matches = Element.prototype.msMatchesSelector;
if (!Element.prototype.closest) Element.prototype.closest = function (selector) {
var el = this;
while (el) {
if (el.matches(selector)) {
return el;
}
el = el.parentElement;
}
};
Note that there's no return when the element was not found, effectively returning undefined when the closest element was not found.
For more details see:
https://developer.mozilla.org/en-US/docs/Web/API/Element/closest
Little (very) late to the party, but nonetheless. This should do the trick:
function closest(el, selector) {
var matchesFn;
// find vendor prefix
['matches','webkitMatchesSelector','mozMatchesSelector','msMatchesSelector','oMatchesSelector'].some(function(fn) {
if (typeof document.body[fn] == 'function') {
matchesFn = fn;
return true;
}
return false;
})
var parent;
// traverse parents
while (el) {
parent = el.parentElement;
if (parent && parent[matchesFn](selector)) {
return parent;
}
el = parent;
}
return null;
}
Here's how you get the closest element by tag name without jQuery:
function getClosest(el, tag) {
// this is necessary since nodeName is always in upper case
tag = tag.toUpperCase();
do {
if (el.nodeName === tag) {
// tag name is found! let's return it. :)
return el;
}
} while (el = el.parentNode);
// not found :(
return null;
}
getClosest(th, 'tbody');
There exists a standardised function to do this: Element.closest.
Most browsers except IE11 support it (details by caniuse.com). The MDN docs also include a polyfill in case you have to target older browsers.
To find the closest tbody parent given a th you could do:
th.closest('tbody');
In case you want to write the function yourself - here is what I came up with:
function findClosestParent (startElement, fn) {
var parent = startElement.parentElement;
if (!parent) return undefined;
return fn(parent) ? parent : findClosestParent(parent, fn);
}
To find the closest parent by tag name you could use it like this:
findClosestParent(x, element => return element.tagName === "SECTION");
function closest(el, sel) {
if (el != null)
return el.matches(sel) ? el
: (el.querySelector(sel)
|| closest(el.parentNode, sel));
}
This solution uses some of the more recent features of the HTML 5 spec, and using this on older/incompatible browsers (read: Internet Explorer) will require a polyfill.
Element.prototype.matches = (Element.prototype.matches || Element.prototype.mozMatchesSelector
|| Element.prototype.msMatchesSelector || Element.prototype.oMatchesSelector
|| Element.prototype.webkitMatchesSelector || Element.prototype.webkitMatchesSelector);
Here's the simple function I am using:-
function closest(el, selector) {
var matches = el.webkitMatchesSelector ? 'webkitMatchesSelector' : (el.msMatchesSelector ? 'msMatchesSelector' : 'matches');
while (el.parentElement) {
if (el[matches](selector)) return el;
el = el.parentElement;
}
return null;
}
To extend #SalmanPK answer
it will allow to use node as selector, useful when you working with events like mouseover.
function closest(el, selector) {
if (typeof selector === 'string') {
matches = el.webkitMatchesSelector ? 'webkitMatchesSelector' : (el.msMatchesSelector ? 'msMatchesSelector' : 'matches');
while (el.parentElement) {
if (el[matches](selector)) {
return el
};
el = el.parentElement;
}
} else {
while (el.parentElement) {
if (el === selector) {
return el
};
el = el.parentElement;
}
}
return null;
}
Summary:
For finding a particular ancestor we can use:
Element.closest();
This function takes a CSS selector string as an argument. it then returns the closest ancestor of the current element (or the element itself) which matches the CSS selector which was passed in the arguments. If there is no ancestor it will return null.
Example:
const child = document.querySelector('.child');
// select the child
console.dir(child.closest('.parent').className);
// check if there is any ancestor called parent
<div class="parent">
<div></div>
<div>
<div></div>
<div class="child"></div>
</div>
</div>
Get closest DOM element up the tree that contains a class, ID, data attribute, or tag. Includes the element itself. Supported back to IE6.
var getClosest = function (elem, selector) {
var firstChar = selector.charAt(0);
// Get closest match
for ( ; elem && elem !== document; elem = elem.parentNode ) {
// If selector is a class
if ( firstChar === '.' ) {
if ( elem.classList.contains( selector.substr(1) ) ) {
return elem;
}
}
// If selector is an ID
if ( firstChar === '#' ) {
if ( elem.id === selector.substr(1) ) {
return elem;
}
}
// If selector is a data attribute
if ( firstChar === '[' ) {
if ( elem.hasAttribute( selector.substr(1, selector.length - 2) ) ) {
return elem;
}
}
// If selector is a tag
if ( elem.tagName.toLowerCase() === selector ) {
return elem;
}
}
return false;
};
var elem = document.querySelector('#some-element');
var closest = getClosest(elem, '.some-class');
var closestLink = getClosest(elem, 'a');
var closestExcludingElement = getClosest(elem.parentNode, '.some-class');
Find nearest Elements childNodes.
closest:function(el, selector,userMatchFn) {
var matchesFn;
// find vendor prefix
['matches','webkitMatchesSelector','mozMatchesSelector','msMatchesSelector','oMatchesSelector'].some(function(fn) {
if (typeof document.body[fn] == 'function') {
matchesFn = fn;
return true;
}
return false;
});
function findInChilds(el){
if(!el) return false;
if(el && el[matchesFn] && el[matchesFn](selector)
&& userMatchFn(el) ) return [el];
var resultAsArr=[];
if(el.childNodes && el.childNodes.length){
for(var i=0;i< el.childNodes.length;i++)
{
var child=el.childNodes[i];
var resultForChild=findInChilds(child);
if(resultForChild instanceof Array){
for(var j=0;j<resultForChild.length;j++)
{
resultAsArr.push(resultForChild[j]);
}
}
}
}
return resultAsArr.length?resultAsArr: false;
}
var parent;
if(!userMatchFn || arguments.length==2) userMatchFn=function(){return true;}
while (el) {
parent = el.parentElement;
result=findInChilds(parent);
if (result) return result;
el = parent;
}
return null;
}
Here.
function findNearest(el, tag) {
while( el && el.tagName && el.tagName !== tag.toUpperCase()) {
el = el.nextSibling;
} return el;
}
Only finds siblings further down the tree. Use previousSibling to go the other way
Or use variables to traverse both ways and return whichever is found first.
You get the general idea, but if you want to traverse through parentNodes or children if a sibling doesn't match you may as-well use jQuery. At that point it's easily worth it.
A little late to the party, but as I was passing by and just answer back a very similar question, I drop here my solution - we can say it's the JQuery closest() approach, but in plain good ol' JavaScript.
It doesn't need any pollyfills and it's older browsers, and IE (:-) ) friendly:
https://stackoverflow.com/a/48726873/2816279
I think The easiest code to catch with jquery closest:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
$(document).ready(function () {
$(".add").on("click", function () {
var v = $(this).closest(".division").find("input[name='roll']").val();
alert(v);
});
});
</script>
<?php
for ($i = 1; $i <= 5; $i++) {
echo'<div class = "division">'
. '<form method="POST" action="">'
. '<p><input type="number" name="roll" placeholder="Enter Roll"></p>'
. '<p><input type="button" class="add" name = "submit" value = "Click"></p>'
. '</form></div>';
}
?>
Thanks much.
I don't want to know if an element contains a specific class, but just if it's loaded in DOM:
$(myObject).attr("class").length;
or
if($t.classList.length) {
var classSUP = $t.attr("class");
} else {
var classSUP = $t.attr("id");
};
Or how about just
(myObject.className != '')
or, just to be sure about possible additional spaces
(myObject.className.replace(' ', '') != '')
This is no job for a framework ;)
The easiest way to check would be:
if($("element").attr("class")) {
return true;
}
Example shown here: http://jsfiddle.net/Skooljester/XpUJA/
You don't need jQuery to do this:
if (element.className) {
// element has a class
}
or, if you really want to use jQuery:
if ($('#elementID').attr('class')) {
// element has a class
}
Try this:
var containsClass = $t.attr("class") !== "" && $t.attr("class") !== undefined;
Here is as a function:
function containsClass($t)
{
return $t.attr("class") !== "" && $t.attr("class") !== undefined;
}
The easiest way to detect if particular object loaded in DOM is:
if ( $('.className').length ) {
alert('.className is on DOM')
}