У меня здесь странный вопрос, но я хотел спросить сообщество.Коллега задал мне вопрос о структуре DOM.Он хотел знать, как лучше всего определить, что родительский узел / элемент содержит дочерний узел / элемент и как можно собирать / определять путь / селектор DOM от родителя к потомку.Скажем, например, у нас есть DOM, подобный такому, с родительским узлом с идентификатором parentItem и дочерним узлом с идентификатором childItem
<body>
<div id="parentItem">
<div>
<div>I am some text</div>
<div>Today is Wednesday, 15th May, 2019</div>
<div>
<article>
<h1>Article 1</h1>
<img src="/img.png">
<div>I am a sibling</div>
<div id="childItem">I am the Child</div>
</article>
<article>
<h1>Article 2</h1>
<img src="/img2.png">
<div>I am another Article</div>
</article>
</div>
</div>
</div>
<div>
<div>I am a footer</div>
</div>
</body>
Итак, я сказал, что лучший способ определить взаимосвязь - этоопределите, что дочерний узел существует внутри родителя, и продвигайтесь вверх по DOM, пока мы не доберемся до родителя.Я написал следующую функцию, чтобы проверить, существует ли связь, затем обработал DOM от дочернего элемента, создавая массив пути Node и индекс элемента узла относительно его родителя.Я написал это:
function childRelationship(parent, child) {
if(document.getElementById(parent).contains(document.getElementById(child))) {
let el = document.getElementById(child);
const end = document.getElementById(parent).id;
const pathArray = [];
while(el.parentNode && el.id !== end) {
let chosenIndex = ([...el.parentNode.children].filter((node) => node.tagName === el.tagName).indexOf(el));
chosenIndex = `[${chosenIndex}]`;
pathArray.unshift(el.tagName + chosenIndex);
el = el.parentNode;
}
return 'Exists: ' + pathArray.join(' > ');
} else {
return 'No Child Exists Within Parent';
}
}
Когда я запускаю childRelationship('parentItem','childItem'), вывод с использованием примера DOM будет Exists: DIV[0] > DIV[2] > ARTICLE[0] > DIV[1].
Все отлично, но я должен спросить, есть ли лучше или большеэлегантный способ а) определения пути между родителем и ребенком (как метод ES6)?и b) определение индекса правильного элемента DOM, поскольку решение ([...el.parentNode.children].filter((node) => node.tagName === el.tagName).indexOf(el)); кажется слишком сложным.Есть ли какой-нибудь более простой способ получить путь и индекс без обхода назад?
Если это плохой вопрос или я его сформулировал плохо, скажите, пожалуйста, и я переделываю свой вопрос.