《精通javascript》5，6章小结(二)

　　继续5，6章小结(一)的内容，作者认为我们会用css中的选择符来定位HTML DOM中的元素，给其添加样式，那么为什么不利用css选择符来定位得到我们想要的DOM节点呢，由于这样的想法产生了jquery中灵活强大的选择器(selector)帮助定位查找元素，作者也简要说明了下xpath。

如何获得一个元素的文本内容，如:

<p><strong>hello</strong>how are you doing?</p>

假定<strong>对应strongElem那么:

    strongElem.innerText; //非Mozilla内核的浏览器
    
    strongElem.firstChild.nodeValue;  //适合所有平台

文中给出了一个通用的取出元素文本内容的函数

    function text(e) {
        var t = "";
        
        //如果单个元素传入，获取它的子节点
        //否则假设e是个节点数组
        e = e.childNodes || e;
        
        //遍历所有的子节点
        for(var j = 0; j < e.length; j++) {
        　　//如果不是一个元素，追加到t
            //否则递归遍历它的所有子节点
            t += e[j].nodeType != 1 ?  e[j].nodeValue : text(e[j].childNodes); 
        }
        //返回匹配的文本
          
        return t;
    }

获取一个元素内的HTML，我们很快会想到innerHTML，但它只对HTML DOM有效对XML DOM就不行了。

关于元素的属性，有个判定一个元素是否具有某个指定属性的方法

    function hasAttribute(elem, name) {
        return elem.getAttribute(name) !== null;
    }

一对HTML，XML DOM的通用方法：getAttribute和setAttribute  例：

    id("everywhere").getAttribute("id") ;

    tag("input")[0].setAttribute("value", "your name");

除了这对标准的方法，还有一些快速访问元素属性的方式，如：

    tag("div")[0].id = "main";

    tag("input")[0].value;

但是有一些属性如class --> className,  float-->cssFloat,  text-->cssText,因为像class，float，text这些词本来就是javascript中的保留字。

文中有个attr方法，通过参数个数决定它的作用是设置属性值，还是获取属性值：

    function attr(elem, name, value) {
        //确保提供了一个有效的name
        if(!name || name.constructor != String) return "";

        //理解不合常规的命名
        name = {'for':'htmlFor', 'class':'className'}[name] || name;

        //如果用户传入value
        if(typeof value != 'undefined') {
            //先用快速访问法
            elem[name] = value;

            //如果可以，用标准的setAttribute
            if(elem.setAttribute)  elem.setAttribute(name, value);
        }

        //返回属性值
        return elem[name] || elem.getAttribute(name) || '';
    }

这个方法既能读又能取，参数中如果不带value那么返回已有的属性值，如果带了value，那么给对应的属性设置值，这和jquery中的attr基本是一样的，只不过我们用jquery的时候把DOM元素封装成了jquery对象。

修改DOM包括创建，插入，删除等，有了这些我们就能打造动态的页面效果，xhtml是xml一个子集，在创建元素时带个namespace

    function create(elem) {
        return document.createElementNS ?
            document.createElementNS('http://www.w3.org/1999/xhtml', elem) :
            document.createElement(elem);
    }

对于插入DOM，有两个标准方法：

    parentBeforeNode.insertBefore(nodeToInsert, beforeNode)

    parentElem.append(nodeToInsert)

相信大家对这两个方法并不陌生，书中基于这两个方法做了函数封装

    function before(parent, before, elem) {

        //检查是否提供父节点,如果像这样调用:before(elem1, elem2)将elem2插到elem1之前
        if(elem == null) {
            elem = before;
            before = parent;
            parent = before.parentNode;
        }

        parent.insertBefore(checkElem(elem), before);

    }

    function append(parent, elem) {
        parent.appendChild(checkElem(elem));
    }

    function checkElem(elem) {
        //如果传入的是个字符串，那么转换成TextNode
        return elem && elem.constructor == String ?
            document.createTextNode(elem) : elem;
    }

向元素中注入HTML，tag("ul")[0].innerHTML = "<li>Cats</li><li>Dogs</li><li>Mice</li>";

比起上面的方法来说，确实方便，但用innerHTML有以下缺点：

1.就像之前提到的，它不支持纯粹的XML

2.innerHTML的赋值是把元素内的内容全部覆盖掉，很不灵活

文章中作者给出了一个很不错的解决方案：

    function checkElem(a) {
        var r = [];
        
        //如果a不是数组，把a初始化为数组
        if(a.constructor != Array) a = [a];
        
        for(var i = 0; i < a.length; i++) {
        
            //如果是构造HTML字符串
            if(a[i].constructor == String) {
                //创建一个临时元素来持有HTML
                var div = document.createElement("div");
                
                //注入这个HTML,把它转变成DOM结构
                div.innerHTML = a[i];
                
                //从这个临时的div中取出DOM元素
                for(var j = 0; j < div.childNodes.length; j++) {
                    r[r.length] = div.childNodes[j];
                }

            } else if (a[i].length) {
                //如果是它是个数组，假设是个DOM节点的数组
                for(var j = 0; j < a[i].length; j++) {
                    r[r.length] = a[i][j];
                } 
            else { 
                //否则就假设它是个DOM节点
                r[r.length]  = a[i];
            }
                
            return r; //参数a解析后的dom节点数组
        }
    }

再把原来的before，append函数扩展下：

    function before(parent, before, elem) {
        if(elem == null) {
            elem = before;
            before = parent;
            parent = before.parentNode;
        }

        //得到新的元素数组
        var elems = checkElem(elem);

        //倒序遍历数组elems
        for(var i = elems.length - 1; i >= 0; i--)
            parent.insertBefore(elems[i], before);
    }

    function append(parent, elem) {
        var elems = checkElem(elem);
        
        for(var i = 0; i < elems.length; i++)
            parent.appendChild(elems[i]);
    }

然后我们就可以这样调用了append(first(tag('ul')[0]), '<li>Mouse trap.</li>');而之前第二个参数只能是个单独的节点(如<p>,<li>或者textNode);如此一来大大增强了可用性。

小结的第二部分就到这吧。。测试代码下载