上一篇介绍了一下DOM的一些基础的知识,这里我整理了一些有关上一篇知识点的一些封装函数。
1.遍历元素节点树
1. function retChild(node) {
2. var child = node.childNodes,
3. len = child.length;
4. for(var i = 0; i < len; i++){
5. if(child[i].nodeType === 1) {
6. console.log(child[i]);
7. child[i].hasChildNodes() && retChild(child[i]);
8. }
9. }
10. }
2.封装函数,返回元素e的第n层父节点
1. function retParent(e, n) {
2. var n = n || 0; // 进行简单的容错检测
3. if(n === 0) {
4. return e;
5. }
6. for(var i = 0; e && i < n; i++) {
7. e = e.parentNode;
8. }
9. return e;
10. }
3.封装函数,返回元素e的第n个兄弟元素节点,如果n为正,返回后面的兄弟元素节点,n为负,返回前面的,n为0,返回自己
1. function retSibling(e, n){
2. var n = n || 0;
3. if(n === 0) {
4. return e;
5. }
6. while(e && n != 0) {
7. if(n > 0) {
8. if(e.nextElementSibling){ // 如果不是ie浏览器
9. e = e.nextElementSibling;
10. }else { // 如果是ie浏览器
11. e = e.nextSibling;
12. while(e && e.nodeType != 1) {
13. e=e.nextSibling;
14. }
15. }
16. n–;
17. }else {
18. if(e.previousElementSibling) {
19. e = e.previousElementSibling;
20. }else {
21. e = e.previousSibling;
22. while(e && e.nodeType != 1) {
23. e=e.previousSibling;
24. }
25. }
26. n++;
27. }
28. }
29. return e;
30. }
4.封装函数,实现children功能,最好哎原型链上编程
1. Element.prototype.getChildren() {
2. var child = this.childNodes,
3. len = child.length,
4. obj = {
5. ‘length’: 0,
6. ‘push’: Array.prototype.push
7. }
8. for(var i = 0; i < len; i++){
9. if(child[i].nodeType === 1) {
10. obj.push(child[i]);
11. }
12. }
13. return obj;
14. }
5.封装是否有元素子节点的方法
1. Element.prototype.hasChildren = function () {
2. var child = this.childNodes,
3. len = child.length;
4. for( var i = 0; i < len; i++){
5. if(child[i].nodeType == 1) {
6. return true;
7. }
8. }
9. return false;
10. }
上面的代码都是我自己写的,可能有些地方不是最优的解法,大家看看就好~