[](()🌴 document对象的方法和属性
document对象提供了一些用于查找元素的方法，利用这些方法可以根据元素的id、name和class属性以及标签名称的方式获取操作的元素。
🔺总结
除了document.getElementById()方法返回的是拥有指定id的元素外，其他方法返回的都是符合要求的一个集合。若要获取其中一个对象，可以通过下标的方式获取，默认从0开始。
document对象提供一些属性，可用于获取文档中的元素。例如，获取所有表单标签、图片标签等。
-
document对象的body属性用于返回body元素。
-
document对象的documentElement属性用于返回HTML文档的根节点html元素。
📌注意
通过document对象的方法与document对象的属性获取的操作元素表示的都是同一对象。如document.getElementsByTagName(‘body’)[0]与document.body全等。
⭐HTML5新增的document对象方法
HTML5中为更方便获取操作的元素，为document对象新增了两个方法，分别为querySelector()和querySelectorAll()。
-
querySelector()方法用于返回文档中匹配到指定的元素或CSS选择器的第1个对象的引用。
-
querySelectorAll()方法用于返回文档中匹配到指定的元素或CSS选择器的对象集合。
由于这两个方法的使用方式相同，下面以document.querySelector()方法为例演示。
[](()🌴 Element对象的方法和属性
在DOM操作中，元素对象也提供了获取某个元素内指定元素的方法，常用的两个方法分别为getElementsByClassName()和getElementsByTagName()。它们的使用方式与document对象中同名方法相同。
除此之外，元素对象还提供了children属性用来获取指定元素的子元素。例如，获取上述示例中ul的子元素。
-
元素对象的children属性返回的也是对象集合，若要获取其中一个对象，也需通过下标的方式获取，默认从0开始。
-
另外，document对象中也有children属性，它的第一个子元素通常是html元素。
⭐HTMLCollection对象
-
HTMLCollection对象：通过document对象或Element对象调用getElementsByClassName()方法、getElementsByTagName()方法、children属性等返回的对象集。
-
NodeList对象：document对象调用getElementsByName()方法在Chrome和FireFox浏览器中返回的是NodeList对象，IE11返回的是HTMLCollection对象。
⭐HTMLCollection与NodeList对象的区别：
-
HTMLCollection对象用于元素操作。
-
NodeList对象用于节点操作。
提示：对于getElementsByClassName()方法、getElementsByTagName()方法和children属性返回的集合中可以将id和name自动转换为一个属性。
JavaScript中，若要对获取的元素内容进行操作，则可以利用DOM提供的属性和方法实现。
-
属性属于Element对象，方法属于document对象。
-
innerHTML在使用时会保持编写的格式以及标签样式。
-
innerText则是去掉所有格式以及标签的纯文本内容。
-
textContent属性在去掉标签后会保留文本格式。
举个例子
代码实现
The first paragraph…
The second paragraph…
third
📌 《大厂前端面试题解析+Web核心总结学习笔记+企业项目实战源码+最新高清讲解视频》无偿开源 徽信搜索公众号【编程进阶路】 注意
innerText属性在使用时可能会出现浏览器兼容的问题。因此，推荐在
开发时尽可能的使用innerHTML获取或设置元素的文本内容。同时，innerHTML属性和document.write()方法在设置内容时有一定的区别，前者作用于指定的元素，后者则是重构整个HTML文档页面。因此，读者在开发中要根据实际的需要选择合适的实现方式
【案例】改变盒子大小
代码实现思路：
① 编写HTML，设置div的大小。
② 根据用户的点击次数完成盒子大小的改变。
③ 单击的次数为奇数时，盒子都变大，单击次数为偶数时，盒子都变小。
代码实现
在DOM中，为了方便JavaScript获取、修改和遍历指定HTML元素的相关属性，提供了操作的属性和方法。
利用attributes属性可以获取一个HTML元素的所有属性，以及所有属性的个数length。
举个例子
代码实现
test word.
回顾：通过元素属性的操作修改样式。
元素样式语法：style.属性名称。
要求：需要去掉CSS样式名里的中横线“-”，并将第二个英文首字母大写。
举例：设置背景颜色的background-color，在style属性操作中，需要修改为backgroundColor。
