На наших веб-страницах, помимо использования методов, предоставляемых DOM, для получения узлов, мы также можем использовать иерархические отношения узлов для получения узлов. Давайте суммируем их сегодня!
Все содержимое веб-страницы представляет собой узел (метка, атрибут, текст, комментарий и т. д.), а в DOM узлы представлены узлом.
Все узлы в дереве HTML DOM доступны через JavaScript, и все элементы (узлы) HTML можно изменять, создавать или удалять. 
Обычно узлы имеют как минимум три основных атрибута: nodeType (тип узла), nodeName (имя узла) и nodeValue (значение узла).
В нашей фактической разработке операции узлов в основном выполняются над узлами элементов.
использует дерево DOM для разделения узлов на различные иерархические отношения. Наиболее распространенным из них является иерархическое отношение «родитель-потомок-брат».
node.parentNode
<p класс="родитель">
<p class="son"></p>
</p>
<скрипт>
var son = document.querySelector(".son");
console.log(son.parentNode);
</скрипт> 
1.node.childNodes (стандартный)
node.childNodes возвращает коллекцию, содержащую дочерние узлы указанного узла. Эта коллекция является немедленно обновляемой коллекцией.
<ул>
<li>Я ли</li>
<li>Я ли</li>
<li>Я ли</li>
<li>Я ли</li>
</ul>
<скрипт>
вар ul = document.querySelector('ul');
//Дочерние узлы childNodes Все дочерние узлы, включая узлы элементов, текстовые узлы и т. д.
console.log(ul.childNodes);
</скрипт> 
Почему здесь пять текстовых узлов? На самом деле они соответствуют пяти разрывам строк. См. рисунок ниже: 
Эти пять разрывов строк представляют собой текстовые узлы плюс четыре узла элементов li, всего 9.
Примечание. Возвращаемое значение содержит все дочерние узлы, включая узлы элементов, текстовые узлы и т. д.
Если вы хотите поместить внутрь только узлы элементов, вам нужно обработать их особым образом. Поэтому мы обычно не поддерживаем использование дочерних узлов.
вар ul = document.querySelector('ul');
for (var i = 0;i<ul.length;i++){
если (ul.childNodes[i].nodeType == 1){
console.log(ul.childNodes[i]);
}
} 2.node.children (нестандартный)
node.children — это свойство, доступное только для чтения, которое возвращает все узлы дочерних элементов. Он возвращает только узлы дочерних элементов, а другие узлы не возвращаются (это то, на чем мы фокусируемся).
Хотя дети и являются нестандартными, они поддерживаются различными браузерами, поэтому мы можем использовать их с уверенностью.
<ул>
<li>Я ли</li>
<li>Я ли</li>
<li>Я ли</li>
<li>Я ли</li>
</ul>
<скрипт>
вар ul = document.querySelector('ul');
console.log(ul.children);
</скрипт> 
1.node.
2.node.lastChild
firstChild возвращает первый дочерний узел. Если он не может его найти, он возвращает значение null. То же самое относится и к LastChild. Аналогично, все узлы включены.
3.node.firstElementChild
firstElementChild возвращает первый узел дочернего элемента или значение NULL, если он не найден.
4.node.lastElementChild
LastElementChild возвращает последний узел дочернего элемента или ноль, если он не найден.
Примечание. Эти два метода имеют проблемы совместимости и поддерживаются только IE9 и выше.
5.node.дети[0]
5.node.дети[узел.дети.длина - 1]
Примечание. Проблем совместимости с реальным методом написания разработки не существует.
<ул>
<li>Я ли</li>
<li>Я ли</li>
<li>Я ли</li>
<li>Я ли</li>
</ul>
<скрипт>
вар ul = document.querySelector('ul');
// 1. Является ли это текстовым узлом или узлом элемента console.log(ul.firstChild);
console.log(ul.lastChild);
// 2. Возвращаем соответствующий узел собственного элемента. Только IE9 и выше поддерживают console.log(ul.firstElementChild);
console.log(ul.lastElementChild);
// 3. Проблем с совместимостью нет console.log(ul.children[0]);
console.log(ul.children[ul.children.length - 1]);
</скрипт> 
1.NextSibling.
nextSibling возвращает следующий одноуровневый узел текущего элемента или ноль, если он не найден. Аналогично, все узлы включены.
2.node.
previousSibling возвращает предыдущий одноуровневый узел текущего элемента или ноль, если он не найден. Аналогично, все узлы включены.
3.node.nextElementSibling
nextElementSibling возвращает следующий узел родственного элемента текущего элемента. Если он не найден, возвращает значение null.
4.node.ПредыдущийElementSibling.
previousElementSibling возвращает предыдущий узел родственного элемента текущего элемента или ноль, если он не найден.
Примечание. Эти два метода имеют проблемы совместимости и поддерживаются только IE9 и выше.
Итак, как инкапсулировать функцию, которая соответствует совместимости и может найти узлы родственных элементов
function getNextElementSibling(element){ ?
вар эль = элемент;
while(el = el.nextSibling){
если (el.nodeType == 1) {
вернуть эл;
}
}
вернуть ноль;
} Приведенный выше инкапсулированный код можно решить, но вам не нужно слишком много думать, потому что браузер IE вот-вот перестанет работать, поэтому вам нужно только запомнить node nextElementSibling, и вам не придется беспокоиться о совместимости. проблемы.
document.createElement('tagName')
Метод document.createElenent() создает элемент TML, указанный tagName. Поскольку эти элементы изначально не существовали и были созданы динамически на основе моих потребностей, нас еще называют динамически создающими узлы элементов .
1.node.appendChild(child)
Метод node.appendChild() добавляет узел в конец списка дочерних узлов указанного родительского узла. Аналогично псевдоэлементу after в CSS.
2.node.insertBefore(дочерний элемент, указанный элемент)
<ul></ul>
<скрипт>
var ul = document.querySelector("ul");
вар li =document.createElement("li");
var span = document.createElement("span")
ul.appendChild(ли);
ul.insertBefore(span,ul.children[0]);
</скрипт> 
node.removeChild(child)
Метод node.removeChild(child) удаляет дочерний узел из DOM и возвращает удаленный узел.
<ул>
<li>Аню</li>
<li>жениться</li>
<li>том</li>
</ul>
<скрипт>
var ul = document.querySelector("ul");
ul.removeChild(ul.children[2]);
</скрипт> 
node.cloneNode()
Метод node.cloneNode() возвращает копию узла, вызвавшего этот метод. Также называется узлом клонирования/узлом копирования.
1. Если параметр скобки пуст или имеет значение false, это неглубокая копия, то есть клонируется только сам узел, а дочерние узлы внутри не клонируются.
2. Если параметр скобки имеет значение true, это глубокая копия, которая копирует сам узел и все его дочерние узлы.
<ул>
<li>Аню</li>
<li>жениться</li>
<li>том</li>
</ul>
<скрипт>
var ul = document.querySelector("ul");
var li1 = ul.children[0].cloneNode(); //Поверхностное копирование var li2 = ul.children[0].cloneNode(true); //Глубокое копирование ul.appendChild(li1);
ul.appendChild(li2);
</скрипт> 