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代码创建的窗口