JavaScript DOM 编程之基础篇

1.节点层次
    ①Node类型
        a.每个节点都有nodeType属性，表示节点的类型。
            元素节点(1)、属性节点(2)、文本节点(3)、CDATASection节点(4)、
            注释节点(8)、文档节点(9)、DocumentType节点(10)、DocumentFragment节点(11)
        b.nodeName和nodeValue属性，表示节点标签名和节点值
            eg:
            html部分：<div style="width:100px;height:100px;border:1px solid #ccc">yang</div>
            js部分：
            var div = document.querySelector("div"); // 获取div元素
            alert(div.nodeType); // 1, 节点类型为元素节点
            alert(div.nodeName); // DIV, 节点标签名为DIV
            alert(div.nodeValue); // null， 节点类型为null
        c.节点关系
            1)每个节点有childNodes属性，其中保存NodeList对象，对象有item()、length等属性方法
            2)每个节点有父节点parentNode属性
            3)每个节点有同胞节点previousSibing和nextSibing属性
            4)每个节点有子节点lastChild和firstChild属性
            5)每个节点有hasChildNodes()方法,表示如果有子节点返回true
            6)每个节点有文档节点ownerDocument属性
        d.操作节点
            1)向childNodes节点列表末尾添加节点的appendChild(newNode)方法
            2)向childNodes节点列表的任意位置添加节点的insertBefore(newNode, position)方法
            3)替换childNodes节点列表的任意节点的replaceChild(newNode, replacedNode)方法
            4)向childNodes节点列表移除节点的removeChild(node)方法
        e.其他方法
            1)复制节点的cloneNode(flag)方法，flag表示是否进行深复制(拷贝DOM树)
            2)normalize()方法，使得节点标准化。比如删除空文本、合并两个相邻的文本节点
    ②Document类型 表文档类型
        a.特征 nodeType(9)、nodeName(#document)、nodeValue(null)、parentNode(null)、ownerDocument(null)
        b.文档的子节点
            1) 子节点document.documentElement表示html元素
            2) 子节点document.body表示body元素
        c.文档信息
            1) 子节点document.title表示文档标题
            2) 子节点document.URL、document.domain、document.referrer与网友请求有关
        d.查找元素
            1) 通过id查找document.getElementById()
            2) 通过标签名查找document.getElementsByTagName()
            3) 通过name查找document.getElementsByName(),HTMLDocument类型专有
        e.特殊集合
            1) document.anchors,包含文档中所有带name特性的<a>元素
            2) document.forms,包含文档中所有的<form>元素
            3) document.images,包含文档中所有的<image>元素
            4) document.links,包含文档中所有带href特性的<a>元素
        f.DOM一致性检测      document.implementation.hasFeature() + 特殊的能力检测
        g.文档写入  write()、writeln()、open()、close()
    ③Element类型  表元素类型
        a.特征 nodeType(1)、nodeName(标签名)、nodeValue(null)、parentNode(Document/Element)
        b.HTML元素    标准特性    id、title、lang、dir、className
        c.属性特性  getAttribute()、setAttribute()、removeAttribute()
        d.attributes属性，包含NameNodeMap，有getNamedItem()、setNamedItem()、item()、removeNamedItem()
            eg: 遍历属性
            html部分：<div name="yang" id="yang">yang</div>
            js部分：
            function outputAttributes(element){
                var pairs = new Array(),
                attrName, attrValue, i, len;
                for (i=0, len=element.attributes.length; i < len; i++){
                    attrName = element.attributes[i].nodeName;
                    attrValue = element.attributes[i].nodeValue;
                    if (element.attributes[i].specified) {      // less ie7
                        pairs.push(attrName + "=\"" + attrValue + "\"");
                    }
                }
                return pairs.join(" ");
            }
        e.创建添加元素    document.body.appendChild(document.createElement(eleName));
        f.元素的子节点    在不同浏览器中，子节点数量的计算不太一致，我们需要过滤
            eg: 查找子节点数量
                html部分：<ul id="myList">
                            <li>Item 1</li>
                            <li>Item 2</li>
                            <li>Item 3</li>
                          </ul>
                js部分：for (var i=0, len=element.childNodes.length; i < len; i++){
                            if (element.childNodes[i].nodeType == 1){   // 忽略文本节点，只求元素节点
                                //执行某些操作
                            }
                        }
    ④Text类型 表文本类型
        a.特征 nodeType(3)、nodeName(#text)、nodeValue(包含的文本)、parentNode(Element)
        b.操作节点中的文本  appendData()、deleteData()、replaceData()、insertData()、splitText()、
        substringData()
        c.可以用data属性访问文本节点内容
        d.创建文本节点    div.appendChild(document.createTextNode(文本));
        e.规范化文本节点   ele.normalize()
        f.分割文本节点        ele.splitText()
    ⑤Comment类型  表注释类型
        a.特征 nodeType(8)、nodeName(#comment)、nodeValue(包含的注释)、parentNode(Element/Document)
        b.可以用data属性访问注释节点内容
        c.创建注释节点    document.createComment(注释内容);
    ⑥CDATASection类型
        a.特征 nodeType(4)、nodeName(#cdata-section)、nodeValue(CDATA的内容)、parentNode(Element/Document)、没有子节点
    ⑦DocumentType类型 doctype声明       不是所有浏览器都支持
        a.特征 nodeType(10)、nodeName(doctype 的名称)、nodeValue(null)、parentNode(Document)
    ⑧DocumentFragment类型 "轻量级"文档
        a.特征 nodeType(11)、nodeName(#document-fragment)、nodeValue(null)、parentNode(null)
        b.优点    作为一个仓库，避免了反复渲染
            eg: 先将li添加到fragment中，然后再将fragment添加到ul中
                var fragment = document.createDocumentFragment();
                var ul = document.getElementById("myList");
                var li = null;
                for (var i=0; i < 3; i++){
                    li = document.createElement("li");
                    li.appendChild(document.createTextNode("Item " + (i+1)));
                    fragment.appendChild(li);
                }
                ul.appendChild(fragment);
    ⑨Attr类型 属性节点
        a.特征 nodeType(2)、nodeName(属性键)、nodeValue(属性值)、parentNode(null)
        b.属性 name、value、specified
2.DOM操作技术
    ①动态脚本
        eg: 跨浏览器兼容动态脚本
            function loadStringScript(code) {
                var script = document.createElement("script");
                script.type = "text/javascript";
                try {
                    script.appendChild(document.createTextNode(code));
                } catch (ex) {
                    script.text = code; // less ei 
                }
                document.body.appendChild(script);
            }
            loadStringScript("alert('aaa');");
    ②动态样式
        a.引用外部文件
            eg：动态添加link标签
                function loadStyles(url) {
                    var link = document.createElement("link");
                    link.type = "text/css";
                    link.rel = "stylesheet";
                    link.href = url;
                    document.getElementsByTagName("head")[0].appendChild(link);
                }
                loadStyles("css/example1.css");
        b.行内样式
            eg：动态添加style代码
                function loadStyles(css) {
                    var style = document.createElement("style");
                    try {
                        style.appendChild(document.createTextNode(css));
                    } catch (ex) {
                        style.styleSheet.cssText = css;
                    }
                    document.getElementsByTagName("head")[0].appendChild(style);
                }
                loadStyles("body {background: green;}");
    ③操作表格   在DOM Table中有许多操作表格的API共我们使用
        //创建table
        var table = document.createElement("table");
        table.border = 1;
        table.width = "100%";
        //创建tbody
        var tbody = document.createElement("tbody");
        table.appendChild(tbody);
        //创建第一行
        tbody.insertRow(0);
        tbody.rows[0].insertCell(0);
        tbody.rows[0].cells[0].appendChild(document.createTextNode("Cell 1,1"));
        tbody.rows[0].insertCell(1);
        tbody.rows[0].cells[1].appendChild(document.createTextNode("Cell 2,1"));
        //创建第二行
        tbody.insertRow(1);
        tbody.rows[1].insertCell(0);
        tbody.rows[1].cells[0].appendChild(document.createTextNode("Cell 1,2"));
        tbody.rows[1].insertCell(1);
        tbody.rows[1].cells[1].appendChild(document.createTextNode("Cell 2,2"));
        //将表格添加到文档主体中
        document.body.appendChild(table);
    ④使用NodeList 与NamedNodeMap和HTMLCollection都属于动态的“数组”.每当文档结构发生变化时,他们始终保持最新、最准确的信息
        eg: 下面代码会导致死循环
            var divs = document.getElementsByTagName("div"),
            i, div;
            for (i=0; i < divs.length; i++){ // 因为divs.length永远是增加的
                div = document.createElement("div");
                document.body.appendChild(div);
            }
        eg: 把上述代码修改一番
            var divs = document.getElementsByTagName("div"),
            i, len, div;
            for (i=0, len = divs.length; i < len; i++){ // 因为divs.length永远是增加的
                div = document.createElement("div");
                document.body.appendChild(div);
            }