Update and rename getDomPath.md to getAncestors.md
This commit is contained in:
24
snippets/getAncestors.md
Normal file
24
snippets/getAncestors.md
Normal file
@ -0,0 +1,24 @@
|
||||
---
|
||||
title: getAncestors
|
||||
tags: browser,beginner
|
||||
---
|
||||
|
||||
Returns all the ancestors of an element from the document root to the given element.
|
||||
|
||||
- Use a `Node.parentNode` and a `while` loop to move up the ancestor tree of the element.
|
||||
- Use `Array.prototype.unshift()` to add each new ancestor to the start of the array.
|
||||
|
||||
```js
|
||||
const getAncestors = el => {
|
||||
let ancestors = [];
|
||||
while (el) {
|
||||
ancestors.unshift(el);
|
||||
el = el.parentNode;
|
||||
}
|
||||
return ancestors;
|
||||
};
|
||||
```
|
||||
|
||||
```js
|
||||
getAncestors(document.querySelector('nav')); // [document, html, body, header, nav]
|
||||
```
|
||||
@ -1,26 +0,0 @@
|
||||
---
|
||||
title: getDomPath
|
||||
tags: javascript, browser
|
||||
---
|
||||
|
||||
Returns an array of an element's ancestors ordered from the document
|
||||
root to the given element
|
||||
|
||||
- Pass an element to the function, returns an array of elements
|
||||
- Returned array has given element and all ancestor elements in order from document root downward
|
||||
|
||||
```js
|
||||
const getDomPath = (el) =>
|
||||
{
|
||||
const path = [];
|
||||
while (el) {
|
||||
path.unshift(el);
|
||||
el = el.parentElement;
|
||||
}
|
||||
return path;
|
||||
}
|
||||
```
|
||||
|
||||
```js
|
||||
functionName(document.querySelector('nav')); // [html, body, header, nav]
|
||||
```
|
||||
Reference in New Issue
Block a user