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

本文深入探讨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();
      }

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值