码迷,mamicode.com
首页 > Web开发 > 详细

HTML5 DOM扩展

时间:2017-06-13 22:41:51      阅读:199      评论:0      收藏:0      [点我收藏+]

标签:post   自定义属性   array   script   html元素   head   element   char   节点   

一.选择符API

1. querySelector()方法 :接收一个CSS选择符 ,返回与该模式匹配的第一个元素,若没有匹配到返回null。

   其中通过Document类型调用querySelector()方法时,会在文档元素范围内查找匹配元素;

        如var body =  document.querySelector("body");

        通过Element类型调用querySelector()时,只会在该元素后代元素的范围内查找匹配元素

        如var img = document.body.querySelector("img.button");

2. querySelectorAll()方法 :接收一个CSS选择符 ,返回与该模式匹配的所有元素,返回一个Nodelist实例(类Array)若没有匹配到返回null。

     所以可以使用Array的一些熟悉如item() [] length

3. matchesSelector()方法:接收一个css选择符,如果调用元素与该选择符匹配,返回true。否则返回false.

二.元素遍历

    对于元素间的空格,IE9及之前版本不会返回文本节点,而其他所有浏览器都会返回文本节点点。这样会导致用DOM0时使用childNodes和firstChild等熟悉时的行为不一致。为了弥补这一差异 Element Traversal API 为DOM元素添加了一下5个属性:

    childElementCount: 返回子元素的个数(不包括文本节点和注释)

    firstElementChild: 指向第一个子元素 (firstchild的元素版)

    lastElementChild: 指向最后一个子元素 (lastchild的元素版) 

    previousElementSibling:指向前一个同辈元素

    nextElementSibling:指向后一个同辈元素  

三.HTML5与JavaScript的扩充

1.getElementsByClassName()方法:接收一个参数包含一个或多个类名字符串(类名的先后顺序不重要)返回带有指定类的所有元素的NodeList。

   好处:方便地为带有某些类的元素添加事件处理程序,从而不必再局限于使用ID或标签名

2.HTML5新增了classList属性 来操作类名的。 add(value):将指定的字符串添加到列表中。如果值已经存在,就不添加了

  contain(value)表示列表中是否存在给定的值,如果存在则返回true ;remove(value)从列表中删除给定的字符串;

  toggle(value) 如果列表中已经存在给定的值,删除它,如果列表中没有给定的值则添加它。

  注:有了classList属性,除非你需要全部删除所有类名,或者完全重写元素的class属性,否则就用不到className属性了

       目前支持classList属性的浏览器有Firefox3.6+ 和chrome

3.焦点的管理

   首先是document.activeElement属性  获得焦点是document.activeElement属性的值为true 默认情况下文档刚刚加载完成时,

   document.activeElement中保存的是document.body元素的引用。文档加载期间,document.ativeElement的值为null.

   然后是document.hasFocus()方法 用于确定文档是否获得了焦点

    目前实现这两种属性的浏览器包括IE4+ firefox3+ safari4+ chrome 和Opera8+

4.在HTML5中HTMLDocumenet的变化

   1.document.readyState属性用于保存两个可能的值一是loading 正在加载文档 二是complete已经加载完文档

    以前实现这两种属性的浏览器包括IE4+ firefox3.6+ safari chrome 和Opera9+但现在HTML5纳入了标准

   2.document.compatMode的值 在标准模式下是CSS1Compat 在混杂模式是BackCompat

    以前实现这两种属性的浏览器包括IE6+ firefox safari3.1+ chrome 和Opera但现在HTML5纳入了标准

   3.document.head属性 它与document.getElementByTagName("head")[0]是一样的

      可使用 var  head = document.head  || document.getElementByTagName("head")[0] 来实现兼容

   4.document.charset HTML5中默认使用的是“UTF-16”  可使用这个属性来进行设置成"UTF-8"

      document.defaultCharset属性默认的字符集

      支持document.charset 属性的浏览器有IE、firefox safari opera chrome

      支持document.defaultCharset属性的浏览器有IE safari chrome

   5.如果需要给元素添加一些不可见的数据以便进行其他处理,那就要用自定义数据属性。在跟踪链接或混搭应用中,通过自定义数据属性能便

      地知道点击来自页面中的哪个部分 在HTML5中使用创建自定义属性是前面要加一个前缀

      目前支持自定义数据属性的浏览器有Firefox6+ 和chrome

   6.innerHTML属性返回与调用元素的所有子节点对应的HTML标记(包括元素、注释和文本节点) 使用innerHTML属性有些限制:一是通过

      innerHTML插入<script>元素并不会执行其中的脚本(读模式和写模式的概念与差别还不清楚)

      outerHTML属性返回调用它的元素及所有子节点的HTML标签;它显示的内容还包括最为一层的标签

      支持outerHTML属性的浏览器有IE4+ safari4+ chrome 和Opera8+ firefox8+

      insertAdjacentHTML()方法,它是插入标记的新增方式;接收两个参数:插入位置和要插入的HTML文本

      第一个参数有4个选项且必须是小写 :一是beforebegin:在当前元素之前插入一个紧邻的同辈元素 ;二是afterbegin,在当前元素之下插

      入一个新的子元素或者在第一个子元素之前再插入新的子元素;三是beforeend:在当前元素之下插入一个新的子元素或者在最后一个子元

      素之后再插入新的子元素; 四是afterend,在当前元素之后插入一个紧邻的同辈元素。

      如element.insertAdjcentHTML("afterend","<p> hello world !</p>")   //作为后一个同辈元素插入

    7.HTML5标准scrollIntoview()控制页面滚动 它可以再所有HTML元素上调用,通过滚动浏览器窗口或某个容器元素,调用元素就可以出现在

    视口中

四.专有扩展

    1.document.documentMode用于返回IE当前的文档模式。

    2.element.children属性与elementchildNodes没有区别,都表示一个节点的子节点数组

    3.document.documentElement.contains()通过它可以判断某个节点是不是另一个节点的后代。

HTML5 DOM扩展

标签:post   自定义属性   array   script   html元素   head   element   char   节点   

原文地址:http://www.cnblogs.com/hello-web/p/7003722.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!