DOM
节点
- 整个文档是一个文档节点
- 每个 HTML 元素是元素节点
- HTML 元素内的文本是文本节点
- 每个 HTML 属性是属性节点
- 注释是注释节点
方法
获取
原生
| 原生方法 | 描述 |
|---|---|
| getElementById() | 返回带有指定 ID 的元素。 |
| getElementsByTagName() | 返回包含带有指定标签名称的所有元素的节点列表（集合/节点数组）。 |
| getElementsByClassName() | 返回包含带有指定类名的所有元素的节点列表。 |
| querySelector() | document.querySelector('#q1') |
| querySelectorAll() |
jQuery选择器
| 选择器 | 方法 |
|---|---|
| 层级选择器 | 空格$, ('a b') |
| 直属子选择器 | ">", 直属子节点, $('parent>child') |
| 所有子节点中查找 | find()方法 |
| 过滤器 | ":", $('div:visible') |
| 过滤函数 | filter()方法 |
| 向上查找 | parent()方法 |
| 同一层级的节点 | next()和prev()方法 |
更新
原生
-
innerHTML，注意对字符编码来避免XSS攻击
-
innerText，可以自动对字符串进行HTML编码
-
xxx.style.color = '#ff0000';
jQuery
- html()
- text()，无参数调用
text()是获取文本，传入参数就变成设置文本，HTML也是类似操作 css('name', 'value')方法，name为获取的节点名
删除
原生
调用父节点的removeChild把自己删掉
parent.removeChild(parent.children[0]);
jQuery
remove()方法
var li = $('#test-div>ul>li');
li.remove(); // 所有<li>全被删除
removeClass()方法
div.removeClass('highlight')
添加/插入
原生
- 使用
appendChild，把一个子节点添加到父节点的最后一个子节点 parentElement.insertBefore(newElement, referenceElement);，子节点会插入到referenceElement之前。
jQuery
父级节点append()方法
同级节点可以用after()或者before()方法
