HTML5 DOM API详解-优快云博客

一、选择符API

JS库中最常用的一项功能，就是根据CSS选择符选择与某个模式匹配的DOM元素。实际上，jQuery的核心就是通过CSS选择符查询DOM文档取得元素的引用，从而抛开了getElementById()和getElementsByTagName()。

选择符API的两个核心方法
方法	参数	备注
querySelector()	接收一个CSS选择符	这两个方法都可以通过Document及Element类型的实例调用它们返回值：返回与该模式匹配的第一个元素，如果没有找到匹配的元素，返回null
querySelectAll()	接收一个CSS选择符	返回值：返回的是所有匹配的元素而不仅仅是一个元素。该方法返回的是一个NodeList的实例。具体来说，返回的值实际上是带有属性和方法的NodeList，而其底层实现类似于一组元素的快照，而非不断对文档进行搜索的动态查询。

【示例querySelector()方法】

【示例querySlectorAll()方法】

<body>
   <div id="app" title="xsxsxs" lang="en" dir="ltr">
       <ul id="app2">
           <li>哈哈哈</li>
           <li>呵呵呵</li>
           <li>六六六</li>
           <li>
               <ol>
                   <li>123</li>
                   <li>321</li>
                   <li>231</li>
               </ol>
           </li> 
       </ul>
   </div>
    <script type="text/javascript">
        //取得div中所有的li元素
        var lis = document.getElementById('app').querySelectorAll('li');
        alert(lis.length);//7
    </script>
</body>

二、元素遍历

有的浏览器返回文本节点，有的不返回。为了弥补这一差异，新定义了一组属性。

元素遍历API
属性	返回值	备注
childElementCount	返回子元素（不包括文本节点和注释）的个数
firstElementChild	指向第一个子元素：firstChild的元素版
lastElementChild	指向最后一个子元素：lastChild的元素版
previousElementSibling	指向前一个同辈元素
nextElementSibling	指向后一个同辈元素

三、焦点管理

HTML5添加了辅助管理DOM焦点的功能。首先就是document.activeElement属性，这个属性始终会引用DOM中当前获得了焦点的元素。元素获得焦点的方式有页面加载、用户输入，Tab键以及在代码中调用focus()方法。

焦点管理方法或属性
方法或属性	参数/返回值	备注
focus()	无参，获取焦点
activeElement	该属性始终会引用当前获得了焦点的元素
hasFocus()	该方法用于确定文档是否获得了焦点	通过检测文档是否获得了焦点，可以知道用户是不是正在与页面交互

四、HTMLDocument的变化

readyState属性
属性值	表示	备注
loading	正在加载文档	使用该属性的最大意义在于，就是通过它来实现一个指示文档已经加载完成指示器
complete	已经加载完文档

if (document.readyState == 'complete') {
            //执行操作
        }

五、contains()方法

在实际开发中，经常需要知道某个节点是不是另一个节点的后代。而contains()方法可以不通过DOM文档树查找即可获得这个信息。调用contains()方法的应该是祖先节点，即搜索开始的节点，这个方法接收一个参数，即要检测的后代节点。如果被检测的节点是后代节点，该方法则返回true；否则，则返回false。
【示例】

<body>
   <div id="app" title="xsxsxs" lang="en" dir="ltr">
       <input type="text" id="test" />
       <p id="tp">哈哈哈</p>
   </div>
    <script type="text/javascript">
        alert(document.getElementById('app').contains(document.getElementById('tp')));//true
    </script>
</body>