继承关系
document ---> HTMLDocument.prototype ---> Document.prototype
HTMLDocument.prototype={
__proto__:Document.prototype
}
常见方法，规则
1. getElementByld 方法定义在Document.prototypes上，即Element节点上不能使用
2. getElementsByName方法定义在HTMLDocunment.prototype上，即非html.document不能使用（xml document Element）
3. getElementsByTagName方法定义在Document.prototype和Element.prototype
4. HTMLDocument.prototype定义了一些常用的属性，body，head分别指文档中的<body><head>标签
5. Document.prototype上定义了documentElement属性，代指文档的根元素，HTML文档中，他总是指代<html>元素
6.getElementsByClassName,querySelectorAll,querySelector在Document.prototype,Element.prototype类中均有定义
小练习
1.遍历元素节点数
var div=document.getElementsByTagName('div')[0];
//定义查询函数
function search(root){
if(!root){return;}//递归跳出条件
console.log(root.parentElement.nodeName+"-->"+root.nodeName);
for (var i = 0; i < div.children.length; i++) {
search(root.children[i]);
}
}
search(div);
2.封装函数，返回元素e的第n层祖先元素节点
function searchparent(root,tier){
if(!root || !tier){return}//极端情况判断
var Tier=0; //定义一个计数器
function _searchparent(Root){
if(tier===Tier){
return Root;
}
Tier ++;
return _searchparent(Root.parentElement);
}
return _searchparent(root);
}
3.封装函数，返回元素e的第n个兄弟节点，n为正，返回后面的兄弟元素节点，n为负，返回前面的，n为0，返回自己。
function brother(root,tier){
if(!root){return}//极端情况判断
var Tier=0; //定义一个计数器
//封装一个子函数
function _brother(Root){
if(!Root){return}// 极端情况判断
//三种情况判断
if(tier>0){
if(tier===Tier){
console.log(Root);
}
Tier ++;
return _brother(Root.nextElementSibling)
}
if(tier===0){
console.log(Root);
}
if(tier<0){
if(tier===Tier){
console.log(Root);
}
Tier --;
return _brother(Root.previousElementSibling)
}
}
_brother(root);
}
//循环实现
function retSibling(e,n){
while(e&&n){
if(n>0){
e=e.nextElementSibling;
n--;
}else{
e=e.previousElementsibling;
n++;
}
}
return e;
}
//IE9以下兼容性问题
function retSibling(e,n){
while(e&&n){
if(n>0){
if(e.nextElementSibling){
e=e.nextElementSibling;
}else{
for(e=e.nextSibling; e&&e.nodeType !=1; e=e.nextSibling);
}
n--;
}else{
if(e.proviousElementSibling){
e=e.proviousElementSibling;
}else{
for(e=e.previousSibling; e&&e.nodeType !=1; e=e.previousSibling);
n++;
}
}
return e;
}
4.编辑函数，封装myChildren功能，解决以前部分浏览器的兼容性问题
Element.prototype.myChildren=function(){
var child=this.childNodes;
var len=child.length;
var arr=[];
for (var i = 0; i < len; i++) {
if(child[i].nodeType==1){
arr.push(child[i]);
}
}
}
基本操作–增
1.document.createElement();（常用）
增加或创建一个元素节点，
var div = document.createElement('str');
2.document.createTextNode();
增加或创建一个文本节点
var text = document.createTextNode('邓哥');
3.document.createComment();
增加或创建一个注释节点
var comment = document.createComment('this is comment');
4.document.createDocumentFragment();
创建文档碎片节点
基本操作–插
1.PARENTNODE.appendChild();
类似于数组的.push操作，可以把一个新创建的标签插入进去，也可以把一个已经存在的标签剪切进去。
var text = document.createTextNode('demo');
span.appendchilf(text);
2.PARENTNODE.insertBefore(a,b);
insert a，before b。在b标签前面插入a标签
div.insertBefore(strong,span);
//div里面的span标签前面插入strong标签
基本操作–删
1.parent.removeChild();
谋杀式方法
ii=div.removeChild(i);
console.log(ii)//i
//把div里面的i标签剪切出来，可以赋值给别人
2.child.remove();
es5里面的新方法，
i.remove()
//直接销毁，没有任何返回
基本操作–替换
1.parent.replaceChild(new,origin)
课后练习
封装一个函数insert.After(a,b); 类似于.insertBefore(a,b);
Element.prototype.insertAfter = function(targetNode,afterNode){
var beforeNode = afterNode.nextElementSibling;
if(beforeNode == null){
//后面没有元素的情况
this.appendChild(targetNode);
}else{
this.inserBefore(targetNode,beforeNode);
}
}
