DOM

增

1.创建元素节点

var h1 = document.createElement("h1");

2.获取body

var body = document.body;

3.拼接节点（把h1拼接到body中）
例1:

body.appendChild(h1);

例2：只适用于body内部比较少元素的时候 innerHTML会覆盖从之前的内容

body.innerHTML = "<h1></h1>";

4.创建文本节点(被文本节点拼接到h1标题内)

var text = document.createTextNode("我是标题");
h1.appendChild(text);

5.创建属性节点

var attr = document.createAttribute("title");

attr.value = "我是一个属性值";//给属性节点赋值

h1.setAttributeNode(attr);//把属性节点拼接到h1中去

直接设置属性值 setAttribute(name,value)

h1.setAttribute('title','我是标题的title属性的值');

6.在h1上面插入header元素

var header = document.createElement('header');
header.innerHTML = "我是header";
body.insertBefore(header,h1);//插入到h1上面

插入元素在前，目标元素在后面
7.在h1下面插入footer元素

var footer = document.createElement('footer');
body.appendChild(footer);

8.创建a标签

      var a = document.createElement('a');
      a.innerHTML = "百度一下";
      a.setAttribute('href',"http://www.baidu.com");
      footer.appendChild(a);

删除

1.删除a标签

footer.removeChild(a)

不知道父元素的情况下如何删除

 a.parentNode.removeChild(a);

封装函数删除

function remove(obj) {
obj.parentNode.removeChild(obj);
};
remove(obj);

改

1. 替换节点 replaceChild(new.old)
   创建img标签 替换a标签

var img = document.createElement('img');
    img.setAttribute('src', "keep.jpg");
    footer.replaceChild(img,a)//使用image标签替换a标签

查

1.获取元素
getElementById
getElementsByTagName
getElementsByClassName
querySwlector()
querySwlectorAll()
2.获取兄弟下节点(nextSibling)

console.log(header.nextSibling);

3.获取兄弟上上节点(previousSibling)

console.log(footer.previousSibling);

4.获取父节点(parentNode)

console.log(h1.parentNode);

5.获取子节点(children)有可能返回一个数组

console.log(footer.children);