BOM与DOM的理解
BOM:Browser Object Model 浏览器对象模型,可以理解为是浏览器,顶级对象是window
DOM:document Object Model 文件对象模型。
window是JavaScript中的顶级对象,window对象是一个全局对象,所有的表达式都是在当前环境下执行的,可以把那个窗口的属性当做全局变量来使用,比如可以只写document而不用写window.document。
window对象中的属性和方法
alert //在当前窗口出现弹出框
setInterval(function, time(微秒)) //每过多少时间执行一次
clearInterval() //清除setInterval设置的循环函数
setTimeout() //过多久执行函数
clearTimeout //取消由setTimeout设置的预执行函数
scrollTo() //把内容滚动到指定的坐标。
confirm() //显示确认框,点击确定返回true点击取消返回faluse;
prompt() //显示可提示用户输入的对话框。返回输入的值
open() //打开一个新的窗口或者打开一个已经存在的窗口
close() //关闭浏览器窗口
function foo(){
console.log('执行');
}
var loop = setInterval(foo, 2000); //延迟两秒
clearInterval(loop); //停止;
-------------------------------------------------------
function foo(){
console.log('两秒后打印');
}
var go = setTimeout(foo, 2000);
clearTimeout(go);
window的子对象
- navigator(导航栏)
navigator.appName //浏览器全称
navigator.appVersion //Web浏览器厂商和版本的详细字符串
navigator.userAgent //用户代理
navigator.platform //浏览器运行所在的操作系统
- history
history.forward() //前进一页
history.back() //后退一页
history.go() //前进N页
- location
location.href //获取当前的url
location.href='URL' //跳转到。。。网页。
location.reload() //重新加载
DOM
DOM(Document Object Model)是一套对文档的内容进行抽象和概念化的方法。
它是一个与系统平台和编程语言无关的接口,程序和脚本可以通过这个接口动态地对文档的内容、结构和样式进行访问和修改。简单来讲,DOM是一种API(应用编程接口)。
JavaScript对DOM进行了实现,对应于JavaScript中的document对象,通过该对象对DOM文档进行程序级别的控制。
DOM标准规定HTML文档中的每个成分都是一个节点(node):
- 文档节点(document对象):代表整个文档
- 元素节点(element 对象):代表一个元素(标签)
- 文本节点(text对象):代表元素(标签)中的文本
- 属性节点(attribute对象):代表一个属性,元素(标签)才有属性
- 注释是注释节点(comment对象)
查找标签
document.getElementById(); //根据id来查找
document.getElementsByClassName(); //根据类名来查找得到一个数组
document.getElementByTagName(); //根据标签名来查找得到一个数组
document.getElementByName(); //根据name属性来得到一个数组
间接查找
parentNode //父节点
childNodes //所有子节点
firstchild //第一个子节点
lastchild //最后一个子节点
nextSibling //下一个兄弟节点
precioussibling //前一个兄弟节点
********************************************** 下面的为标签
parentElement //父节点标签元素
children //所有子标签
firstElementChild //第一个子标签元素
lastELementChild //最后一个子标签元素
nextElementSibling //下一个兄弟标签元素
perviousElementSibling //上一个兄弟标签元素