Dom扩展

乖_摸摸头
108 阅读3分钟

选择符API:

  1. querySelector()：接收一个css选择符，返回与该元素匹配的第一个元素，若无，返回null
  2. querySelectorAll()：接收一个css选择符，返回一个匹配的nodeList对象，若无，nodeList为空
  3. matchesSelector()：接收一个css选择符，如果调用元素与选择符匹配返回true，否则返回false。
  4. 元素遍历（不包括文本节点和注释）
  • childElementCount：返回子元素的个数
  • firstElementChild：指向第一个元素
  • lastElementChild:指向最后一个元素
  • previousElementSibling：指向前一个同辈元素
  • nextElementSibling:指向下一个同辈元素

HTML5--与类（class）相关的扩充

  1. getElementsByClassName()方法：可以通过documnet或者其他html元素调用，接收一个包含一个或多个类名的字符串(类名的先后顺序无所谓)，返回带有指定类的所有元素的nodeList
  2. classList属性：可以通过documnet或者其他html元素调用，返回包含所有class的一个列表
  • add(value):将给定的字符串添加到列表中，如果已存在，则再不添加
  • contains(value):列表中是否存在给定的值，如果有返回true,否则返回false
  • remove(value):从列表中删除给定的字符串
  • toggle(value)：从列表中搜索给定的值，如果没有，添加，如果已经存在，则删除它
  1. 焦点管理
  • doucment.activeElement,这个属性始终会引用dom中获取到了焦点的元素
  • document.hasFocus(),这个方法用于确定文档是否获取了焦点
  1. HTMLDocument的变化

  • readyState属性，通过它来实现一个指示文档已经加载完成的指示器。有两个值：loading(正在加载文档)和complete(已经加载完文档)

  • 兼容模式：compatMode属性，标准模式下等于“CSS1Compat”,混杂模式下，document.compatMode的值等于“backCompat”

  • head属性，应用文档的head元素，使用方式如下

  • var head=document.head||document.getElementByTagName("head")[0]

  1. 字符集属性：
  • charset属性：使用方式：document.charset
  • dedaultCharset属性：使用方式：document.defaultCharset
  1. 自定义数据属性
  • 定义：为元素添加非标准的属性，目的是为了给元素添加与渲染无关的信息。这些属性可以任意添加，随意命名，只要以data-开头即可
  • eg：
  • 取值方式：var appid=div.dataset.appid
  • 设置值：div.dataset.appid='23453'

  1. 插入标记

  2. innerHTML属性

  • 读模式下，返回调用元素的所有节点对应的HTML标记
  • 写模式下，会根据指定的值创建新的dom树，然后用这个dom树完全替换调用元素原先的所有子节点。
  1. outerHTML属性
  • 读模式下，返回调用它的元素及所有子节点的HTML标签。
  • 写模式下，会根据指定的HTML字符串创建新的DOM子树，然后用这个dom子树完全替换调用元素。
  1. insertAdjacentHTML()
  2. 内存与性能问题
  • 使用以上三个替换子节点的方法可能会导致浏览器的内存占用问题。在删除带有事件处理程序或引用了其他js对象子树时，就有可能导致内存占用问题。
  • 在使用以上三个属性将元素从文档中删除之后，元素与事件处理程序之间的绑定关系并没有从内存中一并删除。
  1. scrollIntiView()方法
  • 可以在所有html元素上调用
  • 入参为true或者不传入任何参数，窗口滚动之后会让调用元素的顶部与视口顶部尽可能平齐
  • 入参为false，调用元素会尽可能全部出现在视口中，可能的化调用元素的底部会与视口平齐。
  1. 专有扩展，没有成为标准，只被少数浏览器支持

  • 文档模式：documentMode

  • children属性

  • contains方法

  • 插入文本

  • innerText

  • outerText

  • 滚动

  • scrollIntoViewIfNeeded(alignCenter):当前元素在不可见的情况下，滚动视口让它可见，如果已经可见，不做任何操作

  • scrollByLines(lineCount)：将元素的内容滚动到指定的行高，lineCount可以是正值也可以是负值

  • scrollByPages(pageCount)：将元素的内容滚动到指定的页面高度。

avatar
文章
阅读
粉丝