美文网首页
第12章、DOM2和DOM3

第12章、DOM2和DOM3

作者: Elevens_regret | 来源:发表于2017-10-20 14:35 被阅读0次

12.1 DOM变化

node类型变化,DOM3引入两个辅助比较节点的方法,isSameNode()和isEqualNode(),分别判断调用节点和参数节点是否相同或相等。相同表示两个节点引用的是同一个节点,相等表示两个节点是相同的类型,具有相同的属性(nodeName,nodeValue),而且他们的attributes和childNodes属性也相等。

<ul class="a">
    <li class="b">abc</li>
    <li class="b">abc</li>
</ul>

var li = document.querySelectorAll(".b");
console.log(li[0].isSameNode(li[1]));  // false
console.log(li[0].isEqualNode(li[1]));  // true

框架的变化,框架和内嵌框架DOM2级新增属性contentDocument,这个属性包含一个指针,指向表示框架内容的文档对象。IE8之前不支持本属性,但支持一个contentWindow属性,该属性返回框架的window对象,window对象又包含document属性。兼容性获取框架的文档对象:

var iframe = document.getElementBy("iframe");
var iframeDoc = iframe.contentDocument || iframe.contentWindow.document;

12.2 样式

12.2.1 访问元素的样式

任何支持style特性的HTML元素都有一个对应的style属性,包含通过HTML的style特性指定的所有样式信息,但不包含外部样式表或嵌入样式表经层叠而来的样式。有短划线的CSS属性名(例如background-color)必须转为驼峰大小写形式。float是JavaScript中的关键字,要转为cssFloat,IE使用的是styleFloat。style对象具有以下属性方法:
cssText属性,能够访问到style特性中的CSS代码。
getPropertyValue(),传入一个参数,返回包含给定属性名的字符串值。
getPropertyPriority(),传入一个参数,返回包含给定属性是否使用了!important设置。设置了则返回"important"字符串,否则返回空字符串。
removeProperty(),传入一个参数,从样式中删除给定的属性。
setProperty(),传入3个参数,要设置的属性名,要设置的属性值,表示是否使用!important设置的“important”字符串或空字符串。
document.defaultView.getComputedStyle()方法用于确定元素所有的计算样式,接收两个参数,第一个为需要取得计算样式的元素,第二个为伪元素字符串,不需要伪元素则为null。IE不支持本方法,但提供元素的currentStyle属性,包含当前元素的所有计算样式。所有计算样式都是只读的,不能修改计算后的样式对象中的CSS。

12.2.2 元素大小

元素的可见大小由其高度,宽度决定,包括内边距,滚动条和边框大小,不包括外边距。
offsetParent属性,表示元素的包含元素,不一定与parentNode相等。
offsetHeight属性,元素在垂直方向上占用空间大小,包括元素高度,水平滚动条的高度,上边框高度和下边看高度。
offsetWidth属性,元素在水平方向上占用空间大小,包括元素宽度,垂直滚动条的宽度,左边框宽度和右边看宽度。
offsetLeft属性,元素左外边框到包含元素的左内边框之间的距离。
offsetTop属性,元素上外边框到包含元素的上内边框之间的距离。
判断元素在页面上的偏移量:

function getElementLeftTop(ele) {
    var eleLeft = ele.offsetLeft;
    var eleTop = ele.offsetTop;
    var cur = ele.offsetParent;
    while (cur !== null){
        eleLeft += cur.offsetLeft;
        eleTop += cur.offsetTop;
        cur = cur.offsetParent;
    }
    return {left:eleLeft, top:eleTop};
}

客户区域大小,指的是元素内容及其内边距所占据的空间大小。
clientWidth属性,元素内容区宽度加上左右内边距宽度。
clientHeight属性,元素内容区高度加上上下内边距宽度。
确定浏览器的视口大小:

function getElementWidthHeight() {
    if(document.compatMode == "BackCompat"){
        return {
            width:document.body.clientWidth,
            top:document.body.clientHeight
        };
    }else{
        return {
            width:document.documentElement.clientWidth,
            top:document.documentElement.clientHeight
        };
    }
}

滚动大小,指的是包含滚动内容的元素的大小。
scrollHeight属性,在没有滚动条的情况下,元素内容总高度。
scrollWidth属性,在没有滚动条的情况下,元素内容总宽度。
scrollLeft属性,被隐藏在内容区域左侧的像素数,通过设置这个属性可以改变元素的滚动位置。
scrollTop属性,被隐藏在内容区域上方的像素数,通过设置这个属性可以改变元素的滚动位置。
确定文档总高度:

function getDocWidthHeight() {
    var docWidth,docHeight;
    if(document.compatMode == "BackCompat"){
        docWidth = Math.max(document.body.scrollWidth,document.body.clientWidth);
        docHeight = Math.max(document.body.scrollHeight,document.body.clientHeight);
    }else{
        docWidth = Math.max(document.documentElement.scrollWidth,document.documentElement.clientWidth);
        docHeight = Math.max(document.documentElement.scrollHeight,document.documentElement.clientHeight);
    }
    return {
        width:docWidth,
        height:docHeight
    };
}

确定元素大小,每个元素都有一个getBoundingClientRect()方法,该方法返回一个矩形对象,包含left、top、right、bottom属性。这些元素给出了元素相对于视口的位置。

相关文章

  • 2018-12-27

    第12章 DOM2和DOM3 DOM1级主要定义的是HTML和XML文档的底层结构。DOM2和DOM3则在这个结构...

  • JavaScript 高级程序设计(第12章 DOM2和DOM3

    第12章 DOM2和DOM3 DOM2 级核心(DOM Level 2 Core):在 1 级核心基础上构建,为节...

  • dom 级别和dom 事件处理

    dom级别:dom0 dom1 dom2 dom3 dom事件处理:dom0 dom2 dom3 (1级DOM标准...

  • 2019-01-02

    第12章 DOM2和DOM3 12.2 样式 12.2.1 访问元素的样式 在style特性中指定的任何CSS属性...

  • 2018-12-28红宝书第10章以后总结

    第十章DOM 第11、12章 DOM2和DOM3 主要是对DOM的一些能力扩展 DOM2能使用事件与DOM文档交互...

  • 十八

    DOM2和DOM3DOM1级主要定义的是HTML和XML文档的低层结构。DOM2和DOM3级则在这个结构的基础上引...

  • 12 DOM2 和 DOM3

    本章内容 DOM2 和 DOM3 的变化 操作样式的 DOM API DOM 遍历与范围 12.1 DOM 变化 ...

  • DOM2 和 DOM3

    本章内容:DOM2 和 DOM3 的变化、操作样式和 DOMAPI、DOM遍历与范围 DOM1 级主要定义的是HT...

  • 十一、DOM2 和DOM 3

      DOM 1 级主要定义的是 HTML 和 XML 文档的底层结构。   DOM2 和 DOM3 级则在这个结构...

  • 第12章、DOM2和DOM3

    12.1 DOM变化 node类型变化,DOM3引入两个辅助比较节点的方法,isSameNode()和isEqua...

网友评论

      本文标题:第12章、DOM2和DOM3

      本文链接:https://www.haomeiwen.com/subject/lnfuuxtx.html