携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第7天，点击查看活动详情
回顾：上次分享了我们可以通过浏览器提供的对象获取到很多信息，例如浏览器名称、版本、操作系统、屏幕、当前页面url等等。那么了解浏览器时必不可少的DOM，又是什么呢！？
DOM是个树形结构
拿到DOM的常用办法：document.getElementById()和document.getElementsByTagName()（其实还有CSS选择器document.getElementsByClassName()，不太熟悉）
document.getElementById()可以直接定位唯一的一个DOM节点document.getElementsByTagName()和document.getElementsByClassName()总是返回一组DOM节点。要精确地选择DOM，可以先定位父节点，再从父节点开始选择，以缩小范围。
- 更新：更新该DOM节点的内容，相当于更新了该DOM节点表示的HTML的内容；
- 遍历：遍历该DOM节点下的子节点，以便进行进一步操作；
- 添加：在该DOM节点下新增一个子节点，相当于动态增加了一个HTML节点；
- 删除：将该节点从HTML中删除，相当于删掉了该DOM节点的内容以及它包含的所有子节点。
// 返回ID为'new'的节点：
var test = document.getElementById('new');
// 先定位ID为'new-table'的节点，再返回其内部所有tr节点：
var trs = document.getElementById('new-table').getElementsByTagName('tr');
// 先定位ID为'new-div'的节点，再返回其内部所有class包含blue的节点：
var reds = document.getElementById('new-div').getElementsByClassName('blue');
// 获取节点new下的所有直属子节点:
var cs = new.children;
// 获取节点new下第一个、最后一个子节点：
var first = new.firstElementChild;
var last = new.lastElementChild;
快速了解DOM
不如我们打开F12，通过每个页面背后看看身边最熟悉的DOM信息 明天我们慢慢来分享：更新DOM、插入DOM、删除DOM
写在最后
以上习题&笔记从大佬们的论坛学习而来，特感谢大佬们的知识分享～ （学习技术知识，果然要看大佬们的技术博客，大家有好的推荐也欢迎指引我这个小白哈，感恩！）
附上学习链接，感谢廖大神出题和解答：
