增
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);
改
- 替换节点 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);
