保安日记：JavaScript学习第九篇之DOM基础之节点操作_将一个节点添加到父节点的所有子节点的末尾使用方法。(5 分-CSDN博客

本文链接：https://blog.csdn.net/Zhuo_De/article/details/109143898

本文详细介绍了JavaScript中的DOM节点操作，包括节点的基本属性、节点层级关系如父节点、子节点、兄弟节点的获取，以及创建、添加、删除和复制节点的方法。特别提到了`parentNode`、`childNodes`、`children`、`firstChild`等属性和`appendChild`、`insertBefore`等方法的使用，并指出了兼容性问题和解决方案。

摘要由CSDN通过智能技术生成

节点操作

在这里插入图片描述
节点概述
一般地，节点至少拥有nodeType（节点类型)、nodeName(节点名称）和nodeValue(节点值）这三个基本属性。在实际开发中，节点操作主要操作的是元素节点

元素节点nodeType为 1
属性节点nodeType为 2
文本节点nodeType为 3(文本节点包含文字、空格、换行等）

节点层级
利用DOM树可以把节点划分为不同的层级关系，常见的是父子兄层级关系

在这里插入图片描述
1.父级节点

node.parentNode

parentNode属性可返回某节点的父节点，注意是最近的一个父节点
如果指定的节点没有父节点则返回null

2.子节点

parentNode .childNodes(标准)
parentNode.childNodes返回包含指定节点的子节点的集合，该集合为即时更新的集合。
注意∶返回值里面包含了所有的子节点，包括元素节点，文本节点等。
如果只想要获得里面的元素节点，则需要专门处理。所以我们一般不提倡使用childNodes

var ul = document. querySelector ( 'ul') ;
for(var i = 0; i < ul.childNodes.length;i++){
   
	if (ul.childNodes[i].nodeType == 1) {
   
	// ul.childNodes[i〕是元素节点
		console.log(ul.childNodes[i]);
		}
}

parentNode.children(非标准)
parentNode.children是一个只读属性，返回所有的子元素节点。它只返回子元素节点，其余节点不返回
虽然children是一个非标准，但是得到了各个浏览器的支持，因此我们可以放心使用
parentNode.firstChild | parentNode.lastChild
firstChild返回第一个子节点，lastChild返回最后一个节点
找不到则返回null。同样，也是包含所有的节点。
parentNode.firstElementChild | parentNode.lastElementChild
firstElementchild返回第一个子元素节点，找不到则返回null。
lastElementchild返回最后一个子元素节点，找不到则返回null。
注意:这两个方法有兼容性问题，IE9以上才支持。
实际开发写法无兼容性问题

console.log(ul.children[0]);					   //返回第一个子元素节点
console.log(ul.children[ul.children.length - 1]);  //返回最后一个子元素节点

3.兄弟节点

node.nextSibling | node.previousSibling
nextsibling 返回当前元素的下一个兄弟节点，找不到则返回null。同样，也是包含所有的节点。
previoussibling 返回当前元素上一个兄弟节点，找不到则返回null。同样，也是包含所有的节点。
node .nextElementSibling | node.previousElementSibling
nextElementsibling返回当前元素下一个兄弟元素节点，找不到则返回null。
previousElementsibling返回当前元素上一个兄弟节点，找不到则返回null。
注意∶这两个方法有兼容性问题，IE9以上才支持。
自己封装一个兼容性的函数

function getNextElementSibling(element)
	var el = element;
	while (el = el.nextSibling){
   
		if(el.nodeType ===