你的位置:首页 > 软件开发 > Java > DOM2和DOM3读书笔记

DOM2和DOM3读书笔记

发布时间:2016-05-18 17:00:04
二刷《高程》做的笔记,没什么技术含量就不发到首页啦!~DOM1级主要定义HTML和DOM2级核心:在文档1级核心的基础上构建,为节点添加了更多方法和属性DOM2级视图:为文档定义了基于样式信息的不同视图DOM2级事件:说明了如何使用事件与DOM文档交互DOM2级样式:如何以编程方 ...

DOM2和DOM3读书笔记

二刷《高程》做的笔记,没什么技术含量就不发到首页啦!~DOM2级视图和DOM2级HTML也增强了DOM接口,提供了新的属性和方法。

  • 针对
  • 其他方面的变化

(1)针对 特性来指定,XHTML的命名空间是http://www.w3.org/1999/xhtml,在任何格式良好的XHTML页面中,都应该将其包含在<html>元素中

<html ="http://www.w3.org/1999/xhtml">   <head>     <title>Example XHTML Pages</title>   </head>   <body>     Hello!   </body></html>
internalSubset用于访问包含在文档类型声明中的额外定义,在
  • Document类型的变化:DOM2和DOM3读书笔记此时再查看HTML页面发现框架里table元素还在的。(4).DOM2级HTML模块也为document.implementation增加了一个方法,叫createHTMLDocument(title),它的用途是创建一个完整的HTML文档,包括<html>,<head>,<title>,<body>元素。参数为文档的标题(放在title元素中的字符串),返回新的HTML文档实例(原型为HTMLDocumetn.prototype,因而继承该原型链上的所有属性和方法,包括title和body,均在Document.prototype上):IE8之前不支持框架集中的contentDocument属性,但支持contentWindow(继承自HTMLFrameElement和HTMLIFrameElement)的属性,该属性返回框架的window对象而这个window对象又有一个document属性,所有浏览器都支持contentWindow。兼容性代码为:原型链继承关系为:document.body.style.__proto__->CSSStyleDeclaration.prototype->Object.prototype在设置样式时,元素的外观会被自动更新,在标准模式下所有度量值都必须指定一个度量单位。混杂模式下可以将style.width设置为20,浏览器会假设它是“20px”,但在标准模式下,将style.width设置为20会导致被忽略,因为没有度量单位。(1).DOM样式属性和方法:DOM2级样式规范还为style对象定义了一些属性和方法,它们均来自CSSStyleDeclaration.prototype,这些属性和方法在提供元素的style特性值得同时也可以修改样式。DOM2和DOM3读书笔记这样看来,window.getComputedStyle()得到的CSSStyleDeclaration实例上的各个属性也是可重设置值的,但是并不然不清楚是为什么??明明实例上的writable是true的啊...知道的同学感谢告知...这里要注意border边框属性可能会也可能不会返回样式表中实际的border规则,存在这个差别原因是不同浏览器解释综合属性(如border)的方式不同,因为设置这种属性实际上会涉及很多其他属性,在设置border时实际上是设置了四个边的边框宽度,颜色,样式属性(border-left-width,border-top-color,border-bottom-style等)。因此即使computedStyle.border不会在所有浏览器都返回相同的值,但computedStyle.borderLeftWidth会返回值。FF:IE:IE9+在使用getComputedStyle获取颜色时IE5+通过currentStyle获取颜色:<=IE8不支持getComputed方法,但在所有IE中每个具有style属性的元素都有一个currentStyle属性(继承自HTMLELement.prototype),这个属性是CSSStyleDeclaration的实例,包含当前元素全部计算样式。DOM2和DOM3读书笔记(1).StyleSheet.prototype上的:如果集合是空列表表示适用于所有媒体。在<=IE8中,media是一个反映<link>和<style>元素media特性值的字符串。原型链继承关系为:document.styleSheets[0].cssRules[0].__proto__->CSSStyleRule.prototype->CSSRule.protoype->Object.prototype<=IE8不支持该属性,但有一个类似的rules属性。不同浏览器的document.styleSheets返回的样式表也不同,所有浏览器都会包含<style>元素和rel特性被设置为‘stylesheet’的<link>元素引入的样式表。IE和Opera也包含rel特性被设置为“alternate stylesheet”的<link>元素引入的样式表。也可以通过<link>或<style>元素取得CSSStyleSheet对象。DOM中规定了一个包含CSSStyleSheet对象的属性,为sheet(在HTMLLinkElement.prototype和HTMLStyleElement.prototype上)。除了<=IE8其他浏览器都支持这个属性,但所有的IE有个styleSheet属性,兼容性代码:

    function getStyleSheet(ele){  return ele.sheet || ele.styleSheet;}var link = document.getElementsByTagName('link')[0];var sheet = getStyleSheet(link);
    parentRule:如果当前规则是导入的规则,这个属性引用的就是导入规则;否则这个值为null。<=IE8不支持这个属性最常用的三个属性是cssText,selectorText,style。这里document.styleSheets[0].cssRules[0].cssText和document.getElementsByTagName('body')[0].style.cssText不一样前者包含选择符文本和围绕样式信息的花括号,后者只包含样式信息。大多数情况下仅使用style属性就可以满足所有操作样式规则的需求了。(2).创建规则:DOM规定要向现有样式表中添加新规则,需要使用insertRule(rule, idx)方法,两个参数:规则文本和表示在哪里插入规则的索引,插入的规则将成为第idx条规则。IE早期版本支持addRule(selectorstr, styleinfo, idx)方法:三个参数,选择符文本,css样式信息,插入规则的位置(可选)。跨浏览器代码:

    /* sheet: 样式表 selectorText:选择符文本 cssText:css样式信息 position:插入规则的位置*/function insertRule(sheet, selectorText, cssText, position){  if(sheet.insertRule){    sheet.insertRule(selectorText + '{' + cssText + '}', position);  }else if(sheet.addRule){    sheet.addRule(selectorText, cssText, position);  }}
    (1).偏移量:包括元素在屏幕上占用的所有可见空间(height/width+padding+滚动条+border),下面四个属性均继承自HTMLElement.prototypescrollWidth和scrollHeight主要用来确定元素内容的实际大小,通常认为html元素是在Web浏览器的视口中滚动的元素(IE6之前版本运行在混杂模式下是body元素。又经我测试...Chrome下是body元素,醉了)。在不包含滚动条的页面中,scrollWidth/scrollHeight和clientWidth/clientHeight之间的关系并不十分明确,这种情况下基于document.documentElement查看这些属性会在不同浏览器间发现一些不一致问题:在确定文档总高度时(包括基于视口的最小高度),必须取得scrollWidth/clientWidth和scrollheight/clientHeight最大值,才能保证在跨浏览器下得到精准结果。前提是html元素或body元素必须包含整个页面,像这样就不行这样获得的scrollHeight为0,clientHeight为视口高度<=IE8认为文档左上角坐标(2,2)(又经我测试,IE8是(-2,-2),,IE7是(2,2),IE5是(0,0)哎尼玛...兼容性我想爆粗口),其他浏览器则认为(0,0),因此需要一开始检查一下位于(0, 0)处元素的位置。高程上给出一段代码来确定是否要对坐标进行调整(反正我是没咋看懂)遍历 

    DOM2级遍历和规范模块定义了两个用于辅助完成顺序遍历DOM结构的类型:NodeIterator和TreeWalker。这两个类型能够基于给定的起点对DOM结构执行深度优先的的遍历操作。<=IE8不支持DOM遍历,且在>IE8中 typeof NodeIterator == 'object'; typeof TreeWalker == 'object'; Chrome下是'function'。任何节点都可作为遍历的根节点,如果假设以html元素作为根节点,那么遍历的第一步就是访问head元素,第二部就是title节点...以document为根节点的遍历可以访问到文档中的全部节点,从document节点开始依序向前,访问的第一个节点是document,从文档最后节点开始,遍历可以反向移动到DOM树的顶端,NodeIterator和TreeWalker都以这种方式遍历

    (1).NodeIterator:原型链继承关系为:document.createNodeIterator().__proto__->NodeIterator.prototypr->Object.prototypeNodeFilter.prototype->Object.prototype可以通过document.createNodeIterator(root, whatToShow, filter, entityReferenceExpansion)方法创建NodeIterator的实例,四个参数还可以修改起点,下次过滤就是从body的第一个子元素过滤了。新创建的范围直接与创建它的文档关联在一起,不能用于其他文档。创建了范围后就可以使用它在后台选择文档**定部分。创建了范围并设置了其位置之后还可以针对范围的内容执行很多种操作,从而实现对底层DOM树的更精细的控制。(3).操作DOM范围中的内容:在创建范围时,内部会为这个范围创建一个文档片段,范围所属的全部节点都被添加到了这个文档片段中。为了创建这个文档片段,范围内容的格式必须正确有效,在前面例子中我们创建的选区分别开始和结束两个文本节点的内部,因此不能算作是格式良好的DOM结构,也就无法通过DOM来表示,但是范围知道自身缺少哪些开标签和闭标签,它能够重新构建有效的DOM结构以便我们对其进行操作。对于这个例子,范围经过计算知道选区中缺少一个开始<b>标签,就会在后台动态加入一个该标签,同时还会在前面加入一个表示结束的</b>标签以结束“He”。于是修改后的DOM如下:

    <p><b>He</b><b>llo</b> world!</p>
    这个例子中新创建的范围是折叠的,因为p1后面和p2前面什么也没有。Range.START_TO_START(0):比较第一个范围和第二个范围的起点像这样通过document创建的范围可以在页面中的任何地方使用(通过其他元素创建的范围则只能在相应的元素中使用)

    (1).用IE范围实现简单的选择:使用findText(str)选择页面中某一区域,这个方**找到第一次出现的给定文本,并将范围移过来以环绕该文本。如果没有找到文本这个方法返回false,否则返回true。这里的文本不区分大小写。range.text属性返回范围中包含的文本,或者也可以检查findText()返回值(在找到文本情况下返回true)。还可以为findText()传入另一个参数,即一个表示向哪个方向继续搜索的数值。负值表示应该从当前位置向后搜索,正值表示应该从当前位置向前搜索。IE中与DOM中selectNode方法最接近的方法是moveToElementText(),这个方法接受一个DOM元素,并且选择该元素所有文本,包括HTML标签。在文本范围中包含HTML情况下,可以使用htmlText属性取得范围的全部内容,包括HTML和文本。(2).使用IE范围实现复杂的选择:以特定的增量向四周移动范围,这四个方法都接受两个参数:移动单位和移动单位的数量。移动单位是下列一种字符串值:(3).操作IE范围中的内容:操作范围中的内容可以使用text属性或pasteHTML()方法。通过text属性可以取得范围中内容文本,也可通过这个属性设置范围中的内容文本。不过在范围中包含HTML代码时不应该使用pasteHTML(),因为这样很容易导致不可预料的结果即很可能是格式不正确的HTML。DOM2和DOM3读书笔记

    原标题:DOM2和DOM3读书笔记

    关键词:dom

  • dom
    *特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们: admin#shaoqun.com (#换成@)。