[TOC]

DOM API

Selector API

  • 这个扩展其实在标准未制定之前，已经在社区里使用。
  • 通过CSS选择器的模式匹配，来遍历选择节点。

  • 注意返回值NodeList对象是静态对象。

    querySelector()Document和Element类

    tip现如今网页DOM实时变化，但是该方法获取的DOM节点不是实时的，因此用的很少

    querySelectorAll()Document和Element类

  • 参数同CSS选择器字符串。

    matches()Element类

    /**
*目的：运用matches()
*参数：CSS选择器字符串
*功能：判断某个元素节点是不是匹配的元素节点
*返回值：boolean
*总结：没啥用，了解即可
*/
var oDiv2 = document.querySelectorAll('div')[0];
console.log(oDiv2.matches('div'));    //这句话的意思是oDiv2是div节点，同匹配的节点是不是一样的。
/**
输出打印结果：
true
*/

    Element Traversal API支持IE9及以上

    为了解决Node类里的节点遍历，会将元素间的空格解析成text节点。在Element类中添加了以下属性，来解决此问题。

    firstElementChild属性

    lastElementChild属性

    nextElementSibling属性

    previousElementSibling属性

    childElementCount属性

    <body>
  <div id='div1'>
        <!-- 注释 -->
      <h1>标题</h1>
      <div id='div2'>
          <span>我的前端学习之路</span>
      </div>
  </div>
  <h2>标题2</h2>
  <script>
      var oDiv2 = document.querySelectorAll('div')[0];
      console.log(oDiv2.firstElementChild);        
      console.log(oDiv2.lastElementChild);
      console.log(oDiv2.nextElementSibling);
      console.log(oDiv2.previousElementSibling);
      console.log(oDiv2.childElementCount);
  </script>
</body>
/**
输出打印结果：
<h1>标题</h1>
<div id='div2'>...</div>
<h2>标题2</h2>
null
2
*/

    DOM HTML5

    CSS类扩展支持IE9及以上

    class属性其实是为了将HTML与CSS关联起来的属性。DOM扩展方法和属性以便于对class属性的操作。

    getElementClassName()Document类

  • 参数可以是多个类名，中间用空格隔开

    classList属性Element类

  • 目的就是为了能够方便处理class属性值中的多个类名。

  • 该属性指向DOMTokenList类实例化的对象。

  • 有了这个属性className就很少用了 ```javascript //算法很复杂，来删除一个类名。那么增加类名，替换类名也差不多很复杂 

      <h1>标题</h1>

    标题2

    /* 输出打印结果： “title current” /

//通过classList集合类型来操作类名，更加方便


标题


标题2