• DOM2DOM3


    一.DOM2相对于DOM的变化

       1.importNode()用于从一个文档中取得一个节点,然后将其导入到另一个文档,使其成为这个文档结构的一部分,在调用importNode()时传

       入不同文档的节点则会返回一个新的节点,这个心节点的所有权归当前文档所有,它与appendChild 的区别在于后者不能够传入属于不同文档的

       节点 ;它接受两个参数 一个是要复制的节点和一个表示是否复制子节点的布尔值如

       var newnode = document.importNode(oldNode, true);//导入节点及其所有子节点
       document.body.appendChild(newNode);

       document.implementation新方法有三个createDocumentType()和createDocument() 、createHTML-Document()

      2.对于Node类型的变化

        DOM2: document.body.isSupported("HTML","2.0")用于确定当前节点具有什么能力

        DOM3: isSameNode()和isEqualNode(),这两个方法都接收一个节点参数,并在传入节点与引用的节点相同(对于第一个方法)或者相等

              (对于第二个方法)时返回true;所谓相同:指的是两个节点引用的是同一个对象。 所谓相等指的是两个节点是相同的类型具有相等的属性

        如var div1 = document.createElement("div");  div1.setAtrribute("class", "box");

           var div2 = document.createElement("div");  div2.setAtrribute("class", "box");

           alert(div1.isSameNode(div1));  //true   alert(div1.isEqualNode(div2)); //true  //这两个元素相等但不相同

        DOM3: document.body.setUserData()方法会将数据指定给节点 他接受3个参数:要设置的键、实际的数据和处理函数。如下

           document.body.setUserData("name","Nicholas","function(){}");

         同时可以通过document.body.getUserData("name");来获取

        DOM1:HTMLFrameElement和HTMLIFrameElement表示框架与内置框架

        DOM2:contentDocument(IE8之前不支持)包含一个指针,指向表示框架内容的文档对象 但所有浏览器都支持contentWindow支持

                   contentWindow.document等价如: var iframe = document.getElementById("myframe");

                   var iframeDoc = iframe.contentDocument || iframe.contentWindow.document;

      3.样式

      1) DOM2级样式中css属性中的float 对应javascript中的cssFloat  而IE有个styleFloat等价 如 myDiv.style.cssFloat

      2)myDiv.style.cssText 他能够访问style中的css代码  设置cssText是为元素应用多项变化最快捷的方式,因为可以一次应用所有变化。

      3) myDiv.style.getPropertyValue()返回给定属性的字符串值

       myDiv.style.getPropertyCSSValue()它返回的的内容比前者具体一点 存在两个属性:

       一是myDiv.style.getPropertyCSSValue().cssText与上面myDiv.style.getPropertyValue()值是一样的。

       二是myDiv.style.getPropertyCSSValue()。cssValueType 属性他是一个数值常量 0表示继承的值 1 基本值2 值列表3自定义值

       对于上面两种方法IE9+ safari3+ chrome

       myDiv.style.removeProperty("border");移除某个CSS属性

      4)计算样式 DOM2增强了document.defaultView

       document.defaultView.getComputedStyle()方法接收两个参数:一是要计算样式的元素和伪字符串(如after 也可以直接设为null)

       它返回一个CSSStyleDeclaration对象,他包含当前元素的所有计算的样式。

  • 相关阅读:
    Webpack实现按需打包Lodash的几种方法详解
    一文带你了解babel-preset-env
    Vue-给对象新增属性(使用Vue.$set())
    vue v-slot
    Vue2.4+新增属性.sync、$attrs、$listeners
    彻底搞定Javascript事件循环
    Spring Boot 添加JSP支持【转】
    防火墙设置
    黑黑客客
    tomcat启动时设定环境变量
  • 原文地址:https://www.cnblogs.com/luhangnote/p/2638470.html
Copyright © 2020-2023  润新知