1. 节点及其类型:

北京

    1). 元素节点
    2). 属性节点: 元素的属性, 可以直接通过属性的方式来操作. 
    3). 文本节点: 是元素节点的子节点, 其内容为文本. 
2. 在 html 文档的什么位置编写 js 代码?
    1). 直接在 html 页面中书写代码.
    Click Me!
缺点: 
    ①. js 和 html 强耦合, 不利于代码的维护
    ②. 若 click 相应函数是比较复杂的, 则需要先定义一个函数, 然后再在 onclick属性中完成对函数的引用, 比较麻烦
    2). 一般地, 不能在 body 节点之前来直接获取 body 内的节点, 因为此时 html 文档树还没有加载完成, 获取不到指定的节点:
    
    
     Untitled Document
    
        var cityNode = document.getElementById("city");
        //打印结果为 null.
        alert(cityNode);
    
    
    3). 可以在整个 html 文档的最后编写类似代码, 但这不符合习惯
    4). 一般地, 在 body 节点之前编写 js 代码, 但需要利用 window.onload 事件,该事件在当前文档完全加载之后被触发, 所以其中的代码可以获取到当前文档的任何节点.    
    
    
     Untitled Document
    
        window.onload = function(){
        var cityNode = document.getElementById("city");
        alert(cityNode);
        };
    
    
    5)为window.onload赋值的方式是;
    window.onload = function(){
        //
    }
也可以
    function myfunc(){
        //
    }
    window.onload = myfunc;
    但不能这样：因为这样的赋值将导致myfunc函数执行，而赋值给window.onload的将是函数的执行结果，赋值的应该是一个函数的引用。window.onload=myfunc();
3. 获取元素节点:
    1).document.getElementById: 根据 id 属性获取对应的单个节点,id应该保证在文档中的唯一性
        var element = document.getElementById("id");
    2).document.getElementsByTagName: 
        根据标签名获取指定节点名字的数组, 数组对象 length属性可以获取数组的长度
        var paras = document.getElementsByTagName(“p”);
    3).document.getElementsByName: 
        根据节点的 name 属性获取符合条件的节点数组, 但 ie 的实现方式和 W3C 标准有差别: 
        在 html 文档中若某节点(li)没有 name 属性,则 ie 使用 getElementsByName 不能获取到节点数组, 但火狐可以.
        var names= document.getElementsByName(“name”);
    4). element.hasChildNodes();
        该方法用来检查一个元素是否有子节点，返回值是 true 或 false
        文本节点和属性节点不可能再包含任何子节点，所以对这两类节点使用 hasChildNodes 方法的返回值永远是 false.

    如果 hasChildNodes 方法的返回值是 false，则 childNodes,firstChild,lastChild 将是空数组和空字符串
        var booleanValue = element.hasChildNodes();

4. 获取属性节点:通过元素节点.的方式来读写属性
    通过元素节点的 getAttributeNode 方法来获取属性节点,然后在通过 nodeValue 来读写属性值

5. 获取元素节点的子节点(**只有元素节点才有子节点!!):
    1). childNodes 属性获取全部的子节点, 但该方法不实用. 因为如果要获取指定的节点的指定子节点的集合, 可以直接调用元素节点的 getElementsByTagName() 方法来获取. 
    2). firstChild 属性获取第一个子节点，通常用于获取文本节点。
    3). lastChild  属性获取最后一个子节点

6. 获取文本节点:
    1）获取文本节点所在的元素节点
        var bjnode=document.getElementById("bj");
    2）调用firstChild方法找到文本节点
        var bjtextnode=bjnode.firstChild;
    3）通过操作文本节点的属性来读写文本节点的值
        alert(bjtextnode.nodeValue);
        bjtextnode.nodeValue="ss";

7.节点的属性:
    1).nodeName: 代表当前节点的名字. 只读属性. 
        **如果给定节点是一个文本节点, nodeName 属性将返回内容为 #text 的字符串
    2).nodeType：返回一个整数, 这个数值代表着给定节点的类型. 只读属性. 
        1 -- 元素节点, 2 -- 属性节点, 3 -- 文本节点
    3).nodeValue：返回给定节点的当前值(字符串). 可读写的属性
        ①. 元素节点, 返回值是 null.
        ②. 属性节点: 返回值是这个属性的值
        ③. 文本节点: 返回值是这个文本节点的内容

8. 创建元素节点:var linode=document.createElement("li");
    按照给定的标签名创建一个新的元素节点. 
    方法只有一个参数：被创建的元素节点的名字, 是一个字符串.
    方法的返回值：是一个指向新建节点的引用指针. 返回值是一个元素节点, 所以它的 nodeType 属性值等于 1.
    **新元素节点不会自动添加到文档里, 它只是一个存在于 JavaScript 上下文的对象. 

9.创建属性节点:先需要创建一个元素节点，然后通过.的方式为其属性赋值就可以了
    var anode=document.createElement("a");
    anode.href="deleteEmp?id=xxx";

10. 创建文本节点:
    1). createTextNode(): var dtnode=document.createTextNode("delete")
    创建一个包含着给定文本的新文本节点. 这个方法的返回值是一个指向新建文本节点引用指针. 它是一个文本节点, 所以它的 nodeType 属性等于 3.
    方法只有一个参数：新建文本节点所包含的文本字符串. 新元素节点不会自动添加到文档里
                         
11. 为元素节点添加子节点:
    1). appendChild(): var reference = element.appendChild(newChild): 给定子节点 newChild 将成为给定元素节点 element 的最后一个子节点.
    方法的返回值是一个指向新增子节点的引用指针.
        var tr=document.createElement("tr");
        var nametd=document.createElement("td");
        tr.appendChild(nametd);                      
12. 节点的替换:
    1). replaceChild(): 把一个给定父元素里的一个子节点替换为另外一个子节点
        element.replaceChild(newChild,oldChild);
        返回值是一个指向已被替换的那个子节点的引用指针
        var bjnode=document.getElementById("bj");
        var rlnode=document.getElementById("rl");
        var gamenode=document.getElementById("game");
        gamenode.replaceChild(bjnode,rlnode);
    2). 该节点除了替换功能以外还有移动的功能.  
    3). 该方法只能完成单向替换, 若需要使用双向替换, 需要自定义函数:
    /**
    * 互换 aNode 和 bNode
    * @param {Object} aNode
    * @param {Object} bNode
    */
    function replaceEach(aNode, bNode){
        if(aNode == bNode){
            return;
    }
        var aParentNode = aNode.parentNode;
        //若 aNode 有父节点
            if(aParentNode){
                var bParentNode = bNode.parentNode;
                //若 bNode 有父节点
                if(bParentNode){
                    var tempNode = aNode.cloneNode(true);
                    bParentNode.replaceChild(tempNode, bNode);
                    aParentNode.replaceChild(bNode, aNode);
                }
            }
    }  
13. 插入节点:
    1). insertBefore(): 把一个给定节点插入到一个给定元素节点的给定子节点的前面
        element.insertBefore(newNode,targetNode);
        节点 newNode 将被插入到元素节点 element 中并出现在节点 targetNode 的前面. 节点 targetNode 必须是 element 元素的一个子节点。
        var citynode=document.getElementById("city");
        var bjnode=document.getElementById("bj");
        var rlnode=document.getElementById("rl");
        citynode.insertBefore(rlnode,bjnode);
 
    2). 自定义 insertAfter() 方法     
       /**
    * 将 newChild 插入到 refChild 的后边
    * @param {Object} newChild
    * @param {Object} refChild
    */
    function insertAfter(newChild, refChild){
        var refParentNode = refChild.parentNode;
        //判断 refChild 是否存在父节点
        if(refParentNode){
        //判断 refChild 节点是否为其父节点的最后一个子节点
            if(refChild == refParentNode.lastChild){
                refParentNode.appendChild(newChild);
            }else{
                refParentNode.insertBefore(newChild, refChild.nextSibling);
            }
          }
    }    

14. 删除节点:
    1). removeChild(): 从一个给定元素里删除一个子节点
    element.removeChild(node);
    返回值是一个指向已被删除的子节点的引用指针. 某个节点被 removeChild() 方法删除时, 这个节点所包含的所有子节点将同时被删除. 
    如果想删除某个节点, 但不知道它的父节点是哪一个, parentNode 属性可以帮忙。
    var bjnode=document.getElementById("bj");
    bjnode.parentNode.removeChild(bjnode);

15. innerHTML属性:
    1)非标准，但所有的浏览器都支持
    2)读写属性，读写某HTML元素的HTML内容
    var citynode=document.getElementById("city");
    alert(citynode.innerHTML);