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

最新推荐文章于 2019-10-02 17:42:33 发布

原创最新推荐文章于 2019-10-02 17:42:33 发布 · 213 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#js高级程序设计第三版

js 专栏收录该内容

21 篇文章

订阅专栏

本文深入探讨DOM的两大扩展：选择符API与HTML5，详细解析querySelector与querySelectorAll的性能对比，介绍元素遍历的新方法，如childElementCount、firstElementChild等，并讲解HTML5新增的特性，包括classList操作、焦点管理和自定义属性等。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

第十一章 DOM扩展

dom主要有两个扩展选择API 和 HTML5

1.选择符API:

增加了两个选择class的方法 querySelector() 没有返回null, querySelectorAll() 没有返回空nodelist,虽然继承了nodeList所有的属性和方法但其实是一个快照,这样解决了nodeList循环引用的问题, 但querySelector与querySelectorAll的性能都低于getElement这种形式,所以需要根据实际情况酌情使用.

      console.time('querySelector');
      for (let index = 0; index < 10000; index++) {
        var ppap = document.querySelector('.ppap');
      }

      console.timeEnd('querySelector'); //5.68798828125ms
      console.log(ppap);

      console.time('querySelectorAll');
      for (let index = 0; index < 10000; index++) {
        var ppapList = document.querySelectorAll('.ppap');
      }

      console.timeEnd('querySelectorAll');
      console.log(ppapList); //querySelectorAll: 27.284912109375ms

      console.time('id');
      for (let index = 0; index < 10000; index++) {
        var hehe = document.getElementById('hehe');
      }

      console.timeEnd('id'); //id: 1.771240234375ms

      console.time('liList');
      for (let index = 0; index < 10000; index++) {
        var liList = document.getElementsByClassName('ppap');
      }

      console.timeEnd('liList'); //liList: 1.47216796875ms

2.元素遍历:

在获取childNodes时后代节点可能是文本节点,但我们大多数只需要元素节点, 我们可以使用如下, 使用方法相同

 var hehe = document.getElementById('hehe')
      //后代元素节点个数
      hehe.childElementCount;
      //第一个元素节点
      hehe.firstElementChild;
      //最后一个元素节点
      hehe.lastElementChild;
      //下一个元素节点
      hehe.nextElementSibling;
      //上一个元素节点
      hehe.previousElementSibling;

3.HTML5:

与类相关扩充

getElementsByClassName, 根据class选择元素返回 HTMLCollection

      var hehe = document.getElementsByClassName('ppap apple');
      console.log(hehe);//HTMLCollection

classList 用来操作元素的class 使用className 会一次性修改而使用classList 会更加简单, 他返回DOMTokenList类似dom集合, 也提供了增删改查的方法,需要注意classList ie10以上才支持, 如果需要兼容ie低版本还需要使用className

      var hehe = document.getElementsByClassName('ppap apple')[0];
      console.log(hehe); //HTMLCollection

      //添加
      hehe.classList.add('asdhjasdhkj');
      console.log(hehe.classList.value); //ppap apple asdhjasdhkj

      //移除
      hehe.classList.remove('asdhjasdhkj');
      console.log(hehe.classList.value); //ppap apple

      //判断是否包含class
      console.log(hehe.classList.contains('asdhjasdhkj')); //false

      //没有就添加, 有就移除
      hehe.classList.toggle('asdhjasdhkj');
      console.log(hehe.classList.value); //ppap apple asdhjasdhkj

焦点管理

document.activeElement 这个属性会引用Dom中当前获得焦点的元素,hasFocus() 用来检测文档是否获得了焦点

      console.log(document.activeElement)//body
      console.log(document.hasFocus())//true

HTMLDocument的变化

      //readyState 判断状态 loading正在加载 complete完成
      console.log(document.readyState); //loading
      window.onload = function() {
        console.log(document.readyState); //complete
      };

      //compatMode 判断模式  CSS1Compat标准模式 BackCompat混杂模式
      console.log(document.compatMode) //CSS1Compat

      //获取header元素
      console.log(document.head)//<head></head>

字符集属性

   /* 
        我们可以使用 charset 获取默认字符集
         <meta charset="UTF-8" /> 可以通过meta标签修改
       */
      console.log(document.charset)//UTF-8

自定义属性

html5 的自定义属性使用 data-xxx 的形式 , 我们可以使用dataSet 来获取,返回DOMStringMap, 可以用属性的形式获取自定义属性,但是兼容性不好ie11 才支持

      var hehe = document.getElementsByClassName('ppap apple')[0];
      console.log(hehe.dataset)//DOMStringMap 

      //没有就设置 有就更改
      hehe.dataset.ppap = 'lalal'
      console.log(hehe.dataset.ppap)//lalal 没有undefined

插入标记

innerHTML 会返回元素所有的子节点的字符串,同样我们可以使用html字符串来更改innerHTML, outerHTML与innerHTML的用法相同但是他返回的字符串包括元素本身

      var hehe = document.getElementsByClassName('ppap apple')[0];
      console.log(hehe.innerHTML) //<div>layer1</div> <div>layer1</div>
      hehe.innerHTML = '<div class="ppap">jasad</div>'

      console.log(hehe.outerHTML)//<li class="ppap apple" id="hehe"><div class="ppap">jasad</div></li>

insertAdjacentHTML在元素的前后或者内部插入元素

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

      // 在之前插入
      hehe.insertAdjacentHTML("beforebegin",' <li class="ppap">100</li>');
      // 在当前元素内的第一个元素前插入
      hehe.insertAdjacentHTML("afterbegin",' <li class="ppap">101</li>');
      // 在当前元素的最后一个元素之后插入
      hehe.insertAdjacentHTML("beforeend",' <li class="ppap">102</li>');
      // 在之后插入
      hehe.insertAdjacentHTML("afterend",' <li class="ppap">103</li>');

scrollIntoView()方法

html所有元素都可以调用传true或不传, 调用时元素会出现在可视窗口的顶部, false为可能的显示完整元素

      var hehe = document.getElementsByClassName('ppap apple')[0];
      var uu = document.getElementById('hehe');
      window.onload = function(){
        console.log(0)
        hehe.scrollIntoView(true);//chrome 刷新无效
      }
      uu.onclick = function(){
        this.scrollIntoView(false);
      }

4.专有扩展:

文档模式

强制浏览器以某种模式渲染<meta http-equiv="X-UA-Compatible" content="ie=edge" /> ie=edge保持最新

children属性

跟childNodes相同 children只包含元素节点

  console.log(uu.children)//HTMLCollection

contains方法

contains用来检测后代节点, 包含返回true 否则返回 false , compareDocumentPosition 用来确定节点间的关系,返回掩码, 0无关 , 2居前, 4居后 8包含 16被包含.

var hehe = document.getElementsByClassName('ppap apple')[0];
      var uu = document.getElementById('uu');
      console.log(uu.children)//HTMLCollection

      /* 
        之所以是20 是由于 li节点在DOM树中位于ul节点之后,同时ul节点包含li节点
        所以两个掩码相加等于20
       */
      console.log(uu.compareDocumentPosition(hehe))//20

插入文本

innerText用于获取元素节点的全部文本节点, 读取时将子文档的全部文本连接起来,写入时,删除所有子节点,将文本节点插入,textContent与innerText基本相同,用来兼容ff,但ff已经支持innerText

滚动

scrollIntoViewIfNeeded 当页面视口显示元素才滚动至可见, 但只有chrome,opera支持其他都报错, 所有浏览器都支持scrollIntoView

      uu.onclick = function(){
        hehe.scrollIntoViewIfNeeded();
      }