Add DOM find snippets

This commit is contained in:
Chalarangelo
2021-04-22 08:45:39 +03:00
parent 2e61419df8
commit 3820a66ab1
2 changed files with 44 additions and 0 deletions

View File

@ -0,0 +1,22 @@
---
title: findClosestAnchor
tags: browser,intermediate
---
Finds the anchor node closest to the given `node`, if any.
- Use a `for` loop and `Node.parentNode` to traverse the node tree upwards from the given `node`.
- Use `Node.nodeName` and `String.prototype.toLowerCase()` to check if any given node is an anchor (`'a'`).
- If no matching node is found, return `null`.
```js
const findClosestAnchor = node => {
for (let n = node; n.parentNode; n = n.parentNode)
if (n.nodeName.toLowerCase() === 'a') return n;
return null;
};
```
```js
findClosestAnchor(document.querySelector('a > span')); // a
```

View File

@ -0,0 +1,22 @@
---
title: findClosestMatchingNode
tags: browser,intermediate
---
Finds the closest matching node starting at the given `node`.
- Use a `for` loop and `Node.parentNode` to traverse the node tree upwards from the given `node`.
- Use `Element.matches()` to check if any given element node matches the provided `selector`.
- If no matching node is found, return `null`.
```js
const findClosestMatchingNode = (node, selector) => {
for (let n = node; n.parentNode; n = n.parentNode)
if (n.matches && n.matches(selector)) return n;
return null;
};
```
```js
findClosestMatchingNode(document.querySelector('span'), 'body'); // body
```