Js高级程序设计第三版学习(十二章)

第十二章 DOM2和DOM3

1.样式:

访问样式属性

任何支持style特性的HTML元素都有一个style属性,我们可以通过style属性,来随时设置样式,外观会自动更新

      var hehe = document.getElementsByClassName('ppap apple')[0];hehe.style.width = '100%';hehe.style.height = '200px';

DOM2级为style对象定义了一些属性和方法

      var hehe = document.getElementsByClassName('ppap apple')[0];//style属性 返回CSSStyleDeclaration对象console.log(hehe.style);//cssText 返回行内文本内容 也可以直接修改 跟直接修改style相同console.log(hehe.style.cssText)//background: rgb(255, 204, 0); width: 100%; height: 200px;//getPropertyPriority 判断样式是否使用了 !important 使用返回important 位置用返回''console.log(hehe.style.getPropertyPriority('width')); //important//获取指定样式的值console.log(hehe.style.getPropertyValue('width'));//100%//从样式中删除属性console.log(hehe.style.removeProperty('width'));//设置属性hehe.style.setProperty('width','100%');//获取给定style属性的个数console.log(hehe.style.length);

style属性获取的是行内样式, 而正常项目中都是使用的是css样式表, 如果我们要获取非行内样式可以使用window.getComputedStyle(元素,伪类)(ie9已支持), 而currentStyle仅仅ie6支持, 新版本已经ie已经不支持了,而且计算样式是只读的,如果更改会报错

 var hehe = document.getElementsByClassName('ppap apple')[0];var computedS = window.getComputedStyle(hehe);console.log(computedS.height);//50px// computedS.height = '100px'; 报错console.log(hehe.currentStyle);//undefined

操作样式表

CSSStyleSheet类型表示样式表,包括内联样式表(<style>)和外链样式表(link),CSSStyleSheet对象除了disabled属性外其他都是只读的

      // document.styleSheets[2].deleteRule()var outerSheet = document.styleSheets[0];var innerSheet = document.styleSheets[2];//disable禁用 如果设置为true 则该样式表被备用// innerSheet.disabled = true;//引用样式表的URL 如果是内联则返回nullconsole.log(outerSheet.href)//file:///D:/books/study/one/style.cssconsole.log(innerSheet.href)//null

CSSStyleSheet对象提供了一些方法用来操作内联或外链样式表, 但需要注意的是 chrome无法操作外链样式表的cssRules(会报错),但是内联没有问题,ff跟ie11(ie9及以上)都可以,在cssRules[0]中 cssText是只读的,但我们可以通过style.cssText修改

  // document.styleSheets[2].deleteRule()var outerSheet = document.styleSheets[0];var innerSheet = document.styleSheets[2];//disable禁用 如果设置为true 则该样式表被备用// innerSheet.disabled = true;//引用样式表的URL 如果是内联则返回nullconsole.log(outerSheet.href)//file:///D:/books/study/one/style.cssconsole.log(innerSheet.href)//null//console.log(outerSheet.cssRules)//无法访问报错console.log(innerSheet.cssRules);//CSSRuleList {0: CSSStyleRule, 1: CSSStyleRule, 2: CSSKeyframesRule, 3: CSSStyleRule, length: 4}//修改规则  获取第一条规则并通过style属性修改 也可以直接修改style.cssTextinnerSheet.cssRules[0].style.background ='#ff0000';innerSheet.cssRules[0].style.cssText = 'body {background:#000000}'//创建规则  第一个参数 规则 第二个参数插入的索引innerSheet.insertRule('body{font-size:30px}',0)//删除规则innerSheet.deleteRule(innerSheet.cssRules[0])

元素大小

偏移量(offset): 元素在屏幕上占有的所有可见空间,包括内间距,滚动条和边框(实际大小包括超出视口部分),offsetParent代表距离子元素最近的父元素,注意offsetParent跟parentNode不一定相同,offsetParent的确实是根据是否存在定位position有关的,如果没有position那么子元素的offsetParent就是body,offsetTop与offsetLeft都与offsetParent有关

      var hehe = document.getElementsByClassName('ppap apple')[0];//offsetWidth 元素实际的宽 offsetHeight 元素实际的高console.log(hehe.offsetWidth)//offsetTop 元素距离包含元素上边的距离, offsetLeft元素距离包含元素左边的距离console.log(hehe.offsetTop) //0console.log(hehe.offsetLeft) //40

客户区大小指的是元素内容加上内间距所占的大小

      var hehe = document.getElementsByClassName('ppap apple')[0];//clientHeight 元素内容加内间距console.log(hehe.clientHeight)//50//clientTop 元素边框的厚度console.log(hehe.clientTop)//10console.log(hehe.clientLeft)//10

滚动大小: 包含滚动内容的元素大小

      var hehe = document.getElementsByClassName('ppap apple')[0];//scrollHeight 元素内容去除滚动条后的实际大小console.log(hehe.scrollHeight); //50//scrollTop 滚动条距离上方的高度 更改属性,可改变元素的位置setInterval(function() {hehe.scrollTop += 20;console.log(hehe.scrollTop)}, 100);

2.遍历:

DOM遍历时深度优先的遍历, 以给定节点为根,不能向上超出DOM树的根节点,任何节点都可以作为遍历的根节点

NodeIterator: createNodeIterator(root,whatToShow,filter)创建遍历,root:指定节点,whatToShow:接受一个数字码,常用NodeFilter类型定义, 如NodeFilter.SHOW_ELEMENT, 按位或 (|) NodeFilter.SHOW_ELEMENT | NodeFilter.SHOW_TEXT,filter:指定一个自定义NodeFilter对象,NodeFilter对象只有一个方法(acceptNode),方法返回NodeFilter.FILTER_ACCEPT或者NodeFilter.FILTER_SKIP, NodeFilter.FILTER_ACCEPT继续执行, NodeFilter.FILTER_SKIP跳过当前节点,filter 可以绑定一个对象给acceptNode 绑定方法,或者直接传入匿名方法

      //createNodeIterator 迭代 第一个参数起点节点, 第二个参数 要访问的节点代码, 第三个参数过滤方法var iterator = document.createNodeIterator(document.body,NodeFilter.SHOW_ELEMENT,{acceptNode: function(node) {return node.className.indexOf('ppap') !== -1? NodeFilter.FILTER_ACCEPT: NodeFilter.FILTER_SKIP;}}// function(node) {//   return node.className.indexOf('ppap') !== -1//     ? NodeFilter.FILTER_ACCEPT//     : NodeFilter.FILTER_SKIP;// });var ppapList = [];var node = null;do {//第一次执行nextNode 返回第一个匹配的节点 如果没有了匹配的节点返回nullnode = iterator.nextNode();if (node === null) {break;}ppapList.push(node);} while (true);console.log(ppapList); //[li#hehe.ppap.apple, li.ppap, li.ppap, li.ppap]

TreeWalker是NodeIterator,TreeWalker需要createTreeWalker创建,参数相同,但第三个参数filter有所不同, TreeWalker可以不需要过滤器,也拥有

      var treeWalker = document.createTreeWalker(document.body, NodeFilter.SHOW_ELEMENT, null);var nodeT = [];nodeT.push(treeWalker.nextNode())console.log(nodeT) //[div]

filter 过滤条件有三个FILTER_ACCEPT(通过),FILTER_SKIP(continue),FILTER_REJECT(break),同时TreeWalker可以随时改变起点 currentNode 会获取上一次循环返回的节点, 更改currentNode会更改节点