09.第11章:DOM扩展

1. 选择符 Selectors API

包括两个方法:querySelector()和querySelectorAll()

1.1querySelector()方法

接收一个CSS选择符,返回与该模式匹配的第一个元素。


1.2 querySelectorAll()方法

返回的是NodeLIst对象


取得返回对象中的每一个元素

1.3 matchesSelector()方法

判断调用语速和选择符是否匹配


2.元素遍历新属性

对于元素间的空格,IE9及之前的版本不会返回文本节点,而其他浏览器都会返回文本节点,为了解决这一差异,新定义了一组属性。



之前实现元素遍历,需要判断该节点是不是元素



现在实现方法如下

3.HTML5中新增的DOM

3.1.和类相关
  • getElementsByClassName()
    根据类名获取元素,返回NodeList
    调用这个方法时,只有位于调用元素子树中的元素才会返回。
    在document对象上调用该方法会返回与类名匹配的所有元素,在元素上调用该方法只会返回后代元素中匹配的元素。


  • classList属性
    用于操作多个类名



3.2 焦点管理
  • document.activeElement属性,始终引用DOM中当前获得了焦点的元素。
  • document.hasFocus()方法:确定文档是否获得了焦点
3.3 HTMLDocument的变化
  • readyState属性
    包括两个可能的值:loading,正在加载文档;complete,已经加载完文档
  • 兼容模式
    在标准模式下,document.compatMode的值等于"CSSlCompat"
    在混杂模式下,document.compatMode的值等于“BackCompat”


  • head属性:Chrome和Safari 5
    引用文档的<head>元素


3.4 字符集属性
  • charset


  • defaultCharset


3.5 自定义数据属性

可以为元素添加非标准的属性,但要添加前缀data-。添加自定义属性之后,可以通过元素的dataset属性访问自定义属性的值。



3.6 插入html语句
  • innerHTML属性
    读模式下:属性返回与调用元素的所有子节点对应的HTML标记
    写模式下:根据指定的值创建DOM树,用这个DOM树替换调用元素原先的所有节点



  • outerHTML属性
    读模式:但会调用它的元素及所有子节点的HTML标签
    写模式:根据指定的HTML字符串创建新的DOM子树,用这个DOM子树完全替换调用元素。


div.outerHTML会返回和上面相同的代码。

  • insertAdjacentHTML()方法
    接收两个参数:插入位置,和要插入的HTML文本
    第一个参数是下列值之一



4.专有扩展

4.1 文档模式

文档模式决定了你可以使用哪个级别的css,可以在JavaScript中使用哪些API。

©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • 一、概述 document节点是整个文档树的顶层节点,每张网页都有自己的document节点。window.doc...
    周花花啊阅读 1,435评论 0 1
  • DOM 变化 如何确认浏览器是否支持 DOM 2 和 DOM 3 新增的模块:var supportsDOM2Co...
    云之外阅读 544评论 0 0
  • 我们知道事业需要经营,可曾想过,感情,无论亲情、友情、爱情,其实也需要花时间、心思和精力去好好经营? 02|亲情篇...
    落Lee阅读 1,076评论 0 0
  • 《呼唤和平》 ——至叙利亚人民和所有热爱和平的人 多少战机在天空中轰鸣 多少血光在子弹间辉映 那抛下的是众叛亲离 ...
    Change_ec79阅读 357评论 0 1
  • One Day 每当仰望雨后的天空 就会浮现出那个爱哭的自己 曾经疯狂地追赶着某个人 曾经希望能变得更强大 现在消...
    灵聪阅读 180评论 0 0

友情链接更多精彩内容