选择符API

  • querySelector()方法

    querySelector()方法接收一个css选择符,返回鱼该模式匹配的第一个元素，如果没有找到匹配的元素就返回null。
通过Document类型调用querySelector()方法，会在整个文档范围内查找匹配
通过Element类型调用querySelector()方法，会在整个后代范围内查找匹配

  • querySelectAll()方法

    与quertSelector()方法使用方式一样
但是会返回匹配的一个NodeList对象，性能没有querySelector()好

  • matchesSelector()方法

    如果调用元素与该css选择符匹配就会返回true，否则返回false，有兼容性问题

元素遍历

  • childElementCount：返回子元素（不包括文本节点和注释）的个数
  • firstElementChild：指向第一个元素：firstChild的元素版
  • lastElemntChild：指向最后一个子元素：lastChild的元素版
  • previousElmentSibling：指向前一个同辈元素：preViousSibling的元素版
  • nextElmentSibling：指向后一个同辈元素：nextSibling的元素版

HTML5

  • getElementsByClassName()方法：可接收一个或多个类名，顺序不分前后

  • classList属性：获取类名集合

    • add(value)：将给定的字符串值添加到列表中，如果值已存在就不再天机了
    • contains(value)：表示列表中时候存在给定的值，如果存在则返回true，否则返回false
    • remove(value)：表示列表中存在给定的值的时候，删除给定的字符
    • toggle(value)：如果列表中有存在给定的值，删除它，如果列表中没有存在给定的值就添加该值

  • 焦点管理

    • document.activeElement：获得当前文档获得焦点的元素
    • document.hasFocus()：判断当前文档是否获取了焦点

  • HTMLDocument

    • readyState：如果为loading，正在加载文档，如果为complete，已经加载完文档

  • 自定义数据属性

    • data-自定义属性：可通过dataset属性访问

  • 插入标记

    • innerHtml：不支持innerHtml的有,,,,,