前端开发 JS 08 DOM 1级扩展
前端

前端开发 JS 08 DOM 1级扩展

DOM模型自诞生之日，各个浏览器厂商针对DOM操作都编制了自己的API，现在一些广泛使用的API已经事实上被W3C作为通用的API。 之前的DOM模型是DOM 1级的内容，所有的现代浏览器都已经完整的实现了DOM 1级的内容，所以DOM 1级实际上不太会有浏览器兼容问题。对DOM 1级的扩展主要是S

DOM模型自诞生之日，各个浏览器厂商针对DOM操作都编制了自己的API，现在一些广泛使用的API已经事实上被W3C作为通用的API。 之前的DOM模型是DOM 1级的内容，所有的现代浏览器都已经完整的实现了DOM 1级的内容，所以DOM 1级实际上不太会有浏览器兼容问题。对DOM 1级的扩展主要是Selector API 和 HTML5相关内容。这些基本上也都被现代浏览器支持。

Selector API

selector API就是浏览器原生支持CSS查询的接口，和CSS的选择器的工作方法很类似，都是通过一个CSS解析器实现的。现代浏览器都支持该API。

Selector API 主要就是三个方法：

  1. .querySelector("css-selector")调用这个方法的对象可以是document类型或element类型。这个方法的参数是一个css选择符的写法，也就是标签直接写，id加#号，css类用.classname这个方法是返回找到的第一个元素。如果选择符错误会报错。
  2. querySelectorAll("css-selector")这个方法会以NodeList对象返回所有找到的元素，即使只有一个元素，也是NodeList对象。
  3. matchesSelector("css-selector")这个方法在Chrome里是webkitMatchesSelector()方法，用于判断调用的元素与这个选择符是否匹配。

元素遍历

之前DOM 1级的原生方法是.childNodes，这个方法很多时候会将包含换行符等字符的text 节点也一并返回，很多时候不方便操作，要进行额外的判断。考虑到实际操作DOM主要操作元素节点，因此扩展了一些只针对元素节点的查询方法。
Element Traversal 元素遍历
方法或属性名 解释
.childElementCount 返回子元素（不包括文本节点和注释节点）的个数
.firstElementChild 指向第一个子元素节点
.lastElementChild 指向最后一个子元素节点
.previousElementSibling 指向前一个同级元素。
.nextElementSibling 指向后一个同级元素

HTML5 对DOM的扩展

与类相关的扩充

  1. .getElementsByClassName("name")这个方法是通过CSS类名来查询元素，可以对所有DOM对象和元素调用该方法，寻找其后代中所有符合条件的元素，返回NodeList。
  2. .classList所有HTML元素都具有该属性，相比.className，如果CSS类有多个，这个属性返回一个DOMTokenList，也是类似于数组的对象。这个属性的方法有：
    • .item(index)或者索引取值
    • .add(string)将给定的字符串类名添加到数组中，也就给元素添加了一个新CSS类
    • .contains(string)检测是否包含某个类名
    • .remove(string)删除某个类名
    • .toggle(string)切换类，如果有该类名就删除，没有就添加。

焦点管理

焦点管理就是 document.activeElement指向当前在DOM中获得焦点的元素。 元素获得焦点的方式有页面加载、用户输入（通过按Tab键）和在代码中调用.focus()方法。 document.hasFocus()用于确定文档是否获得了焦点。

HTMLDocument的变化

HTML为document对象还引入了新的一些属性，这些属性是所有浏览器都支持的：
Document 新增属性
方法或属性名 解释
.readyState 这个属性是HTML5 标准，用于描述文档是否加载。返回两个值：loading 或 complete，表示文档是否加载完毕。一般用这个属性进行判断。
.head 直接指向head元素，是对.body属性的补充。
.charset 字符集，与在meta标签内设置的一样。最好不要修改。
.defaultcharset 表示默认浏览器和操作系统的字符集，有可能与.charset属性不一致。Chrome无此属性。
.dataset 返回自定义属性的键值对。HTML要求自定义属性用data-开头，这样就可以被这个属性所捕获。
.innerHTML 将当前节点的全部后代以HTML的标记返回。可以被设置，设置之后会替换其中所有内容。
.outerHTML 返回自定义属性的键值对。HTML要求自定义属性用data-开头，这样就可以被这个属性所捕获。
.insertAdjacentHTML(location,HTMLtext) 将HTML文本插入到当前元素的某个位置，位置用字符串表示，有四个，其实很好理解，就看描述即可。后边专门解释。
.scrollIntoView(Boolean) 可以在所有HTML元素上调用，如果传入true，元素会尽可能出现在靠近视口上方，如果false，则尽可能完全展现元素，也就可能想靠近视口下方。
  单独解释一下.insertAdjacentHTML(location,HTMLtext)方法： location有四个位置：
  1. "beforebegin"，插入成为之前一个同级元素。
  2. "afterbegin"，插入成为第一个子元素。
  3. "beforeend"，插入成为最后一个子元素。
  4. "afterend"，插入成为之后紧挨的同级元素。
innerHTML, outerHTML, .insertAdjacentHTML(location,HTMLtext)方法的性能比较高，在小范围操作DOM的时候，优先推荐这三个方法。此外要注意，如果其中的内容绑定了事件，在修改内容的时候，最好先去除绑定事件，否则事件的内存不会被回收。

专有扩展-浏览器兼容性考虑

上边 的DOM扩展部分所有浏览器都支持，下边还有一部分扩展只有部分浏览器支持，不过主要是IE不支持，如果不考虑IE兼容性，其实简单很多。
Document 专有扩展属性
方法或属性名 解释
文档模式 通过meta标签内的http-equiv属性使用，看一下Bootstrap的样式对head部分的要求就明白了。
.children 返回元素的所有子元素，不包含文本和注释等节点。
.contains(node) 参数的节点是调用方法的节点的后代，返回true，否则返回false
.innerText 返回节点之内的所有文本内容，包含所有后代，会过滤掉HTML标签。该属性可以设置，会替换其中所有内容。注意，写入的时候特殊字符会被转义，而且会生成当前节点下的一个（只有一个）文本节点。
.outerText 与innerText类似。包含自身。也可以设置属性。
.scrollIntoViewIfNeeded(boolean) 如果当前元素在视口内不可见，就滚动窗口让其可见。如果传入true表示尽量让元素垂直居中
LICENSED UNDER CC BY-NC-SA 4.0
Comment