js（十二）---对于DOM的操作

上一篇说明白了，DOM是用来做什么的，里面都是什么，作用是用来干什么的，今天就学习一下具体操作。

增加操作

1. 创建元素节点 createElement

我们可以通过document.createElement(‘div’);这个方法来创建一个元素，里面的参数填写我们要创建的标签名称，像div、p、span等等。记住这个时候创造的只是，一个标签，跟文档中的元素没有什么关系。

var p = document.createElement('p')

2.创建文本节点 document.createTextNode

我们可以通过document.createTextNode(‘abcd’)方法来创建一个文本节点，里面的参数填写我们的文本内容。

var text = document.creatTextNode('hello word');

3.创建注释节点 document.createComment

我们可以通过document.createComment(‘comment’);方法来创建一个注释节点，参数写我们要写的注释内容。

var comment = document.createComment('comment');   

将节点插入到节点中

1. parentNoode.appendChild(child);

这个是父级调用的方法，它会将child元素插入到父级里面，而且是放到逻辑后面的位置上。

div.appendChild(text);
div.appendChild(comment);   

2.parentNoode.insertBefore(a, b);

这个依然是父节点调用的方法，它的意思是将a插入到b前面的位置上，其中b要求是这个父级的子节点。这个方法可以记作为 insert a before b;

var span = document.createElement('span');
div.insertBefore(span, comment);   

按照逻辑，有insertBefore（），应该有insertAfter（）。那告诉你句实话吧，当然没有了。但是我们可以写一个的。

Element.prototype.insertAfter = function(newChild,referChild){
            var len = this.childNodes.length;
            if(referChild.nextSibling){
                console.log(111)
                this.insertBefore(newChild,referChild.nextSibling)
            }
            else{
                this.appendChild(newChild)
            }
        }

最好在元素的原型链上编程，这样就可以直接调用了。

删除操作

这个方法依然是父级调用的，参数就是要删除的子节点，其实实际上是剪切，这个方法会把我们删除掉的元素给返回，我们可以用一个变量去保存这个被删除的元素。

var div = document.body.remove(div);   

这样我们的div变量就可以保存刚才被删除的div这个元素

替换操作

parentNode.replaceChild(new, origin)

这个方法同样是父级调用，用新的元素new来替换原来的origin元素，原来的被替换掉的元素可以被返回，我们可以像删除操作那样用一个变量来保存。

属性（property）

1.innerHTML

这个属性可以用字面意思来理解，元素里面的HTML结构。

div.innerHML = '<div>123</div>';   

我们可以直接通过这个属性来改变元素内部的结构和内容，不过注意它会直接删除掉以前的所有结构，如果以前内容还有其他的节点的话，使用的时候就要小心了。

2.innerText/textContent

innerText老版本的火狐浏览器不兼容，textContent老版本的IE浏览器不兼容。

这个属性可以直接调出来元素内部的文本信息，若果这个元素还有很多的子元素的话，那么会把子元素里面的文本信息一起返回。

不过需要注意的是，如果我们要改写innerText或者textContent的话，它会像innerHTML一样，先把内部的所有html结构先删除掉，然后再写入text文本，因此里面有html结构的时候写入也要小心。

• 这里提一下，如果我们有很多字符串要添加到一个元素的内部的话，虽然用innerHTML或者innerText方法，但是却不是用innerHML += str的方法，因为+=操作符的效率极低，当字符串很多的时候会非常非常消耗性能。

遇到这种情况我们一般是用数组的join方法将字符串全部连接成一个字符串，然后一次性写入innerHTML。

方法（methods）

1.ele.setAttribute();

这个方法可以设置元素的属性（特性），比如class、id等一些行间属性。

div.setAttribute('id', 'demo');   
//也可以直接设置样式
div.setAttribute('style','color: red;font-size: 20px')

2.ele.getAttribute();

这个方法是获取元素的行间属性。

• 同样这里需要提一下，每个元素自带的行间属性都有自己特殊的功能，而我们通过自己给他们设置的属性并没有任何功能，因此我们可以来赋予他们功能和用处。

• 还有一点，我们在后面改变元素的样式的时候，通常不是直接修改他的css样式，而是事先写好它应该变成的样式，然后装进一个class里面，我们直接修改他的类名而不是css样式。

实际操作

1.用DOM动态生成这样一个结构：

<div class=”example”>

      <p class=”slogan”>HelloWorld</p>

</div>

我认为中规中矩的写法是这个样子的：

var div = document.createElement('div'),
p = document.createElement('p'),
text = document.create('HelloWorld');
div.setAttribute('class', 'example');
p.setAttribute('class', 'slogan');
p.appendChild(text);
div.appendChild(p);
document.body.append(div);    

这里我们为标签赋类名的值的时候可以不用setAttribute，可以直接用className。

div.className = 'example';
p.className = 'slogan';    

2.封装remove()函数，使得child.remove()可以销毁自身。

Element.prototype.remove = function () {
      var parent = this.parentNode;
      parent.removeChild(this);
}   

3.将目标节点内部的节点顺序逆序。

Element.prototype.reverseElement = function(){
      var len = this.childNodes.length,
            child,
            first = this.firstChild;
      for (var i = 0; i < len - 1; i++){
            child = this.lastChild;
            this.insertBefore(child, first);
      }
}

以第一个节点为目标节点，一次把最后一个节点放在第一个节点之前，这样在循环的时候，都把最后一个放在第一个之前，在最后一个节点变成第一个节点之前停止，这样就完成一个逆序了。