第11章 DOM扩展

呓语ya
226 阅读3分钟
  • querySelector()：接收一个css选择符（就像css中写选择器一样的格式），返回与该模式匹配的第一个元素。没找到就返回null。Element和Document和DocumentFragment都拥有改方法。document或着元素调用。
  • querySelectorAll()：返回的是匹配的所有元素组成的一个NodeList的实例。其他和querySelector()一样。

元素遍历

为元素添加了五个属性简化操作：

  • childElementCount
  • firstElementChild
  • lastElementChild
  • previousElementSibling
  • nextElementSibling

HTML5

与类相关扩充

  • getElementByClassName()：接受一个参数：一个或多个类名的字符串，返回NodeList对象。document或者元素可以调用。

divs=document.getElementByClassName(cc bb); //取得类名为cc 并且有bb的元素

classList：元素类特性对应的属性，className是放在一起的，这里是把多个类分开放，有了这个除法要重写class特性或者删除全部类，不然className完全可以用classList替换。方便多个类名的元素进行操作。该属性拥有如下属性和方法：
  • add(value)：将给定的字符串添加到列表中。如果值已经存在，就不添加了。
  • contains(value)：列表中是否存在这个类，存在就返回true
  • remove(value)：删除
  • toggle（value）：有则删除，无则添加。

焦点管理

  • document.activeElement属性：始终指向当前获得焦点的元素。文档刚加载完成时，document.activElement属性中保存的是document.body元素的引用，加载期间为null。
  • focus()：元素的方法，可以获得焦点。
  • document.hasFocus()：有焦点元素则返回true

HTMLDocument的变化

以下为document新增属性：

  • readyState属性：文档已经加载完成的指示器，有两个可能的值：
  1. loading，正在加载文档
  2. complete，已经加载完文档

if(document.readyState=="complete"){
   执行某些操作
}

  • compatMode：CSS1Compat标准模式，BackCompat混杂模式
  • head：表示<head>节点
  • charset：读取或设置字符集。defaultCharset为系统默认字符集

自定义数据属性

自定义特性一般data-前缀开头。

自定义特性都放在dataset属性中，不过dataset是名值对组成的对象，不是类数组。访问前要取掉data-前缀。

如我为element元素定义了data-myname特性。访问的时候可以element.dataset.myname。

当然也可以getAttribute()。

插入标记

  • innerHTML属性：读取或者设置调用它的元素的子元素HTML标记（字符串），设置时替换所有子元素。但是设置的字符串中有<script>或者事件时，不能正常执行。
  • outerHTML属性：包含调用元素本身。其他与innerHTML一样
  • insertAdjacentHTML()：根据参数决定HTML插在哪里。P297
以上方法插入节点，会导致性能问题。删除某个元素时，元素与事件处理程序之间的绑定关系在内存中并没有删除。但是没有事件和JavaScript相关的内容时，用innerHTML效率更高。

插入文本

  • innerText：只读取子节点的文本。设置时完全替换子节点
  • outText：包含自己

children属性

contains：祖先元素调用，判断参数是不是子节点，是则返回true

滚动

  • scrollIntoView()：常用，使元素出现在视口中。参数false的时候全部出现。
  • 另外不常用滚动P11



avatar
文章
阅读
粉丝