代码改变世界

javascript高级程序设计学习小结3

2017-10-25 09:34  好像在哪见过你  阅读(161)  评论(0编辑  收藏  举报

DOM2级只是在DOM1级的基础上通过增加新方法和新属性来增强既有类型,Node类型的变化: localName(不带命名空间前缀的节点名称), namespaceURI(命名空间URI或者null), prefix(命名空间前缀)

“DOM2级视图”模块添加了一个名为defaultView的属性,其中保存着一个指针,指向拥有给定文档的窗口。

DOM2级遍历和范围模块定义了两个用于辅助完成顺序遍历DOM结构的类型: NodeIterator 和TreeWalker。以及DOM中的范围 var range = document.createRange(), 而要通过范围来选择文档中的一部分,可以使用selectNode()或者selectNodeContent()

DOM3级同样增强了既有类型,但也引入了一些新类型

isDefaultNamespace(namespaceURI): 在指定的namespaceURI是当前节点的默认命名空间的情况下返回true

lookupNamespaceURI(prefix): 返回prefix的命名空间

lookupPrefix(namespaceURI):返回给定namespaceURI的前缀

另外引入了两个辅助比较节点的方法: isSameNode() 和 isEqualNode()

DOM3还针对为DOM节点添加额外数据引入的新方法 setUserData(key, value, function), 获取数据getUserData(key);

确定元素大小

function getBoundingClientRect(element) {
    if (typeof arguments.callee.offset != "number") {
        var scrollTop = document.documentElement.scrollTop;
        var temp = document.screateElement("div");
        temp.style.cssText = "position:absolute;left:0;top:0;";
        document.body.appendChild(temp);
        arguments.callee.offset = -temp.getBoundingClientRect().top - scrollTop;
        document.body.removeChild(temp);
        temp = null;  
    }
    var rect = element.getBoundingClientRect();
    var offset = arguments.callee.offset;
    return {
        left: rect.left + offset,
        right: rect.right + offset,
        top: rect.top + offset,
        bottom: rect.bottom + offset
    };
}    

 在处理文本框的值时,最好不要使用DOM方法,因为对value属性所做的修改不一定能反映在DOM中。

文本框中选择部分文本

function selectText(textbox, startIndex, stopIndex) {
    if (textbox.setSelectionRange) {
       textbox.setSelectionRange(startIndex, stopIndex);
    } else if (textbox.createTextRange) {
        var range = textbox.createTextRange();
        range.collapse(true);
        range.moveStart("character", startIndex);
        range.moveEnd("character", stopIndex - startIndex);
        range.select();
    }
    text.focus();
}

FormData为序列化表单以及创建与表单格式相同的数据(用于通过XHR传输)提供了便利。体现在: 不必明确在XHR对象上设置请求头部,XHR对象能够识别传入的数据类型是FormData的实例,并配置适当的头部信息。 CORS的基本思想是使用自定义的HTTP头部让浏览器与服务器进行沟通,从而决定请求或者响应是否是应该成功还是失败。

跨域技术:(1)图像Ping, (2) JSONP

为确保通过XHR访问的URL安全,通行的做法就是验证发送请求者是否有权限访问相应的资源,有两种方式可供选择,1)要求以SSL连接来访问可以通过XHR请求的资源;2)要求每一次请求都要附带经过相应算法计算得到的验证码