Node.prototype常有节点类型： 1、元素节点 nodeType= 1； 2、属性节点 nodeType= 2

常有节点类型：

1、元素节点 nodeType= 1；

2、属性节点 nodeType= 2；

3、文本节点 nodeType= 3；

4、注释节点、nodeType= 8

5、文档节点 nodeType= 9。

6、DocumentFragment nodeType= 11；

<!DOCTYPE html>
<html>
    <head>
	<meta charset="utf-8">
	<title></title>
    </head>
    <body>
        <div id='box'>
            <p>在兄弟我前面插入新兄弟</p>
            <a href="">超链接标签</a>
            <p>remove</p>
        </div>
    </body>
<html>

1、常用属性：

// 1、获取当前dom元素所有的节点
			
console.log(div.childNodes);// [text, p, text, a, text, p, text]
			
// 2、获取当前dom元素的父标签节点
console.log(div.parentNode);//<body>
			
//3、获取当前dom元素的类型
console.log(div.nodeType);
			
//4、获取当前dom元素的节点名称
console.log(div.nodeName);//div.tagName:HTMLDivElement.prototype.tagName;
			
//5、获取当前dom元素的第一个节点
console.log(div.firstChild);
//6、获取当前dom元素的最后节点
console.log(div.lastChild);
			
//7、获取当前dom元素的下个节点
console.log(a.nextSibling);
			
//8、获取当前dom元素的上个节点
console.log(a.previousSibling);

2、常用方法：

var newNode1 = document.createElement('h4');
newNode1.innerText = '我是新节点1'
var a = document.getElementsByTagName('a')[0]
			
//1、 在a标签节点前面插入新节点newNode1
console.log(div.insertBefore(newNode1, a));
			
// 2、在获取当前dom元素最后子节点添加新节点，如果新的节点已经存在，则会剪切到最后
div.appendChild(newNode1)
// 3、判断当前元素节点有没有子节点
console.log(div.hasChildNodes());
			
//4、删除某一个子节点，并返回该节点
var nn = div.removeChild(newNode1);//a.remove()自己删除自己
console.log(nn);
			
// 5、替换某一个标签
div.replaceChild(nn, a)

3、自定义insertAfter方法，在节点的后面添加新节点

Node.prototype.insertAfter = function(newNode, terget) {
	var nextNode = terget.nextSibling;
	if (nextNode) {
		this.insertBefore(newNode, nextNode)
	} else {
		this.appendChild(newNode)
	}
}
var div = document.getElementById('box')
var a = document.getElementsByTagName('a')[0]
var newNode = document.createElement('p');
newNode.innerText = 'I am new Element'
div.insertAfter(newNode, a)

4、获取当前节点元素的第n个子元素节点

Node.prototype.getChildByIndex = function(index
	var target = undefined;
	if (this.hasChildNodes()) {
		var childElements = []
		var children = this.childNodes;
		for (var i = 0; i < children.length; i+
			if (children[i].nodeType == 1) {
				childElements.push(children[i])
			}
		}
		if (childElements.length > index) {
			target = childElements[index]
		}
	}
	return target
}
var div = document.getElementById('box')
console.log(div.getChildByIndex(1));

34、根据某个标签节点，并返回所有的子组成一颗树


<div data-pid='0' data-id='1'>
	<h1 data-pid='1' data-id='2'>遍历子元素节点</h1>
	<p data-pid='1' data-id='3'>
		<a data-pid='3' data-id='4' href=""></a>
	</p>
	<p data-pid='1' data-id='5'>
		<a data-pid='5' data-id='6' href=""></a>
	</p>
	<p data-pid='1' data-id='7'>
		<a data-pid='7' data-id='8' href=""></a>
	</p>
	<div data-pid='1' data-id='9'>
		<ul data-pid='1' data-id='10'>
			<li data-pid='10' data-id='11'>
				<a data-pid='11' data-id='12' href=""></a>
			</li>
		</ul>
	</div>
</div>

function getChildren(parent, arr) {
	if (parent.nodeType === 1) {
		var item = { ...parent.dataset, tag: parent.tagName.toLocaleLowerCase(), }
		arr.push(item)
		if (parent.hasChildNodes()) {
			var children = parent.childNodes
			for (var i = 0; i < children.length; i++) {
				if (children[i].nodeType === 1) {
					if (children[i].hasChildNodes) {
						if (!item.children)
							item.children = [];
						getChildren(children[i], item.children)
					}
				}
			}
		}
	}
}
function getTree() {
	var parent = document.getElementsByTagName('div')[0];
	var arr = []
	getChildren(parent, arr)
	return arr
}
console.log(getTree());