DOM (Document Object Model)文档对象模型

【理解下DOM】

    DOM——Document Object Mode。DOM是网页上XHTML中文档正文标题啊、段落、列表、样式、以及ID/class等全部其余数据的一个内部表示。我本身的理解是将网页内容变成代码的形式呈现。

    DOM的主要思想是HTML上每一个元素分别对应于DOM中的一个节点。

    （最容易理解的方式是画树状结构图，这个电脑上很差操做的这里就不展现了。）这个树状结构图是怎么出来的呢？是将网页的XHTML结构经过浏览器解析，在内存中建立整个文档节点对象document，而后从文档中出现的第一个标记出发，按照XHTML的层次结构一个一个地加载。[当网页被装载到内存后，在内存中就有了一个按照XHTML结构造成的倒挂的节点对象树状结构。

    这个结构中，有3个节点是关键：文档节点、元素节点、文本节点。这个看书就明白了。

===============================

    下面我来回忆下这章的重点部分，就是如何使用DOM访问文档节点和如何使用DOM建立、修改、删除文档节点及其属性。（也就是那一大堆东西）
    经过浏览器解析后的网页，层次结构可能很复杂，节点不少。可是咱们为了不有些没必要要的麻烦。咱们在访问或对节点进行操做的时候，只牵扯到此节点的上一级/下一级。（至关于只牵扯到你的父亲或兄弟）。这样，相对而言在对每一个节点操做的时候要简便许多。

    ↓   ↓   ↓

   【10个属性】

    nodeName: 节点的名字

    nodue: 节点的值

    nodeType: 节点的类型

    parentNode: 父节点

    childNodes: 全部子节点的列表

    firstChild: 子节点列表中的第一个节点

    lastChild: 子节点列表中的最后一个节点

    previousSibling: 前一个兄弟节点

    nextSibling: 后一个兄弟节点

    ownerDocument: *此节点所属的文档 （还不明白。囧）

    innerHTML:  更轻松地操纵文档。

                经过innerHTML属性将HTML字符串赋值给一个元素。这里就不举例了，反正很好很强大。

                虽然这个innerHTML不是标准的DOM，可是几乎全部的浏览器都支持因此咱们能够放心用。

    经过这么种种属性，咱们能够再经过下面的方法来更容易的访问或操做相应的节点。   

   【14个方法】

    childNodes.length: 获取子节点的数量

    hasChildNodes(): 查询是否存在子节点

    childNodes.item(): 获取子节点

                       由于childNodes是列表，全部item()括号里面传入的是数组里的下标。

    getElementsByTagName_r(): 返回一个NodeList数组，包含全部的标记名特性

    getElementsByName(): 获取全部name属性等于指定值的元素。

    getElementById(): 获取单个指定元素 （此方法是从文档树中最快找到指定元素的方法）

                      在XHTML中，id特性是惟一的，也就是说全部元素的id的不同的。

    createElement_x(tagname):建立标记名为tagname的元素 

    createTextNode(text):  建立包含文本text的文本节点 

    appendChild(): 在子节点后追加元素。

                   将给定的节点添加到某个节点的chlidNodes列表尾部

    removeChild(): 移除某个节点。

                   传的参数也就是这个要删除的节点，而后再将这个节点做为函数的返回值返回。

    replaceChild():替换某个节点。

    createAttribute(name): 用定义的名称name建立特性节点（自定义节点）

    insertBefore():将新节点添加的旧节点的前面。

                   里面有两个参数：要添加的节点和插在哪一个节点以前。  

    cloneNode(): 克隆节点。

                 这个方法中，须要注意的是：方法带一个boolean参数来指示在复制时 ↓

                 是包含该节点的全部子节点(深度复制) or 元素自己。

                 false 表示仅复制元素自己      true表示深度复制。 

 

一、Node对象         Element、Document对象继承他

属性名/方法名	做用
childNodes	返回的是一个NodeList对象，也能够当作是一个数组，它表示调用该属性的节点对象下的全部子节点，能够用childNodes[]来引用数组中单独的元素
parentNode	返回节点的父节点
nodeType	返回节点的节点类型，IE只支持数字值，FF还支持常量值。1：ELEMENT节点，2：ATTRIBUTE节点，3：TEXT节点，9：DOCUMENT节点
nodeName	返回节点的名称，即标签名称
firstChild	返回第一个子节点
lastChild	返回最后一个子节点
previousSibling	返回调用该属性的节点的前一个兄弟节点，没有则返回null
nextSibling	返回调用该属性的节点的后一个兄弟节点，没有则返回null
appendChild()	向调用该方法的节点的子节点列表末尾添加节点。注意其参数是一个节点，而不是一个标签。该方法返回的是这个新添加进去的节点,要注意的是，若是要添加的节点已是文档的一部分的话，那么首先会删除文档原先存在的节点
cloneNode()	拷贝节点。当里面参数为true时，那么节点的全部子节点也会被克隆。该方法返回拷贝的节点
removeChild()	从子节点列表中删除指定的节点，参数是要删除的节点。成功则返回被删除的节点，失败则返回null
replaceChild(a,b)	将某个子节点替换为另外一个,成功则返回被替换的节点，失败则返回null。第一个参数为用来替换的新节点，第二个参数为将要被替换的节点
insertBefore(a,b)	在某个子节点前插入新的子节点，并返回新的子节点。第一个参数为要插入的新的子节点，第二个参数指定要在哪一个子节点前插入新节点

 

2、Document对象。Document 对象是一棵文档树的根，可为咱们提供对文档数据的最初（或最顶层）的访问入口。  HTMLDocument继承他

属性名/方法名	做用
getElementsByTagName()	返回指定标签的元素节点，类型为数组。例如 document.getElementsByTagName(“p”)
getElementById()	返回指定ID的元素节点，类型为单个元素。例如 document.getElementById(“id”)
creatElement()	建立一个元素节点，并返回该元素节点。例如 document.creatElement(“div”)
documentElement	返回对文档根元素的引用

 

HTMLDocument对象。DOM的Document对象放到HTML文档中则成为了HTMLDocument对象

属性名/方法名	做用
getElementsByName()	返回指定name的元素节点，类型为数组。例如 document.getElementsByName(“name”)

 

Element对象     HTMLElement对象继承他

属性名/方法名	做用
getElementsByTagName()	该方法与Documen对象的同名方法相似，不过该方法把查找的范围限定在了调用该方法的元素节点内
steAttribute(a,b)	该方法用来改变或建立（当要改变的属性没设置时）节点元素的属性,第一个参数为属性名，第二个参数为属性值，例如element.setAttribute(“id”,”hcp”)
getAttribute()	该方法用来获取元素节点的属性值，参数为属性名。例如 element.getAttribute(“id”)
removeAttribute()	删除元素节点的属性，参数为属性名。例如 element.removeAttribute(“id”)

 

HTMLElement对象

属性名/方法名	做用
className	元素的class属性
currentStyle	该属性为一个对象
innerHTML	该属性可设置元素内HTML文本串，HTML代码会被执行（该属性非w3c标准）
innerText	该属性可设置元素内的纯文本，即便文本包含有html代码也不会被浏览器执行，而是看成纯文本（非w3c标准）
outerHTML	设置元素内的HTML文本串，元素自己也包括在内（非w3c标准）
outerText	设置元素内的纯文本，即便文本包含有html代码也不会被浏览器执行，而是看成纯文本.元素自己也包括在内（非w3c标准）
offsetWidth	返回元素可见区域的宽度，不带单位，单位为px。可见宽度包括元素自己、padding、border。margin不属于可见区域，若是有滚动条，没被显示出来的那部分也不属于可见区域。在IE下若是元素被撑大，则会计算撑大后的可见区域宽度。总之该属性返回的是实际的可见区域宽度。该属性不是w3c标准，但获得了很好的支持
offsetHeight	做用同上
clientWidth	做用性质与offsetWidth类似，不过它计算的只是元素自己+padding的值，
clientHeight	做用同上
offsetLeft	返回元素的可见区域的边界距其父元素自己（即不考虑padding、margin、border）的边界的左边偏移量，若是其父元素（或更高级的父元素）没有相对或绝对定位属性，则会把body算做其父元素。使用此属性时最好把父元素设成绝对或相对定位。另外，无论此元素是绝对定位仍是静态定位都适用于该属性
offsetTop	做用同上。没有offsetRight、offsetBottom的说法
offsetParent	返回对最近的具备相对或绝对定位的父元素的引用。该属性不是w3c标准，但获得了很好的支持
scrollWidth	返回元素的自己宽度加上padding加上可滚动的宽度（若是有滚动条的话），注意，IE六、7下有滚动条的时候，padding左右两边的宽度都会算在内，但在IE八、FF下有滚动条的时候，只有左边的padding才会有做用，所以只会加上左边padding的宽度
scrollHeight	做用同上，该属性不是w3c标准，但获得了很好的支持
scrollTop	至关于返回或设置已滚动区域的高度
scrollLeft	做用同上，该属性不是w3c标准，但获得了很好的支持

 

CSS2Properties对象，用来获取元素样式

     一、 element.style引用的是一个CSS2Properties对象，此时该对象只表明内联样式的集合，即由HTML标签中的style属性设置的样式。

     二、element.currentStyle引用了一个CSS2Properties对象，不过该对象包含的是元素的最终样式，该属性只能用于IE浏览器。  该属性为只读

            用法举例： var s=element.currentStyle.fontSize

     三、 window.getComputedStyle() 或document.defaultView.getComputedStyle() 是FF等标准浏览器中用来获取对象样式的函数，该函数返回的是一个CSS2Properties对象，此对象包括了元素的最终样式。该函数有两个参数，第一个为要获取样式的元素对象，第二个参数为伪元素，通常设为null.        该属性为只读

          用法举例：var s= window.getComputedStyle(element,null).fontSize 

 

DocumentFragment节点

        DocumentFragment节点是一种特殊类型的节点，它自身不出如今文档中，只作为连续节点集合的临时容器，并容许将这些连续的节点做为一个对象来操做。当把一个DocumentFragment插入文档时（用appendChild(),insertBefore(),replaceChild()方法），插入的不是DocumentFragment,而是它里面包含的节点

        示例：  var f=document.createDocumentFragment();  //获取一个空的DocumentFragment对象

                  f.appendChild(element1)  //给DocumentFragment添加节点

                  f.appendChild(element2)  //给DocumentFragment添加节点

                  element3.appendChild(f)  //把element一、element2做为一个总体插入element3

          DocumentFragment对象的好处在于能够减小浏览器回流，提升效率