元素与文本
Element 提供哪些属性与属性操作？
| 成员 | 作用 |
|---|---|
tagName / nodeName | 标签名 (全大写) |
id / className | id / class 属性 |
classList | class 集合 (DOMTokenList) |
textContent | 元素及其后代的文本内容 |
innerHTML / outerHTML | 内部 / 含自身的 HTML 字符串 |
getAttribute(name) / setAttribute(name, value) | 读取 / 设置属性字符串 |
removeAttribute(name) / hasAttribute(name) | 移除属性 / 是否存在属性 |
getAttributeNames() | 全部属性名 |
matches(selectors) | 是否匹配 CSS 选择符 |
自定义数据属性如何使用？
- 写法:
data-xxx属性保存自定义数据;
<div id="myDiv" data-appId="12345" data-myname="Nicholas"></div>
- 访问: 通过
getAttribute("data-appId")或dataset读取;
Text 提供哪些文本操作？
| 成员 | 作用 |
|---|---|
data / nodeValue | 文本内容 |
length | 字符数量 |
appendData(data) | 追加文本 |
deleteData(offset, count) | 从 offset 起删除 count 个字符 |
insertData(offset, data) | 在 offset 处插入 |
replaceData(offset, count, data) | 替换区间文本 |
substringData(offset, count) | 提取区间文本 |
splitText(offset) | 在 offset 处拆分, 返回新文本节点 |
文本节点数量有什么限制？
- 规范建议: 每个元素最多一个文本节点;
- 实际允许: 可以存在多个相邻文本节点, 因此遍历子节点时要按
nodeType过滤;