BOM
和DOM
的简介
JavaScript是一种网络脚本(客户端)语言,实际上包含了三部分的内容:ECMAScript
,BOM
和DOM
。
ECMAScript
,描述该语言的语法和对象;- 浏览器对象模型(
BOM
),描述与浏览器进行交互的方法和接口; - 文档对象模型(
DOM
),描述处理网页内容的方法和接口。
BOM
汇总
BOM
(浏览器对象模型)提供了很多东西(对象),用于访问浏览器的功能,这些对象与具体的网页内容无关。
window
对象
BOM
的核心对象是window
对象,表示的是浏览器的一个实例。在浏览器中,它既是通过JavaScript访问浏览器窗口的一个接口,又是ECMAScript规定的Global
对象。因此,全局定义的变量、对象或函数,window
都有权访问。
测试的JS代码如下:
var name = "zhenye"
function sayHi(){
console.log("Hi," + this.name + "!")
}
console.log(window.name)
console.log("---分隔线---")
window.sayHi();
测试效果图如下:
与窗口相关的方法汇总如下:
方法表达式 | 含义 |
---|---|
open(url) | 打开一个新窗口,url为新窗口的地址栏 |
close() | 关闭当前窗口 |
setTimeOut(fun,time) | 超时调用,延迟time后调用方法fun |
clearTimeOut(fun) | 清除该超时调用 |
setInterval(fun,time) | 定时调用,每隔time后调用方法fun |
clearInterval(fun) | 清除该定时调用 |
confirm(message) | 打开系统对话框,提示内容为message |
测试定时和延时方法的代码如下:
var intervalFun = setInterval(function(){
console.log("这是定时方法,每隔3秒打印当前时间:" + new Date().toLocaleTimeString())
},3000);
var setTimeOutFun = setTimeout(function(){
console.log("这是延时方法,10秒后的时间是:" + new Date().toLocaleTimeString());
console.log("即将清除定时方法---" + clearInterval(intervalFun))
},10000);
定时和延时方法的测试效果图如下:
location
对象
location
对象提供了与当前窗口中加载的文档有关的信息,还提供了一些导航功能。它既是window
对象的属性,也是document
对象的属性。
location
中常用的汇总方法如下:
方法表达式 | 含义 |
---|---|
assign(String url) | 改变当前页面的url |
replace(String url) | 改变当前页面的url,无法跳回前一页 |
reload(Boolean force) | 重新加载页面,force表示强制重新加载 |
navigator
对象
navigator
对象,是所有支持JavaScript的浏览器所共有的对象,用来可以识别客户端浏览器。常用属性或方法汇总如下:
属性或方法 | 含义 |
---|---|
appName | 完整的浏览器名称 |
cookieEnabled | 是否启用了cookie |
plugins | 浏览器中安装的插件数组 |
hasPlugin(pluginName) | 浏览器是否安装了该插件 |
navigator
对象测试代码如下:
console.log("浏览器名称:" + navigator.appName);
var count = navigator.plugins.length;
console.log("浏览器的插件有:" + count + "个");
for (var i = 0;i < count;i++) {
console.log("该插件的名称为:" + navigator.plugins[i].name);
}
navigator
对象测试效果图如下:
screen
对象
screen
对象,是用来表明客户端的能力,其中包括浏览器窗口外部的显示器的信息,如像素宽度和高度等。常用属性汇总如下:
属性 | 含义 |
---|---|
height | 屏幕的像素高度 |
width | 屏幕的像素宽度 |
history
对象
history
对象保存着用户上网的历史记录,是从窗口被打开的那一刻算起的。常用属性或方法汇总如下:
属性或方法 | 含义 |
---|---|
length | 保存着所有页面历史记录的数量 |
go(num) | 表示前进num页—num为负数时后退 |
back() | 后退一页,相当于go(-1) |
forward() | 前进一页,相当于go(1) |
DOM
汇总
DOM
的含义及类型
DOM
(文档对象模型),是针对HTML和XML文档的一个API汇总。DOM
是将页面看成一个层次化的节点树,我们对页面进行的操作,可以看成是对这个节点树的增删改操作。
所有的网页内容,实际都是类似如下结构的HTML文件:
<html>
<head>
<title>我是标题</title>
</head>
<body>
<p>我是正文</p>
</body>
</html>
这个HTML文件,经过浏览器解析后的效果图如下:
在HTML中,每一个标签对应是文档元素中的一个节点,如上面的<html>
标签就是文档元素的根节点。
XML与HTML的不同点,就是HTML文档的根节点,必须是<html>
。
XML和HTML中标签的类型有:Node
,Document
,Element
,Text
,Comment
,CDATASection
,DocumentType
,DocumentFragment
,Attr
。
它们的含义汇总如下:
类型名称 | 含义 |
---|---|
Node | 节点,JavaScript的基本类型 |
Document | 文档,document 对象是HTMLDocument的一个实例,表示整个页面 |
Element | 元素,提供对元素的标签名、子节点及特性的访问功能 |
Text | 文本,标签内部的纯文本内容 |
Comment | 注释,<!--注释内容--> 中的注释内容 |
CDATASection | XML中的CDATA区域,<!CDATA[不编译的内容]> |
DocumentType | <!DOCTYPE HTML> 中定义的内容 |
DocumentFragment | 轻量级文档,可包含和控制节点 |
Attr | 属性,用来操作节点的属性 |
DOM
操作技术
在前面的HTML示例中实践DOM
操作技术,具体代码如下:
<html>
<head>
<title>我是标题</title>
</head>
<body>
<p>我是正文</p>
<script>
var body = document.getElementsByTagName("body")[0];
// 给body添加3个div
for (var i = 0;i < 3;i++){
var div = document.createElement("div");
div.id = "div-" + i;
div.textContent = "自定义div的内容(" + i + ")";
body.appendChild(div);
}
// 给body中的div1,添加一个注释
var div2 = document.getElementById("div-1");
var comment = document.createComment("这是注释的内容");
div2.appendChild(comment);
</script>
</body>
</html>
这段代码的实际效果图如下:
DOM的选择符API
类似于前面样例中方法getElementById()
和getElementsByTagName()
可以选取特定元素,还有一种更加通用的方法,就是通过CSS选择符查询DOM
文档取得特定元素的引用。
方法名称 | 方法作用 |
---|---|
querySelector() | 返回与传入参数(CSS选择符)定义的模式匹配的第一个元素 |
querySelectorAll() | 返回与传入参数(CSS选择符)定义的模式匹配的元素数组 |
matchesSelector() | 调用元素与传入参数(CSS选择符)定义的模式匹配时返回true |
CSS选择符API的测试代码如下:
<html>
<head>
<title>CSS选择符API测试</title>
</head>
<body>
<div id="div-1" class="div-class">div-1的内容</div>
<div id="div-2" class="div-class">div-2的内容</div>
<div id="div-3" class="div-class">div-3的内容</div>
<div id="div-4" class="div-class">div-4的内容</div>
<div id="div-5" class="div-class">div-5的内容</div>
<script>
// querySelectorAll()的实践
// 查找所有标签名为div的元素
var divs = document.querySelectorAll("div");
console.log("div元素的个数为:" + divs.length);
//取得id为"div-3"的元素
var div3 = document.querySelector("#div-3");
console.log("id为div-3的元素,其文本内容为:" + div3.textContent);
// 取得类名为"div-class"的第一个元素
var firstDiv = document.querySelector(".div-class");
console.log("类名为div-class的第一个元素,其文本内容为:" + firstDiv.textContent);
</script>
</body>
</html>
测试效果图如下: