JS红皮书读书笔记-11-DOM扩展

TOC
  1. 1. 选择符API
    1. 1.1. querySelector
    2. 1.2. querySelectorAll
    3. 1.3. matchesSelector
  2. 2. 元素遍历
  3. 3. HTML5
    1. 3.1. 扩展与Class相关的操作
    2. 3.2. 焦点管理
    3. 3.3. HTMLDocument的变化
    4. 3.4. 字符集属性
    5. 3.5. 自定义数据属性
    6. 3.6. 插入标记
    7. 3.7. 插入文本
    8. 3.8. 滚动

上一章讲了DOM相关的知识, 对此, DOM相关的API已经能满足绝大部分开发者的使用了. 但是jQuery实在是太强大, 以至于W3C对其选择器进行了参考, 而后进行了扩展.

选择符API

querySelector

用法:

var body = document.querySelector('body');
var id_body = document.querySelector('#body');
var class_body = document.querySelector('.body');

querySelectorAll

用法:

var divs = document.querySelectorAll('div');
var class_divs = document.querySelectorAll('.div');

matchesSelector

笔者写此文的时候(2019年),此API已作废, 正确的API为 matches

此API用得比较少:

var body = document.body;	// 假设body.id="Jbody"
body.matches('#Jbody'); //true

元素遍历

略, 此处的API有点鸡肋

HTML5

这里只讲HTML5中与DOM相关的新扩展.

扩展与Class相关的操作

  1. 新增getElementByClassName
    显然这个方法受到了jQuery的启发.

  2. 新增classList的操作
    它又以下几个方法:

  • add(value)
  • remove(value)
  • contains(value)
  • toggle(value)

以往我们删除(注意这里说的是删除)一个元素中的class中的某个值会比较麻烦,现在有了classList, 我们可以:

div.classList.remove('test');

焦点管理

新增:

  • document.activeElement: 当前焦点元素
  • document.hasFocus() : 检测文档是否获得焦点

HTMLDocument的变化

  1. 引入readyState: document. readyState 只有两种值: ‘loading’||’complete’
  2. 兼容模式: document.compatMode , 标准模式下它的值是 “CSS1Compat”,通常我们用不到这个属性
  3. head属性: 类似document.body

字符集属性

document.charset, 略

自定义数据属性

为了规范DOM元素中的自定义属性行为, HTML为开发者提供了自定义数据的属性, 看示例:

var div = Jdiv; //假设存在一个这样的元素: <div id="Jdiv" data-id="testDiv"></div>

//获取自定义属性的值
var _id = div.dataset.id; // "testDiv"

// 设置
div.dataset.name = "testdog"; // "testdog"

插入标记

  1. innerHTML

HTML5对这个属性做了一次加强, 比如:

// 在现代浏览器下, script标签会被忽略, 但是旧版本的IE依旧需要注意
document.body.innerHTML = '<script>alert(1)</script>';

// 另外, 使用innerHTML一定要注意XSS的问题
document.body.innerHTML = '<img src="不存在的地址" onerror="alert(1)">';

书上说: “并不是所有元素都支持innerHTML属性”, 这句话已经过时, 谨慎参考.

  1. outerHTML: 略
  2. insertAdjacentHTML(插入位置, html字符串)
    实际上这个方法早在IE就实现了(IE6都能用), 看下列示例很容易明白:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<!-- beforebegin -->
<p id="one">
<!-- afterbegin -->
foo
<!-- beforeend -->
</p>
<!-- afterend -->
<script>
var d1 = document.getElementById('one');
d1.insertAdjacentHTML('afterend', '<div id="two">two</div>');
</script>
</body>
</html>
```

4. 内存和性能问题:
使用innerHTML意味着性能的开销, 如非必要, 尽量少用innerHTML

### scrollIntoView方法
ele. scrollIntoView()即可让元素滚动到与浏览器窗口顶部.

## 专有扩展
### 文档模式
略, 现在都用HTML5文档

### children属性
还记得之前的ele.childNodes吗? 虽然它返回的是nodeList对象, 但是nodeList中的元素节点, 其实就和ele.children是类似的, 只不过children返回的是HTMLcollection.

### contains方法
要检查一个元素是不是某一个节点的后代:
``` js
ele.contains(oneNode); // bool

当然DOM3也提供了一个方法:

ele1.compareDocumentPosition(ele2);

这有一个参考: MDN-compareDocumentPosition , 但是因为这个API返回的结果还要进行位运算, 操作相对麻烦, 故不流行.

插入文本

innerText, outerText , 只操作文本内容.

滚动

略, 目前ele. scrollIntoView()最常用.

访客评论