DOM

DOM

1.文档对象模型

2.DOM描绘了一个层次化的节点树

3.节点类型：每一个节点上都有nodeName, nodeType, nodeValue，每一种节点都是对象

       1> 文档节点

       2> 注释节点

       3> 属性节点

       4> 文本节点

       5> 元素节点

4.获取元素节点对象的操作方法

       1>document.getElementById(“Id名”)；

              如果文档中不存在该方法，则获取到的值是null

              该方法存在于文档对应的构造函数的原型对象Document.prototype上,该方法不是元素下的方法，是文档下的方法

       2>document.getElementByTagName(“标签名”)；

              如果文档中不存在该方法，则获取到的值是空集合，是个伪数组

       3>document.getElementByClassName(“类名”)  [ie8以下不兼容]

       4>document.getElementByName(“name属性值”)

              该方法存在于文档对应的构造函数的原型对象Document.prototype上,该方法不是元素下的方法，是文档下的方法

       5>通过css选择器获取元素节点对象

              获取单个：document.querySelector(css选择器)

              获取多个：document.querySelectorAll(css选择器)

                     Eg: document.querySelectorAll(“#form1 input[type = radio]”)

                        document.querySelector(“input:not([type = image])”)

5.DOM的操作方法

       属性：

       1>元素属性的操作方法：（标签内部，非对象下的）

              获取属性值：ele.getAttribute（属性名） 【可用于获取固有属性和自定义属性】

                                   ele,属性名··                         【只能用于获取固有属性】

       2>设置属性        

              ele. setAttributes(“属性名”，属性名对应的属性值)

              eg: box.setAttributes(“style”,”width:100px; height:100px; background:red”);

              注意：如果标签上已有该属性名，此方法会将之前的所有属性值都覆盖

       3>删除属性

              ele.removeAttribute(“属性名”)

       节点：

      1>创建元素节点对象：document.createElement(“div”);

          创建属性节点对象：document.createAttribute(“属性名”)；

          创建注释节点对象：document.createComment(“注释内容”)

         创建文本节点对象：document.createTextNode(“这是一个盒子”)

        2>文档添加节点：

              子父级添加：

                    父节点.appendChild(子节点)【父节点尾部添加】

                     父节点.prepend(子节点)【父节点头部添加】

              兄弟间添加：

                     在兄弟节点前添加：兄弟节点.before(新节点)；

                     在兄弟节点后添加：兄弟节点.after(新节点);

       3>文档删除节点：父节点.removeChild(子节点)

       4>文档指定位置插入节点：父节点.insertBefore(新节点，旧节点)

       5>文档节点替换方法：

              兄弟间替换：待替换的节点.replaceWith（新节点）；

              子父级替换：父节点.replaceChild（新节点，待替换的节点）

       6>元素克隆：克隆的元素.cloneNode（参数）【参数为真，克隆当前元素的所有，包括子元素；参数为假，克隆当前标签元素，包含标签属性：没有参数默认为false】

       7>碎片整理：document,createDocumentFragment() 【避免多次改变文档结构，提高效率】

              Eg: var frag = document.createDocumentFragment();

                 for(var i=0; i<10; i++){

  var div = document.createElement(“div”);

  div.style.background = “red”;

  frag.appendChild(div);

}

document.body.appendChild(frag)

6.获取样式值：（非行内样式）【获取到的是样式使用最终值】

       IE: 元素,currentStyle[属性名]

       非IE：window.getComputedStyle(元素，null)[属性名]