渡一 18&19 选择器，节点类型&Dom基本操作

节点有：
元素节点 1
属性节点 2
文本节点 3
注释节点 8
document 9
DocumentFragment 11

 

节点的四个属性
nodeName:标签名，只读
nodeValue:节点的文本内容，可写
nodeType:节点类型，只读
attributes:Element节点的属性集合

 

找节点：（包含文本，属性等在内）
parentNode:父亲节点（最顶端的是documents）
childNodes:子节点们
firstChild:第一个节点
lastChild:最后一个节点
nextSibling:下一个兄弟节点
previousSibling:前一个兄弟节点

 

找元素节点（有很多兼容问题）

parentElement:返回父元素节点
children:只返回当前元素的元素节点，不找孙子
node.chilElementCount == node.children.length 当前元素节点的子元素个数（IE NO）
firstElementChild:第一个元素节点（IE NO）
lastElementChild：最后一个元素节点（IE NO）
nextElementSibling/previousElementSibling:后一个、前一个兄弟元素节点（IE NO）

function retElementChild(node){

    var temp = {
        length : 0,
        push : Array.prototype.push,
        splice : Array.prototype.splice
    },
    child = node.childNodes,
    len = child.length;

    for(var i=0;i<len;i++){
        if(child[i].nodeType === 1){
            temp.push(child[i]);
        }
    }
    return temp;
}

课堂练习
1.遍历元素节点树（在原型链上编程）
2.封装函数，返回元素e在第n层祖先元素节点
3.封装函数，返回元素e的第n个兄弟元素节点，n为正，返回后面的兄弟元素节点，n为负数，返回前面的，n为0，返回自已
4.编辑函数，封装myChild功能，解决以前部分浏览器的兼容性问题
5.自己封装hasChildren()方法，不可用childen属性

2.

function retParent(elem,n){

    while(n){
        elem = elem.parentElement;
        n--;
    }
    return elem;

}

3.

function retSibling(e,n){

    while(e && n){
        if(n>0){
            e = e.nextElementSibline;
            n--;
        }else{
            e = e.previousElementSibling;
            n++;
        }
    }
    return e;
}

兼容

function retSibline(e,n){

    while(e && n){
        if(n>0){
            if(e.nextElementSibline){
                e = e.nextElementSibline;
            }else{
                for(e=e.nextSibling; e.nodeType!= 1; e=e.nextSibline);
            }
            n--;
        }else{
            if(e.previousElementSibling){
                e = e.previousElementSibling;
            }else{
                for(e=e.previousSibling; e.nodeType!=1; e=e.previousSibling)
            }
            n++;
        }
    }
    return e;
}

 

4.

Element.prototype.myChild = 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]);
        }
    }
    return arr;
}

Dom基本操作

兼容是指IE9及以下的问题

层级关系

document-->HTMLDocument.prototype-->Document.prototoype-->Object.prototype

HTMLElment.prototype.abc = "demo";
var body = document.getElementsByTagName("body")[0];

 

增
document.createElement();
document.createTexNode();
document.createComment();
document.createDocumentFragment();

插
parentNode.appendChild();   //是剪切操作
parentNode.insetBefor(a,b); //insert a before b:在b前面插入a 

删
parent.removeChild(); //被杀
child.remove();       //自杀

 

element节点的一些属性

innerHTML();
innerText();
element.innerHTML //插入
element.innerHTML = "123";
element.innerHTML += "456";

 

element节点的一些方法

ele.setAttibute();
ele.getAttribute();

var aa = document.getElementsByTagName(*);
for(var i=0;i<all.length;i++){
    all[i].setAttibute("this-name".all[i].nodeName);
}

课堂练习

请编写一段js脚本生成下面这段Dom结构。要求使用标准的DOM方法或属性

<div class="example">
    <p class="slogan">test</p>
</div>

//揭示 dom.className可以读写class;

var div = document.createElement("div");
var p = document.createElment("p");
var text = document.createTexNode('test');
div.setAttibute("class","example");
p.setAttribute("class","slogan");

p.appendChild(text);
div.appendChild(p)
document.body.appendChild(div)

课后作业
1.封装函数insertAfter();功能类似insertBefor();
提示：可忽略老版本浏览器，直接在Element.prototype上编写
2.将目标节点内部的节点顺序逆序；
eg:<div><a></a><em></em></div>
<div><em></em><a></a></div>

1.

Element.prototype.insertAfter = function(target,afterNode){
    var beforeNode = afterNode.nextElementSibline;
    if(beforeNode != null){
        this.appendChild(target);
    }else{
        this.insetBefore(target,beforeNode);
    }

}