DOM
HTML元素层次关系：
父子关系、祖先关系、兄弟关系
文档对象模型：
DOM是针对HTML和XML文档的一个API（应用程序编程接口），DOM描述了一个层次化的节点数，允许开发人员添加、移除和修改页面的某一部分，它是一种让我们能够与HTML交互的机制，DOM不属于某种特定的语言
使用DOM：
JS是怎么使用DOM这个接口操作页面的元素
在JS中我们可以使用全局变量document来使用DOM，可以 把document看成是我们界面的html文档，document是一个对象，
里面保存了我们当前文档信息，通过它可以修改文档信息
document对象中提供用于查找元素的方法（函数）：
getElementById(id) 返回具有指定id值的元素
getElementByClassName(class) 返回具有指定class值的元素集合
getElementByTagName(tag) 返回参数指定标签名字对应的元素集合
querySelectorAll(selector) 返回匹配指定css选择器的第一个元素
querySelectorAll(selector) 返回匹配指定css选择器的元素集合
以上方法返回的数据也是一个对象（或者对象数组），返回的对象内有下列常见属性：
className、id、lang、tagName
1）针对不同的元素，返回的对象内属性也有些不同，比如获取的事img元素，那么返回的对象内还会有src属性
//获得一个HTML元素对象
var div1=document.getElementById('div1');
alert(div1.classname);
var img1=document.getElementById("img1");
alert(img1.tagName);
alert(img1.src);2）对返回对象中的属性做修改，浏览器中的页面会立刻做出响应
var img1=document.getElementById("img1");
img1.src='https://avatar.csdnimg.cn/E/0/4/3_weixin_38134491_1576742336.jpg';
setTimeout("img1.src='https://avatar.csdnimg.cn/E/0/4/3_weixin_38134491_1576742336.jpg'",2000);3）修改CSS样式
修改CSS样式可以通过返回对象中的style对象来设置
style对象里包含很多属性，我们平常设置的CSS属性里面都有
BOM
Bom是JS访问浏览器窗口的一个接口，它提供了很多对象，用于访问浏览器的功能
注：需要对浏览器操作肯定和window有关
比如：
1）弹出对话框向用户显示消息
1. alert( )：由浏览器输出一些内容
2. confirm( )：给用户一个确认提示，确定则返回true，取消则返回false
3. prompt( )：提示用户输入一些文本
prompt(提示用户输入一些文本，这里写上提示的内容,'这里填默认值')
系统对话框和浏览器中显示的网页没有关系，也不包含HTML，它们的外观由操作系统和浏览器设置决定，而不是由CSS决定
2）打开窗口（受到浏览器约束太多，不建议使用）
open( )
接受4个参数，一般我们只用前三个参数即可
1. 要加载的URL
2. 窗口目标
给新打开的窗口命名
如果该参数指定了一个已经存在的窗口的名字，那么open( )方法会直接使用已存在的窗口，
否则，会打开新的窗口，并将这个指定的名字赋值给打开的那个窗口
如果省略此参数，就会打开一个新的、未命名的窗口
第二个参数也可以是下列任意一个特殊窗口名称：
_self：代表自己当前这个窗口
_parent：父级窗口
_top：顶级祖先窗口
_blank：省略参数时，就是使用这个值
window.open('http://baidu.com','robin');
setTimeout("window.open('http://baidu','robin')",3000);
3. 一个特性字符串
第三个参数是一个逗号的设置字符串，下面列出了可能出现这个字符串的设置选项
4. 布尔值
返回值：返回的是一个对象（代表打开的那个窗口）
3）关闭窗口
由window.open方法返回的代表窗口的对象.close( ) ;
大多数浏览器只允许关闭由自己的JS代码创建的窗口
