05-DOM的基本操做 封装函数

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)