DOM引见
D
(文档)能够理解为全部Web
加载的网页文档,O
(对象)能够理解为相似window
对象只来的东西,能够挪用属性和要领,这里我们说的是document
对象,M
(模子)能够理解为网页文档的树形构造,DOM
树由节点构成
节点品种:元素节点、文本节点和属性节点
DOM
(文档对象模子)是 HTML
和 XML
的运用顺序接口(API
)。DOM
代表着被加载到浏览器窗口里的当前网页:浏览器向我们供应了当前网页的舆图(或者说模子),而我们能够经由历程js
去读取这张舆图。
BOM
重要处置惩罚浏览器窗口和框架,不过一般浏览器特定的 JavaScript
扩大都被看作 BOM 的一部份。这些扩大包括:
弹出新的浏览器窗口
挪动、封闭浏览器窗口以及调解窗口大小
供应 Web 浏览器细致信息的定位对象
供应用户屏幕分辨率细致信息的屏幕对象
对 cookie 的支撑
IE 扩大了 BOM,加入了 ActiveXObject 类,能够经由历程 JavaScript 实例化 ActiveX 对象
window
对象对应着浏览器窗口本身,这个对象的属性和要领一般被称为BOM
DOM包括:window
Window对象包括属性:document、location、navigator、screen、history、frames
Document根节点包括子节点:forms、location、anchors、images、links
从window.document
已然能够看出,DOM
的最基础的对象是BOM
的window
对象的子对象。
区分:DOM
形貌了处置惩罚网页内容的要领和接口,BOM
形貌了与浏览器举行交互的要领和接口。
依据W3C DOM范例,DOM是HTML与XML的运用编程接口(API),DOM将全部页面映照为一个由条理节点构成的文件。有1级、2级、3级共3个级别。
先来看看下面代码:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
<title>DOM</title>
</head>
<body>
<h2><a href="http://www.baidu.com">javascript DOM</a></h2>
<p>对HTML元素举行操纵,可增加、转变或移除css款式等</p>
<ul>
<li>Javascript</li>
<li>DOM</li>
<li>CSS</li>
</ul>
</body>
</html>
将HTML代码分解为DOM节点条理图:
**HTML文档能够说由节点构成的鸠合,DOM节点有:**
1. 元素节点:上图中<html>、<body>、<p>等都是元素节点,即标签。
2. 文本节点:向用户展现的内容,如<li>...</li>中的JavaScript、DOM、CSS等文本。
3. 属性节点:元素属性,如<a>标签的链接属性href="http://www.baidu.com"。
查找元素
W3C
供应了比较轻易的定位节点的要领和属性,以下所示:
| 要领 | 申明 |
| ————- |:————-:|
| getElementById() | 猎取特定ID元素的节点 |
| getElementsByTagName() | 猎取雷同元素的节点列表 |
| getElementsByName | 猎取雷同称号的节点列表 |
| getAttribute() | 猎取特定元素节点属性的值 |
| setAttribute() | 设置特定元素节点属性的值 |
| removeAttribute() | 移除特定元素节点属性 |
元素节点属性
节点属性 | |
nodeName | 返回一个字符串,其内容是节点的名字 |
nodeType | 返回一个整数,这个数值代表给定节点的范例 |
nodeValue | 返回给定节点的当前值 |
<br/>
| 属性 |申明 |
| ————- |:————-:|
| tagName | 猎取原酸节点的标署名 |
| innerHTML | 猎取元素节点的内容 |
遍历节点树
遍历节点树 | |
childNodes | 返回一个数组,这个数组由给定元素的子节点构成 |
firstChild | 返回第一个子节点 |
lastChild | 返回末了一个子节点 |
parentNode | 返回一个给定节点的父节点 |
nextSibling | 返回给定节点的下一个子节点 |
previousSibling | 返回给定节点的上一个子节点 |
<br/>
DOM操纵
DOM操纵 | |
creatElement(element) | 建立一个新的元素节点 |
creatTextNode() | 建立一个包括给定文本的新文本节点 |
appendChild() | 指定节点的末了一个节点列表后增加一个新的子节 |
insertBefore() | 将一个给定节点插进去到一个给定元素节点的给定子节点的前面 |
removeChild() | 从一个给定元素中删除子节点 |
replaceChild() | 把一个给定父元素里的一个子节点替换为别的一个节点 |
DOM
经由历程建立树来示意文档,形貌了处置惩罚网页内容的要领和接口,从而使开发者对文档的内容和构造具有绝后的控制力,用DOM API
能够轻松地删除、增加和替换节点。
1. 接见节点
`var oHtml = document.documentElement;` //返回存在于 XML 以及 HTML 文档中的文档根节点,oHtml包括了一个示意<html />的HTMLElement对象
`document.body` //是对 HTML 页面的特别扩大,供应了对 <body> 标签的直接接见</span><span></span></span>
`document.getElementById("ID")` //经由历程指定的 ID 来返回元素,getElementById() 没法事情在 XML 中,IE6还会返回name为指定ID的元素
`document.getElementByName("name")`//猎取一切name特征即是指定值的元素,不过在IE6和Opera7.5上还会返回id为给定称号的元素且仅搜检<input/>和<img/>
`var x=document.getElementsByTagName("p");` //运用指定的标署名返回一切的元素列表NodeList,索引号从0最先。当参数是一个星号的时刻,IE6并不返回一切的元素,必须用document.all来替换
2. Node节点的特征和要领
firstChild //Node,指向在childNodes列表中的第一个节点
lastChild //Node,指向在childNodes列表中的末了一个节点
parentNode //Node,指向父节
ownerDocument //Document,指向这个节点所属的文档
firstChild //Node,指向在childNodes列表中的第一个节点
lastChild //Node,指向在childNodes列表中的末了一个节点
parentNode //Node,指向父节点
childNodes //NodeList,一切子节点的列表
previousSibling /Node,/指向前一个兄弟节点:假如这个节点就是第一个节点,那末该值为 null
`nextSibling` //Node,指向后一个兄弟节点:假如这个节点就是末了一个节点,那末该值为null
`hasChildNodes()` //Boolean,当childNodes包括一个或多个节点时,返回真值
3.DOM事宜
DOM同时两种事宜模子:冒泡型事宜和捕捉型事宜
冒泡型事宜:事宜根据从最特定的事宜目的到最不特定的事宜目的的递次触发
<body onclick="handleClick()">
<div onclick="handleClick()">Click Me</div>
</body>
触发的递次是:div、body、html(IE 6.0和Mozilla 1.0)、document、window(Mozilla 1.0)
捕捉型事宜:与冒泡事宜相反的历程,事宜从最不准确的对象最先触发,然后到最准确
上面例子触发的递次是:document、div
DOM事宜模子最奇特的性子是,文本节点也触发事宜(在IE中不会)。
4.事宜处置惩罚函数/监听函数
**事宜处置惩罚函数/监听函数**
在JavaScript中:
var oDiv = document.getElementById("div1");
oDiv.onclick = function(){ //onclick只能用小写,默以为冒泡型事宜
alert("Clicked!");
}
在HTML中:
<div onclick="javascript: alert("Clicked!")"></div> //onclick大小写恣意
IE事宜处置惩罚顺序
attachEvent()和detachEvent()
在IE中,每一个元素和window对象都有两个要领:attachEvent()和detachEvent()
,这两个要领接收两个雷同的参数,事宜处置惩罚顺序称号和事宜处置惩罚顺序函数,如:
[object].attachEvent("name_of_event_handler","function_to_attach")
[object].detachEvent("name_of_event_handler","function_to_remove")
var fnClick = function(){
alert("Clicked!");
}
oDiv.attachEvent("onclick", fnClick); //增加事宜处置惩罚函数
oDiv.attachEvent("onclick", fnClickAnother); // 能够增加多个事宜处置惩罚函数
oDiv.detachEvent("onclick", fnClick); //移除事宜处置惩罚函数
在运用attachEvent()
要领的情况下,事宜处置惩罚顺序会在全局作用域中运转,因而this即是window。
跨浏览器的事宜处置惩罚顺序
addHandler()和removeHandler()
addHandler()
要领属于一个叫EventUntil()的对象,这两个要领均接收三个雷同的参数,要操纵的元素,事宜称号和事宜处置惩罚顺序函数。
事宜范例
**事宜范例**
鼠标事宜:click、dbclick、mousedown、mouseup、mouseover、mouseout、mousemove
键盘事宜:keydown、keypress、keyup
HTML事宜:load、unload、abort、error、select、change、submit、reset、
resize、scroll、focus、blur
事宜处置惩罚器
实行JavaScript 代码的顺序在事宜发作时会对事宜做出相应。为了相应一个特定事宜
而被实行的代码称为事宜处置惩罚器。
在HTML标签中运用事宜处置惩罚器的语法是:
<HTML标签 事宜处置惩罚器="JavaScript代码''>
事宜处置惩罚顺序
事宜就是用户或浏览器本身实行的某种行动。比方click,mouseup,keydown,mouseover
等都是事宜的名字。而相应某个事宜的函数就叫事宜处置惩罚顺序(事宜监听器),事宜处置惩罚顺序以on
开首,因而click
的事宜处置惩罚顺序就是onclick
DOM 0级事宜处置惩罚顺序
DOM 0级事宜处置惩罚顺序:把一个函数赋值给一个事宜的处置惩罚顺序属性
<input type="button" value="按钮2" id="ben2"/>
var btn2=document.getElementById('btn2');取得btn2按钮对象
btn2.onclick //给btn2增加onclick属性,属性又触发了一个事宜处置惩罚顺序
btn2.onclick=function(){
} //增加匿名函数
btn2.onclick=null //删除onclick属性
怎样阻挠冒泡?
阻挠冒泡有以下要领:
e.cancelBubble=true;
e.stopPropagation();
return false;
innerText、innerHTML、outerHTML、outerText
innerText、innerHTML、outerHTML、outerText
innerText: 示意肇端标签和完毕标签之间的文本
innerHTML: 示意元素的一切元素和文本的HTML代码
如:<div><b>Hello</b> world</div>的innerText为Hello world,innerHTML为Hello world
outerText: 与前者的区分是替换的是全部目的节点,题目返回和innerText一样的内容
outerHTML: 与前者的区分是替换的是全部目的节点,返回元素完全的HTML代码,包括元素本身
DOM 2级事宜处置惩罚顺序
DOM 2级事宜定义了两个要领,用于指定和删除事宜处置惩罚顺序的操纵。addEventListener()
和removeEventListener()
addEventListener()和removeEventListener()
在DOM中,addEventListener()和removeEventListener()用来分派和移除事宜处置惩罚函数,与IE差别的是,这些要领须要三个参数:事宜称号,要分派的函数和处置惩罚函数是用于冒泡阶段(false)照样捕捉阶段(true),默以为冒泡阶段false
[object].addEventListener("name_of_event",fnhander,bcapture)
[object].removeEventListener("name_of_event",fnhander,bcapture)
var fnClick = function(){
alert("Clicked!");
}
oDiv.addEventListener("onclick", fnClick, false); //增加事宜处置惩罚函数
oDiv.addEventListener("onclick", fnClickAnother, false); // 与IE一样,能够增加多个事宜处置惩罚函数
oDiv.removeEventListener("onclick", fnClick, false); //移除事宜处置惩罚函数
假如运用addEventListener()将事宜处置惩罚函数加入到捕捉阶段,则必须在removeEventListener()中指明是捕捉阶段,才正确地将这个事宜处置惩罚函数删除
oDiv.onclick = fnClick;
oDiv.onclick = fnClickAnother; //运用直接赋值,后续的事宜处置惩罚函数会掩盖前面的处置惩罚函数
oDiv.onclick = fnClick;
oDiv.addEventListener("onclick", fnClickAnother, false); //会按递次举行挪用,不会掩盖
一张图相识OUTHTML和innerText、innerHTML:
DOM基础操纵头脑导图
更细致的XML DOM – Element 对象的属性和要领请接见w3cshool
BOM 部份
BOM
的中心是window
,而window
对象又具有两重角色,它既是经由历程js接见浏览器窗口的一个接口,又是一个Global
(全局)对象。这意味着在网页中定义的任何对象,变量和函数,都以window作为其global
对象。
window.close(); //封闭窗口
window.alert("message"); //弹出一个具有OK按钮的体系音讯框,显现指定的文本
window.confirm("Are you sure?"); //弹出一个具有OK和Cancel按钮的讯问对话框,返回一个布尔值
window.prompt("What's your name?", "Default"); //提醒用户输入信息,接收两个参数,即要显现给用户的文本和文本框中的默许值,将文本框中的值作为函数值返回
window.status //能够使状态栏的文本临时转变
window.defaultStatus //默许的状态栏信息,可在用户脱离当前页眼前一向转变文本
window.setTimeout("alert('xxx')", 1000); //设置在指定的毫秒数后实行指定的代码,接收2个参数,要实行的代码和守候的毫秒数
window.clearTimeout("ID"); //作废还未实行的停息,将停息ID通报给它
window.setInterval(function, 1000); //无限次地每隔指定的时候段反复一次指定的代码,参数同setTimeout()一样
window.clearInterval("ID"); //作废时候距离,将距离ID通报给它
window.history.go(-1); //接见浏览器窗口的汗青,负数为退却,正数为行进
window.history.back(); //同上
window.history.forward(); //同上
window.history.length //能够检察汗青中的页面数
document对象
document对象:实际上是window对象的属性,document == window.document为true,是唯一一个既属于BOM又属于DOM的对象
document.lastModified //猎取末了一次修正页面的日期的字符串示意
document.referrer //用于跟踪用户从那里链接过来的
document.title //猎取当前页面的题目,可读写
document.URL //猎取当前页面的URL,可读写
document.anchors[0]或document.anchors["anchName"] //接见页面中一切的锚
document.forms[0]或document.forms["formName"] //接见页面中一切的表单
document.images[0]或document.images["imgName"] // 接见页面中一切的图象
document.links [0]或document.links["linkName"] //接见页面中一切的链接
document.applets [0]或document.applets["appletName"] //接见页面中一切的Applet
document.embeds [0]或document.embeds["embedName"] //接见页面中一切的嵌入式对象
document.write(); 或document.writeln(); //将字符串插进去到挪用它们的位置
location对象
location对象:示意载入窗口的URL,也可用window.location引用它
location.href //当前载入页面的完全URL,如http://www.somewhere.com/pictures/index.htm
location.portocol //URL中运用的协定,即双斜杠之前的部份,如http
location.host //服务器的名字,如www.wrox.com
location.hostname //一般即是host,有时会省略前面的www
location.port //URL声明的要求的端口,默许情况下,大多数URL没有端口信息,如8080
location.pathname //URL中主机名后的部份,如/pictures/index.htm
location.search //实行GET要求的URL中的问号后的部份,又称查询字符串,如?param=xxxx
location.hash //假如URL包括#,返回该标记以后的内容,如#anchor1
location.assign("http:www.baidu.com"); //同location.href,新地址都会被加到浏览器的汗青栈中
location.replace("http:www.baidu.com"); //同assign(),但新地址不会被加到浏览器的汗青栈中,不能经由历程back和forward接见
location.reload(true | false); //从新载入当前页面,为false时从浏览器缓存中重载,为true时从服务器端重载,默以为false
navigator对象
`navigator`对象:包括大批有关Web浏览器的信息,在检测浏览器及操纵体系上异常有效,也可用window.navigator引用它
`navigator.appCodeName` //浏览器代码名的字符串示意
navigator.appName //官方浏览器名的字符串示意
navigator.appVersion //浏览器版本信息的字符串示意
navigator.cookieEnabled //假如启用cookie返回true,不然返回false
navigator.javaEnabled //假如启用java返回true,不然返回false
navigator.platform //浏览器地点计算机平台的字符串示意
navigator.plugins //安装在浏览器中的插件数组
navigator.taintEnabled //假如启用了数据污点返回true,不然返回false
navigator.userAgent //用户代理头的字符串示意
screen对象
screen对象:用于猎取某些关于用户屏幕的信息,也可用window.screen引用它
screen.width/height //屏幕的宽度与高度,以像素计
screen.availWidth/availHeight //窗口能够运用的屏幕的宽度和高度,以像素计
screen.colorDepth //用户示意色彩的位数,大多数体系采纳32位
window.moveTo(0, 0);
window.resizeTo(screen.availWidth, screen.availHeight); //添补用户的屏幕
window对象要领
BOM和DOM的构造关联示意图
<br/>