Update and rename getDomPath.md to getAncestors.md

This commit is contained in:
Angelos Chalaris
2020-10-15 09:28:34 +03:00
committed by GitHub
parent d9812f8e6b
commit 95071a8634
2 changed files with 24 additions and 26 deletions

24
snippets/getAncestors.md Normal file
View 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]
```

View File

@ -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]
```