JavaScript关于DOM操作的个人笔记

上期题目解答

1.遍历元素节点树，要求不能用children属性

Element.prototype.retElementChild = function(){//在Element上定义,节点都能调用
	var temp = {//定义一个类数组
    	length : 0,//类数组必须有length属性
    	push : Array.prototype.push,//有push属性，length可以自动递增
    	splice : Array.prototype.splice//有该属性，输出时才会以数组形式输出([])，否则还是({})
    },
    child = this.childNodes;//this指向调用者,保存它子节点
    len = child.length;//保存子节点长度
    for(var i = 0;i < len;i ++){//从0开始,即循环length-1次
         if(child[i].nodeType === 1){//nodeType=1为元素节点
              temp.push(child[i]);//如果问是否有元素节点return true
         }
    }
    return temp;//return false
}

2.封装函数，返回元素e的第n层祖先元素

function reGrand(elem,n){//传入目标元素和n
    while (elem && n) {//如果节点不存在或者找到n层祖先
         elem = elem.parentElement;
         n--;
    }
    return elem;
}

3.封装函数，返回元素e的第n个兄弟节点，n为正，返回后面的兄弟节点，n为负，返回前面的，n为0，返回自己。

function retSibling(e,n){
     while(e && n){//判定循环时e是否为null
          if(n > 0){//如果输入的是正数
               if(e.nextElementSibling){//下一个兄弟元素节点存在
                    e = e.nextElementSibling;
               }else{//ie9.0及以下不支持nextElementSibling方法,用nextSibling
                    for(e = e.nextSibling;e && e.nodeType != 1;e = e.nextSibling);
                    //e.nodeType为1即不满足循环条件，退出循环
               }
          	   n --;//循环一次-1
          }
          if(n < 0){//如果输入负数
               if(e.previousElementSibling){
                    e = e.previousElementSibling;
               }else{
                    for(e = e.previousSibling;e && e.nodeType != 1;e = e.previousSibling);
               }
               n ++;//循环一次+1
           }
	 }
     return e;
}

一、DOM操作

1.增加

创建元素节点：document.createElement();

a = document.createElement('a');

创建文本节点：document.createTextNode();

text=document.createTextNode("Hello World");

创建注释节点：document.createComment();

c=document.createComment("this is comment");

2.插入

添加子节点：PARENTNODE.appendChild();

var a = document.createElement('a');
var body = document.getElementsByTagName('body')[0];
body.appendChild(a);

这里appendChild是剪切操作

在这里插入代码片

将a插入到b之前：PARENTNODE.insertBefore(a, b):
这里insertBefore也是剪切操作

var span = document.getElementsByTagName('span')[0];
var p = document.getElementsByTagName('p')[0];
var body = document.getElementsByTagName('body')[0];
body.insertBefore(span,p);

3.删除

parent.removeChild()：通过父亲干掉（他杀）

var p = document.getElementsByTagName('p')[0];
var body = document.getElementsByTagName('body')[0];
body.removeChild(p);

elem.remove()：通过自己干掉（自杀）

var p = document.getElementsByTagName('p')[0];
p.remove();

4.更换

用新的节点更换目标节点：parent.replaceChild(new, origin);
这里replaceChild也是剪切操作

var p = document.getElementsByTagName('p')[0];
var span = document.getElementsByTagName('span')[0];
var body = document.getElementsByTagName('body')[0];
body.replaceChild(p,span);

二、Element节点的一些属性

innerHTML：属性设置或返回表格行的开始和结束标签之间的 HTML

var body = document.getElementsByTagName('body')[0];
body.innerHTML = `<div class='box'>123</div>`;//可以直接写代码
//会将父级里面的内容更换成设置的内容

innerText：如果有文本就替换目标文本，否则添加(火狐不兼容)，火狐提供textContent(但是老版本IE又不支持textContent)

var p = document.getElementsByTagName('p')[0];
p.innerText = 123;

三、Element节点的一些方法

ele.setAttribute()：创建或改变某个新属性，如果指定属性已经存在,则只设置该值。

var p = document.getElementsByTagName('p')[0];
p.setAttribute('class','content');

ele.getAttribute()：通过名称获取属性的值。

var p = document.getElementsByTagName('p')[0];
console.log(p.getAttribute('class'));

四、习题练习

1.封装函数insertAfter()；功能类似insertBefore()，即将目标元素放在指定元素后面。
答案下期揭晓

博主开始运营自己的公众号啦，感兴趣的可以关注“飞羽逐星”微信公众号哦，拿起手机就能阅读感兴趣的博客啦！