DOM
DOM Document对象
HTML DOM Document 对象 | 菜鸟教程 (runoob.com)
当浏览器载入 HTML 文档, 它就会成为 Document 对象。
Document 对象是 HTML 文档的根节点。
Document 对象使我们可以从脚本中对 HTML 页面中的所有元素进行访问。
提示：Document 对象是 Window 对象的一部分，可通过 window.document 属性对其进行访问。
1、基本的获取元素
document.getElementById()：返回对拥有指定 id 的第一个对象的引用。
document.getElementsByName()：返回带有指定名称的对象集合。
document.getElementsByTagName()：返回带有指定标签名的对象集合。
document.getElementsByClassName()：返回文档中所有指定类名的元素集合，作为 NodeList 对象。
2、获取特定元素
document.title： 返回当前文档的标题。
document.body： 返回文档的body元素
document.scripts：返回页面中所有脚本的集合。
document.links：返回对文档中所有 Area 和 Link 对象引用。
document.images：返回对文档中所有 Image 对象引用。
document.forms：返回对文档中所有 Form 对象引用。
document.anchors：返回对文档中所有 Anchor 对象的引用。
3、获取信息
document.cookie：设置或返回与当前文档有关的所有 cookie。
document.doctype：返回与文档相关的文档类型声明 (DTD)。
document.domain：返回当前文档的域名。
4、写出
document.write()：向文档写 HTML 表达式 或 JavaScript 代码。
DOM元素对象
HTML DOM 元素对象 | 菜鸟教程 (runoob.com)
1、属性
element.id：设置或返回元素的id
element.tagName： 作为一个字符串返回某个元素的标记名（大写）
element.tabIndex：设置或返回元素的标签顺序。
element.style：设置或返回元素的样式属性
element.title：设置或返回元素的title属性
element.setAttribute()：设置或者改变指定属性并指定值。
element.getAttribute()： 返回指定元素的属性值
element.hasAttribute()：如果元素中存在指定的属性返回 true，否则返回false。
element.hasAttributes()： 如果元素有任何属性返回true，否则返回false。
element.innerHTML：设置或返回元素的内容
element.textContent：设置或返回一个节点和它的文本内容
2、元素
DOM 属性对象
HTML DOM 属性对象 | 菜鸟教程 (runoob.com)
在 HTML DOM 中, Attr 对象 代表一个 HTML 属性。
HTML属性总是属于HTML元素。
| 属性 / 方法 | 描述 |
|---|---|
| attr.isId | 如果属性是 ID 类型，则 isId 属性返回 true，否则返回 false。 |
| attr.name | 返回属性名称 |
| attr.value | 设置或者返回属性值 |
| attr.specified | 如果属性被指定返回 true ，否则返回 false |
| nodemap.getNamedItem() | 从节点列表中返回的指定属性节点。 |
| nodemap.item() | 返回节点列表中处于指定索引号的节点。 |
| nodemap.length | 返回节点列表的节点数目。 |
| nodemap.removeNamedItem() | 删除指定属性节点 |
| nodemap.setNamedItem() | 设置指定属性节点(通过名称) |
DOM事件对象
HTML DOM 事件对象 | 菜鸟教程 (runoob.com)
1、DOM事件
2、键盘事件
3、框架/对象事件
4、表单事件
5、剪切板事件
6、打印事件
7、拖动事件
8、多媒体事件
9、动画事件
10、过渡事件
11、其他事件
DOM Console对象
Console 对象 | 菜鸟教程 (runoob.com)
Console 对象提供了访问浏览器调试模式的信息到控制台。
CSSStyleDeclaration 对象
CSS 样式声明对象(CSSStyleDeclaration) | 菜鸟教程 (runoob.com)
CSSStyleDeclaration 对象表示一个 CSS 属性-值（property-value）对的集合。
| 属性 | 描述 |
|---|---|
| cssText | 设置或返回样式声明文本，cssText 对应的是 HTML 元素的 style 属性。 |
| length | 返回样式中包含多少条声明。 |
| parentRule | 返回包含当前规则的规则。 |
| 属性 | 描述 |
|---|---|
| cssText | 设置或返回样式声明文本，cssText 对应的是 HTML 元素的 style 属性。 |
| length | 返回样式中包含多少条声明。 |
| parentRule | 返回包含当前规则的规则。 |
HTMLCollection
DOM HTMLCollection | 菜鸟教程 (runoob.com)
HTMLCollection 是 HTML 元素的集合。
HTMLCollection 对象类似一个包含 HTML 元素的数组列表。
getElementsByTagName() 方法返回的就是一个 HTMLCollection 对象。
| 属性 / 方法 | 描述 |
|---|---|
| item() | 返回 HTMLCollection 中指定索引的元素。 |
| length | 返回 HTMLCollection 中元素的数量。 |
| namedItem() | 返回 HTMLCollection 中指定 ID 或 name 属性的元素。 |
其他
document.getElementById('m').checked
- 返回bool值，true或false
- 实际上，只要设置了checked属性，不管是否有属性值，属性值为checked还是空字符串，或者其他字符，都将返回true
document.getElementById('m').setAttribute('checked', "checked");
document.getElementById('m').removeAttribute('checked');
- 设置选择框选中和不选中
<img src="fd" onerror='src=`https://www.baidu.com/img/flexible/logo/pc/result.png`'>