Javascript漂流记（上）__Dom浅谈

DOM：提供了一些方法，可以操作html和xml

一、DOM基本操作（document代表整个文档，html只是文档里的根标签）

     1、查看元素节点
         document.getElementById（ie8以下，同名的name属性也可以匹配到）
         document.getElementsByTagName()[index]，兼容性没毛病
         document.getElementsByClassName()[index]，ie9以下没有
         document.getElementsByName()[index]，name本身表示数据名，理论上只是部分标签使用（表单元素，img，iframe）
         document.querySelector()，css选择器，选出来的元素不是实时的。ie6和7没有
         document.querySelectorAll()
      2、遍历节点树：
         parentNode 父节点（最顶端的parentNode为document）
         childNodes 子节点
         firstChild
         lastChild
         nextSibling
         previousSibling
      3、遍历元素节点树：(除了children，都是ie9一下不兼容)
         parentElement(最顶端不到document)
         children
         其余都加element
      4、节点的四个属性：
         nodeName（只读）
         nodeValue（text节点和comment节点有）
         nodeType（只读）（1元素, 2属性, 3文本, 8注释, 9document, 11文档碎片）
         attributes
      5、节点的方法
         hasChildNodes

二、DOM结构树：一系列继承关系()
       document --> HTMLDocument.prototype --> Document.prototype --> Node --> EventTarget --> Object.prototype
       text --> Text -- > CharacterData
       comment --> Comment  -- > CharacterData
       标签们 --> HTMLTagElement --> HTMLElement -->Element
       getElementById定义在Document.prototype
       getElementsByTagName、getElementsByClassName、querySelector、querySelectorAll定义在Document.prototype和Element.prototype

三、DOM增删改
     1、增
         document.createElement
         document.createTextNode
         document.createComment
         document.createDocumentFragment
      2、插入
         ParentNode.appendChild
         ParentNode.insertBefore(a,b)，insert A before B
      3、删
         parent.removeChild，谋杀，本质是剪切
         child.remove，自杀，本质是彻底销毁
      4、替换
         parent.replaceChild(new, origin)

四、元素节点
      1、Element节点的属性
         innerHTML，可读可写（常用）
         innerText，可读可写（老版本火狐不兼容，火狐支持textContent（老IE没有））
      2、Element节点的方法
         elem.setAttribute('属性名', '属性值')
         elem.getAttribute('属性名')

以上内容属二哥原创，整理自 "渡一教育Javascript课程" ，一个值得推荐的"渡一教育"。