JavaScript——DOM

1.DOM

     1.1：W3c制定的xml文档解析标准；

     1.2：是关于节点的文档树，一个节点只能有一个父节点，DOM内一切都是节点。

     1.3：根节点是document，DOM与平台无关。

 

2.节点

   2.1：文档节点(根节点)——document

   2.2:文档类型节点——documentType——没有子节点

   2.3：元素节点——element——可包含子节点

   2.4：文本节点——text——普通文本，没有子节点。

   2.5：属性——attr——NamedNodeMap

         2.5.1：class是JavaScript的关键字，class属性的功能用className替代。

         2.5.2：根据属性找标签顺序——先id在name属性；先在标签内部找，再到外部标签找。

         2.5.3：IEBug——不同标签的id和class属性的值不能相同。

         2.5.4：属性3部曲——节点访问属性；GET/SET访问属性；运算符访问属性(推介)。

   2.6：注释——comment——不能有子节点

   2.

   2.

          *所有节点通用的部分属性——nodeName、nodeValue、nodeType；ownerDocument；

          *nodeType——元素、属性、文本、CDDATA、注释、文档、文档类型 (节点类型值：从1到10)

          *nodeList——length属性获得数组长度；childNodes[i]可以获得单个子节点，而childNodes.item(i)较正规。

          *NamedNodeMap——属性的键值对，

3.节点的操作

      3.1：定位(查)

          3.1.1：firstChild

          3.1.2：nextSibling

          3.1.3：previousSibling

          3.1.4：lastChild

          3.1.5：childNodes

          3.1.6：hasChildNodes（）

          3.1.7：getNamedItem(nodeName)——

          3.1.8：getElementsByTagName(tagName)——按标签名找节点

          3.1.9：getElementsByName(nameValue)——按属性name=nameValue找节点

          3.1.10：getElementById(idValue)——按id定位单个节点。

             *在不知道是否还有子节点有哪些子节点时，hasChildNodes+childNodes的组合很强大。

      3.2：增

            3.2.1：appendChild（）——尾部追加

            3.2.2：insertBefore(new,old)

            3.2.3：创建节点——createElement(tagName)、createAttribute(attName)、createTextNode(text)、createComment(text)、createDocumentFragment()——功能类似于缓存；cloneNode(Boolean)——创建一个节点对象 ，TRUE克隆自身及其下节点；FALSE仅克隆自身。        

 

      3.3：删

           3.3.1：removeChild()

 

      3.4：改

            3.4.1：replaceChild(new,old)

      3.5：table——动态创建的表格IE需要table才可见，DOM不需要，也可见。

      3.5：innerHTML不是DOM的标准由IE提出，被公认。

             *innerHTML将当前节点下的所有节点输出；将参数字符串转化为节点(写)。

             *outerHTML将当前节点和其上面的节点输出(读)。

             *innerText将文本作为文本输出。

4.样式的控制【IE——DOM】

         *【属性与HTML/CSS一样——属性由多词组成是，需要满足驼峰命名法】

    4.1:嵌入标签

    4.2：内联——css的所有样式表存放在集合document.styleSheets中。

         *disabled、href、ownerNode(DOM)、type、parentStyleSheet

         *获得单个style节点里选择器的集合【rules——cssRules】——selectorText获得选择器名；

         *var oCSSRules=document.styleSheets[0].cssRules||document.stylesheets[0].rules

    4.3：外联

    4.4：最终样式——最后在屏幕上显示的样式。

          【标签.currentStyle.属性——document.defaultView.getComputedStyle(查看的标签,null.属性)】只读

 

 

        *【IE——DOM】多词组合：驼峰命名法——HTML/CSS的属性