zoukankan      html  css  js  c++  java
  • js学习笔记(十三)DOM文档对象模型

    1、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)

    在某个子节点前插入新的子节点,并返回新的子节点。第一个参数为要插入的新的子节点,第二个参数指定要在哪个子节点前插入新节点

    2Document对象。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、bordermargin不属于可见区域,如果有滚动条,没被显示出来的那部分也不属于可见区域。在IE下如果元素被撑大,则会计算撑大后的可见区域宽度。总之该属性返回的是实际的可见区域宽度。该属性不是w3c标准,但得到了很好的支持

    offsetHeight

    作用同上

    clientWidth

    作用性质与offsetWidth相似,不过它计算的只是元素本身+padding的值,

    clientHeight

    作用同上

    offsetLeft

    返回元素的可见区域的边界距其父元素本身(即不考虑padding、margin、border)的边界的左边偏移量,如果其父元素(或更高级的父元素)没有相对或绝对定位属性,则会把body算作其父元素。使用此属性时最好把父元素设成绝对或相对定位。另外,不管此元素是绝对定位还是静态定位都适用于该属性

    offsetTop

    作用同上。没有offsetRight、offsetBottom的说法

    offsetParent

    返回对最近的具有相对或绝对定位的父元素的引用。该属性不是w3c标准,但得到了很好的支持

    scrollWidth

    返回元素的本身宽度加上padding加上可滚动的宽度(如果有滚动条的话),注意,IE6、7下有滚动条的时候,padding左右两边的宽度都会算在内,但在IE8、FF下有滚动条的时候,只有左边的padding才会有作用,因此只会加上左边padding的宽度

    scrollHeight

    作用同上,该属性不是w3c标准,但得到了很好的支持

    scrollTop

    相当于返回或设置已滚动区域的高度

    scrollLeft

    作用同上,该属性不是w3c标准,但得到了很好的支持

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

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

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

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

         3、 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)  //把element1、element2作为一个整体插入element3

              DocumentFragment对象的好处在于可以减少浏览器回流,提高效率   

  • 相关阅读:
    基于SpringMVC框架使用ECharts3.0实现堆叠条形图的绘制(下篇)
    使用Poi对EXCLE的导入导出
    使用JXL对EXCLE的导入导出
    在线API
    Java中使用poi导入、导出Excel
    SpringMVC框架下使用jfreechart绘制折线图,柱状图,饼状图
    让div在屏幕中居中(水平居中+垂直居中)的几种方法
    如何使用Canvas及动画实现
    $state、$watch、$scope、$rootScope分别是什么?
    【修真院“善良”系列之三】技术面试的时候该怎么样介绍自己?
  • 原文地址:https://www.cnblogs.com/2050/p/1782623.html
Copyright © 2011-2022 走看看