JavaScriptDOM的节点操作笔记

这两天再学佟刚的JavaScriptDOM节点操作，先把其笔记记录于此，加深自己对该知识的印象，也便于后期的查看。

1.节点及其类型：
1）元素节点
2）属性节点：元素的属性，可以直接通过属性的方式来操作
3）文本节点：是元素节点的子节点，其内容是文本

2.一般地，不能在body节点之前来直接获取body内的节点，因为此时html文档树没有完全加载，所以获取不到指定的节点，需要使用window.onload事件来操作

获取节点****

    1.获取元素节点：
      document.getElementById :根据id属性来获取对应的单个节点

        document.getElementsByTagName:根据标签名获取指定的节点名字的数组，length是其数组的长度

        document.getElementsByName:根据节点的name属性来获取符合条件的节点数组  （ie不支持）

        2.获取属性节点：

            可以直接通过cityCode.id这样的方式来获取和设置属性节点的值；通过元素节点的getAttributeNode方法来获取属性节点，然后通过nodeValue来读写属性值

      3.获取元素节点的子节点（**只有元素节点存在子节点）：
                 .firstChild 属性获取第一个子节点
                 .lastChild 属性获取最后一个子节点

        4.获取文本节点：
                    先获取元素节点的子节点，如果元素节点的子节点只有一个子节点，可以先获取到指定的元素节点，然后利用.firstChild.nodeValue的方法来读写其文本节点的值

        5.节点的属性：
            nodeName ：代表当前节点的名字，只读属性
                                   **如果给定的节点是文本节点，那么，nodeName属性将返回内容为#text的字符串
                nodeType：给定节点的类型
                     1--元素节点 ；2--属性节点  ；3--文本节点
                 nodeValue：返回给定节点的当前值（字符串）
                        1--元素节点返回null ；2--属性节点返回这个属性的值 ；3 --文本节点返回这个文本节点的内容

        6.创建元素节点：
           createElement()：按照指定的标签名来创建一个新的元素节点，方法只有一个参数：就是被创建的元素节点的名字，是一个字符串；方法的返回值是一个指向新建节点的引用指针，返回值是一个元素节点，所以其nodeType=1

        7.创建一个文本节点：
            createTextNode()创建一个包含着指定文本的新文本节点，这个方法的返回值是一个指向新建文本节点的引用指针（当前被创建的文本节点），他是一个文本节点，所以其nodeType=3，方法只有一个参数，就是当前被创建的文本节点中所包含的文本字符串。

                8.为元素节点添加一个子节点：appendChild()，就是当前该元素节点的最后一个子节点，返回返回值是一个指向新增子节点的引用指针

9.节点的替换：
replaceChild():把一个给定的父元素中一个子节点替换为另一个子节点，返回值是新替换后的那个子节点的引用指针；除了替换还有移动功能，
****互换功能：（自定义方法）
/**

• 互换 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); 
                          }
                      }
  
                  }   

10.插入节点：

    insertBefore()：把一个给定节点插入到一个给定元素节点的给定子节点的前面

                        /**
                            自定义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);
                                }   
                            }
                        }

11.删除节点：

removeChild() :从一个给定的元素中删除一个子节点
其返回值是一个指向已经被删除的子节点的引用指针；如果某个节点被删除后，其下面的所有子节点将全部同时被删除

12.innerHTML属性：表示元素的html的内容

-----------后续会继续补充-----
有错误的地方希望各位大神斧正！！！！谢谢各位。