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

                              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 如果是内联则返回null
      console.log(outerSheet.href)//file:///D:/books/study/one/style.css
      console.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 如果是内联则返回null
      console.log(outerSheet.href)//file:///D:/books/study/one/style.css
      console.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.cssText
      innerSheet.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) //0
      console.log(hehe.offsetLeft) //40

 

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

      var hehe = document.getElementsByClassName('ppap apple')[0];

      //clientHeight 元素内容加内间距
      console.log(hehe.clientHeight)//50
      //clientTop 元素边框的厚度
      console.log(hehe.clientTop)//10
      console.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 返回第一个匹配的节点 如果没有了匹配的节点返回null
        node = 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会更改节点