Add DOM find snippets
This commit is contained in:
22
snippets/findClosestAnchor.md
Normal file
22
snippets/findClosestAnchor.md
Normal 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
|
||||||
|
```
|
||||||
22
snippets/findClosestMatchingNode.md
Normal file
22
snippets/findClosestMatchingNode.md
Normal 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
|
||||||
|
```
|
||||||
Reference in New Issue
Block a user