dom扩展

第十一章 DOM扩展

一.选择符API

1.querySelector()方法

            接收一个CSS选择符，返回与该模式匹配的第一个元素，如果没有找到匹配的元素，返回null。

2.querySelectorAll()方法

        返回所有名为xxx的元素。

3.matchesSelector()方法

二.元素遍历

三.HTML5

1.与类相关的扩充

                1).getElementByClassName()方法

                    //取得所有类中包含“username”和“current”的元素，类名的先后顺序无所谓

                    var allCurrentUsernames = document .getElementByClassName("username current");

                    //取得ID为“myDiv”的元素中带有类名“selected”的所有元素

                    var selected = document.getElementById("myDiv").getElementByClassName("selected");

                2).classList属性

                   add(value):将给定的字符串值添加到列表中

                    contains(value):表示列表中是否存在给定值

                    remove(value):删除给定字符串

                    toggle(value):如果有，删除，没有就添加 

2.焦点管理

                元素获得焦点的方式有页面加载、用户输入、在代码中调用focus（）

                document.activeElement属性

                document.hasFocus()方法

                -通过检测文档是否获得了焦点，可以知道用户是不是正在与页面交互

3.HTMLDocument的变化

                1）readyState属性

                    loading 正在加载文档

                    complete 已经完成加载

                2）兼容模式

                    compatMode属性

                3）head属性

                    var head=document.head||document.getElementsByTagName("head")[0];

                    //如果可用，就用head属性，否则使用后者

4.字符集属性

                charset属性表示文档中实际使用的字符集

                defaultCharset表示根据默认浏览武器及操作系统设置，当前文档的默认字符集应该是什么

5.自定义数据属性

                html5规定可以为元素添加非标准的属性，但要添加data-，

                谈加厚可以用元素的dataset访问

6.插入标记

            1）innerHTML属性

                标签的innerHTML为标签内所包含的内容（不同浏览器返回的大小写有所区别）

                通过innerHTML插入<script>无效

                可插入style元素

            2）outerHTNL属性

               替换元素 

            3）insertAdjacentHTML()方法

                包含两个参数，一个是要插入的位置，另一个是要插入的文本

                第一个参数:

                "beforebegin",在当前元素之前插入一个紧邻的同辈元素

                "afterbegin",在当前元素的下一辈插入子元素，子元素在之前存在的子元素之前

                "beforeend",在当前元素的下一辈插入子元素，子元素在之前存在的子元素之后

                "afterend",在当前元素之后插入一个紧邻的同辈元素

            4）内存与性能问题

                避免：

               for（var i=0,len=values.length;i<len;i++）{

                        ul.innerHTML+="<li>"+values[i]+"</li>";

               }

                推荐方法：

                var itemsHTML=“”；

                for（var i=0,len=values.length;i<len;i++ ）

                {

                    itemsHTML+="<li>"+values[i]+"</li>";

                 }

                ul.innerHTML=itemsHTML;//一次性添加

7.scrollIntoView()方法

                通过滚动浏览器窗口或某个元素内容，调用元素就可以出现在视口中。     

四.专有扩展

1.文档模式

2.children属性

                见上一章

3.contains()方法

                检查节点是否为另一个节点的后代

4.插入文本

                1）innerText属性

                    返回标签内的文本（不同浏览器空白符不同）

                    使用innerText设置值

                    div.innerText="hello world";

                2)outerText属性

                    除了作用范围扩大到了包含调用它的节点之外，outerText与innerText基本上没区别。

                    新文本节点替换旧文本节点

5.滚动（以下仅支持Safari和Chrome）

                scrollIntoViewIfNeeded():在元素不可见的情况下，滚动至该元素，设置为TRUE为让元素显示在视窗中央                                           

                 scrollByLines(lineCount):将元素滚动指定行高，参数可正可负

                scrollByPages（pageCount）:将元素的内容滚动到指定页面高度，具体高度有元素的高度决定