1.HTML部分
<divid="box">
<p>我是p</p>
<div class="abc">我是div
<span id="text">我是span</span>
<p>sd</p>
</div>
<ul>
<li>我是li1</li>
<li>我是li2</li>
<li>我是li3</li>
<li>我是li4</li>
</ul>
</div>
<div id="res">
<h1>我是h1</h1>
<h2>我是h2</h2>
<h3>我是h3</h3>
<h4>我是h4</h4>
<h5>我是h5</h5>
<h6>我是h6</h6>
</div>
2.js部分
封装函数大部分会使用遍历
varoText = document.getElementById('text');
var oBox = document.getElementById('box');
/*----封装函数，返回该元素的第n层祖先元素-----*/
/* 1.返回第几层？ parentNoded 查询父节点
dom 节点
n 第几层祖先
*/
function getParent(dom,n){
for(var i=0;i<n;i++){
if(dom.parentNode===null){
return dom;
}
dom = dom.parentNode;
}
return dom;
}
getParent(oText,2) //那个元素开始，第几层
/*----封装myChildren函数，实现系统的children功能-----*/
// dom节点返回一个有dom的元素子节点组成的数组
//children功能得到子节点的数组，所以我们可以遍历每一项，把他组成数组
var arr = [];
function myChildren(dom){
for(var i=0;i<dom.childNodes.length;i++){ //搜索
if(dom.childNodes[i].nodeType===1){ //如果传进来的是元素节点
arr.push(dom.childNodes[i])
}
}
return arr;
}
myChildren(oBox)
/*-----封装hasChildren函数,判断有没有元素节点，要求不能使用children属性----*/
//如果dom元素有元素子节点，就返回true，否则flase
function hasChildren(dom){
for(var i=0;i<dom.childNodes.length;i++){
if(dom.childNodes[i].nodeType===1){
return true;
}
// else{
// return false;
// }
//不可以这样写，因为判断的时候，第一个是文档节点，nodeType为3，
//所以会走进else中，直接flase
}
return false;
}
hasChildren(oText)
/*----封装insertAfter函数,功能和insertBefore类似----*/
// 把A插入到B后面 就相当于把A插入到B的相邻兄弟的前面
var oDiv = document.createElement('div');
function insertAfter(A,B){
//console.log(B.nextElementSibling);
B.parentNode.insertBefore(A,B.nextElementSibling)
}
insertAfter(oDiv,oText)
/*----封装remove函数,使child.removeChild()能够删除自身----*/
function remove(dom){
dom.parentNode.removeChild(dom)
}
//remove(oBox);
/*----封装函数，实现元素节点内部的顺序，逆序----*/
// 使用appendChild 把节点插入到父节点的最后面 循环
var rRse = document.getElementById('res');
function reserve(dom){
for(var i=0;i<dom.children.length-1;i++){
/*
* i=0 dom.children[4]-->length-1-1-i //6-1-1-0
* i=1 dom.children[3]-->length-1-1-i //6-1-1-1
* i=2 dom.children[2]
* i=3 dom.children[1]
* i=4 dom.children[0]
*/
dom.appendChild(dom.children[dom.children.length-1-1-i])
}
}
reserve(rRse)
来源：https://www.cnblogs.com/aorange/p/11151951.html