详解DOM中JQ与JS的区别_易忘知识点

1.子节点对象与子元素的区别
  * childNodes  子节点
  * children    子元素
  关于子节点对象
    * 参考  https://www.cnblogs.com/Listener-wy/p/14735166.html

2.获取父节点和父元素:
  * JS:
    * 获取父节点
       * parentNode  子节点.parentNode
    * 获取父元素
       * parentElement 子节点.parentElement
  * JQ:
    * 元素节点.parent();

3.获取子节点和子元素:
  * JS:
    * 获取所有子节点
       * childNodes (计算空格)
        父节点.childNodes
    * 获取所有子元素
       * children (忽略空格)
         父节点.children
    * 获取第一个子节点
       * firstChild 
         父节点.firstChild
    * 获取第一个子元素
      * firstElementChild 
        父节点.firstElementChild(注意:只有高级浏览器识别)
    * 获取最后一个节点
      * lastChild 
        父节点.lastChild
    * 获取最后一个子元素 
      * lastElementChild 
        父节点.lastElementChild(注意:只有高级浏览器识别)
    * 获取上一个兄弟节点
      * previousSibling 
        节点.previousSibling
    * 获取上一个兄弟元素
      * previousElementSibling 
        节点.previousElementSibling(注意:只有高级浏览器识别)
    * 获取下一个兄弟节点
      * nextSibling 
        字节.nextSibling
    * 获取下一个兄弟元素
      * nextElementSibling 
        字节.nextElementSibling(注意:只有高级浏览器识别)
  * JQ:
    * 获取子节点
      * 节点.children()
    * 获取父节点
      * 节点.parent();

4.删除子节点或子元素
  * JS:
    * remove
      * 父节点.remove(被删除的子节点的下标)
      或者
      * 被删除节点.parentElement.remove()
    * removeChild
      * 父节点.removeChild(子节点)
  * JQ:
    * 被删除的节点.remove();

5.增加节点或元素
  * JS:
    * appendChild
      * 创建节点
        * document.createElemen("标签") 比如:document.createElemen("h1")
      * 追加节点
        * appendChild("子节点")  比如:父节点.appendChild("子节点")
      * 比如:
        * var h1Node = document.createElement('h1');
        * document.body.appendChild(h1Node);
    * insertBefore
      * 将创建好的新节点增加到老节点之前
        * 父节点.insertBefore(需要增加的新节点,老节点);
  *  JQ: 
    * 添加节点
      * 父节点.append(新节点);
        * 添加到最后面
      * 父节点.prepend(新节点);
        * 添加到最前面
      * 插入节点
        * 弟弟.before(新节点)
        * 哥哥.after(新节点);
    * 创建节点
      * $("<div id='xxx'>xxxxx</div>");

6.修改节点或元素
  * JS
    * 父节点.replaceChild(需要修改的新节点,被替换的老节点);
  * JQ