2-5. JS文档对象模型(DOM)、浏览器对象模型(BOM)

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访问浏览器窗口的一个接口，它提供了很多对象，用于访问浏览器的功能

 注：Bom的核心对象是window，它表示一个浏览器的实例，通过它可以操作我们的浏览器

        需要对浏览器操作肯定和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代码创建的窗口