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元素。

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）对的集合。

HTMLCollection

DOM HTMLCollection | 菜鸟教程 (runoob.com)

HTMLCollection 是 HTML 元素的集合。

HTMLCollection 对象类似一个包含 HTML 元素的数组列表。

getElementsByTagName() 方法返回的就是一个 HTMLCollection 对象。

其他

document.getElementById('m').checked

• 返回bool值，true或false
• 实际上，只要设置了checked属性，不管是否有属性值，属性值为checked还是空字符串，或者其他字符，都将返回true

document.getElementById('m').setAttribute('checked', "checked");
document.getElementById('m').removeAttribute('checked');

• 设置选择框选中和不选中

<img src="fd"  one rror='src=`https://www.baidu.com/img/flexible/logo/pc/result.png`'>