DOM学习笔记
Document Object Model (DOM)是HTML和XML文档的编程接口。它提供了上述文档的一种结构化表示,同时也定义了一种通过程序来改变文档结构,风格,以及内容的方式。
DOM用一组结构化的节点以及对象来表示文档。本质上就是将网页和脚本语言以及编程语言连接起来。
DOM被设计为独立于任何特定的编程语言,通过协调一致的API以确保这种文档的结构化表现形式是有效的。
DOM标准主要要为:微软DOM与W3C DOM,一般IE实现的是微软DOM,而其它浏览器则不同程度的实现了W3C DOM。
DOM很大程度上受到浏览器中动态HTML发展的影响,但W3C还是将它最先应用于XML。
DOM与BOM的关系:BOM包含DOM
文档对象模型-DOM,就是使用树视图来形容HTML代码,看下面的一张HTML页面的源代码
1 <html> 2 <head> 3 <title>树!树!到处都是树!</title> 4 </head> 5 <body> 6 <h1>树!树!到处都是树!</h1> 7 <p>HTML那层层嵌套的代码就像一棵<em>树</em>一样!</p> 8 <div>一层一层的树<img src="../images/stach_heap.gif" /> </div> 9 </body> 10 </html>
浏览器接受该页面并将之转换为树形结构
节点基础
文档根节点
var de = document.documentElement; alert(de.tagName);
获取head与body
//本来可以使用getElementsByTagName的 var head = document.getElementsByTagName("head")[0]; var body = document.getElementsByTagName("body")[0];
还可以使用节点,在使用节点前,先了解一些节点基础知识
常用节点类型
- 元素节点——文档中具有标签的节点
- 文本节点——标签中不是注释的文本块
常用的节点属性
- nodeType——节点类型,元素节点是1,文本节点是3
- nodeValue——节点值,元素节点为空,文本节点的nodeValue属性即为文本内容
- firstChild——该元素节点包含的第一个子节点
- lastChild——该元素节点包含的最后一个子节点
- nextSibling——该节点的后一个兄弟节点
- previousSibling——该节点的前一个兄弟节点
- childNodes——子节点列表,可以通过node.childNodes[index](或node.childNodes.item(index))来获取子节点
- nodeName——节点名称,对于元素节点,返回tagName,对于文本,则返回#text
考虑下面的HTML代码所表示的节点结构
<p> Some Text </p>
上面的HTML代码将会解析成两个节点:元素节点——p标签,文本节点——Some Text.也就是说,标签中包含的一些文本也是节点,那么空格之类的非打印字符会不会被当作文本节点呢?
不同浏览器在判断何为Text节点上存在一些差异。某些浏览器,如Mozilla,认为元素之间的空白(包括换行符)都是Text节点;而另一些浏览器,如IE,会全部忽略这些空白!!
var de = document.documentElement; var head = de.firstChild;//html下面第一个元素,可能是head var body = de.lastChild;//html下面最后一个元素,可能是body
答案并不确定,但是仍然有办法解决——使用节点类型检测,每个节点都有nodeType属性,指明它的节点类型。对于元素节点,它的值是1,而对于文本节点,它的值是3
var de = document.documentElement; var head = de.firstChild.nodeType==1?de.firstChild:de.firstChild.nextSibling; var body = de.lastChild.nodeType==1?de.lastChild:de.lastChild.previousSibling;] //还可以使用childNodes var de = document.documentElement; var head = de.childNodes[0].nodeType==1?de.childNodes[0]:de.childNodes[0].nextSibling; var head = de.childNodes[1].nodeType==1?de.childNodes[1]:de.childNodes[1].previousSibling;
HTML DOM
HTML DOM用对象来表示HTML标签,考虑下面的代码——
<img src="../images/stack_heap.jpg" alt="内存堆栈" onclick="alert('Hello!')" /> //对于上面的img标签,浏览器解析时会将其转换成下面的对象 { src:"../images/stack_heap.jpg", alt:"内存堆栈", onclick:"alert('Hello!')", tagName:"IMG" }; //其实不止这些属性
一般所说的DOM是指XML DOM,而W3C也为HTML页面提供了更快捷的DOM——HTML DOM!使用HTML DOM,能使访问HTML标签的属性就像访问JavaScript创建的对象的属性一样简单.
var imgObj = document.getElementById("imgObj"); alert(imgObj.src);//获取src属性如此简单
使用HTML DOM也使得访问页面一些元素变得更加简单
var bodyTag = document.documentElement.lastChild;//DOM标准方式 bodyTag = document.body;//HTML DOM方式 var titleTag = document.getElementsByTagName("title")[0].firstChild.nodeValue;//DOM标准方式 titleTag = document.title;//HTML DOM方式 //HTML DOM不仅仅可以用来获取内容,也可以设置 document.title ="Change The Title!!!";
方法总结:
JavaScript→Dom就是C#→.Net Framwork。
window对象:
alert方法,弹出消息对话框。
confirm方法,显示“确定”、“取消”对话框。
navigate方法,重新导航到指定的地址。
setInterval每隔一段时间执行指定的代码,第一个参数为代码的字符串,第二个参数为间隔时间(单位毫秒),返回值为定时器的标识
clearInterval取消setInterval的定时执行,相当于Timer中的Enabled=False。因为setInterval可以设定多个定时,所以clearInterval要指定清除那个定时器的标识,即setInterval的返回值。
setTimeout也是定时执行,但是不像setInterval那样是重复的定时执行,只执行一次。
clearTimeout也是清除定时。
showModalDialog弹出模态对话框。
showModelessDialog弹出非模态窗口。
window.location.href='http://www.baidu.com',重新导向新的地址。
window.location.reload() 刷新页面。
window.event是非常重要的属性,用来获得发生事件时的信息,事件不局限于window对象的事件,所有元素的事件都可以通过event属性取到相关信息。
clientX、clientY 发生事件时鼠标在客户区的坐标;
screenX、screenY 发生事件时鼠标在屏幕上的坐标;
offsetX、offsetY 发生事件时鼠标相对于事件源(比如点击按钮时触发onclick)的坐标。
.srcElement,获得事件源对象。几个事件共享一个事件响应函数用。
keyCode,发生事件时的按键值。
button,发生事件时鼠标按键,1为左键,2为右键,3为左右键同时按。
altKey属性,bool类型,表示发生事件时alt键是否被按下,类似的还有ctrlKey、shiftKey属性
screen对象,屏幕的信息
clipboardData对象,对粘贴板的操作。clearData("Text")清空粘贴板;getData("Text")读取粘贴板的值,返回值为粘贴板中的内容;setData("Text",val),设置粘贴板中的值。
【<input type="button" value="推荐给好友" onclick="clipboardData.setData('Text','推荐给你一个网站,很好玩'+location.href);alert('已经将网址放到粘贴板中,发给你的好友即可');"/>
重复帐号:<input type="text" onpaste="alert('为保证帐号的正确,请勿粘贴帐号');return false;" />】
【clipboardData.setData('Text', clipboardData.getData('Text') + '本文来rohelm博客,转载请注明来源。' + location.href);】
body对象的事件
onload:网页加载完毕时触发。
onunload:网页关闭(或者离开)后触发。
onbeforeunload:在网页准备关闭(或者离开)后触发。在事件中为"window.event.returnValue赋值(要显示的警告消息),这样窗口离开(比如前进、后退、关闭)就会弹出确认消息
document对象的事件
document.write('<font color=red>你好</font>');
getElementById方法,根据元素的Id获得对象,getElementsByName返回值是对象数组。
getElementsByTagName,获得指定标签名称的元素数组.
createElement方法来创建具有指定标签的DOM对象,然后通过调用某个元素的appendChild方法将新创建元素添加到相应的元素下。
效果演示:
全选
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
1 <script type="text/javascript"> 2 function SetCheckedAll() { 3 var allbtns = document.getElementsByName("setall"); 4 var setopenbtn = document.getElementById("all"); 5 for (var i = 0; i < allbtns.length; i++) { 6 allbtns[i].checked = setopenbtn.checked; 7 allbtns[i].onclick = function () { 8 9 var b = true; 10 for (var i = 0; i < allbtns.length; i++) { 11 if (!allbtns[i].checked) { 12 b = false; 13 break; 14 } 15 } 16 setopenbtn.checked = b; 17 } 18 } 19 } 20 21 </script> 22 <body> 23 <input type="checkbox" name="setall"> 24 <input type="checkbox" name="setall"> 25 <input type="checkbox" name="setall"> 26 <input type="checkbox" name="setall"> 27 <input type="checkbox" name="setall"> 28 <input type="checkbox" name="setall"> 29 <input type="checkbox" name="" id="all" onclick="SetCheckedAll()"> 30 </body>
Value 获取表单元素。
几乎所有DOM元素都有innerText、innerHTML属性(注意大小写),分别是元素标签内内容的文本表示形式和HTML源代码,这两个属性是可读可写的。效果:动态添加blog列别
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
1 <head> 2 <title>动态添加blog列别</title> 3 <script type="text/javascript"> 4 function CreateTable() { 5 var div = document.getElementById("news"); //获取位置层 6 var table = document.createElement("table"); //创建具有指定的table对象 7 table.border = 1; 8 var newsblog = { "学生博客": "http://www.cnblogs.com/rohelm", "菜鸟博客": "http://www.cnblogs.com/rohelm" }; 9 //创建一个数组(地址) 10 for (var name in newsblog) { 11 var tr = document.createElement("tr"); //创建指定的tr对象 12 var td1 = document.createElement("td"); //创建指定的td对象(第一列) 13 td1.innerText = name; 14 tr.appendChild(td1); 15 var td2 = document.createElement("td"); //创建指定的td对象(第二列) 16 td2.innerHTML = "<a href=" + newsblog[name] + ">" + newsblog[name] + "</a>" 17 tr.appendChild(td2); 18 table.appendChild(tr); //添加元素 19 } 20 21 div.appendChild(table); 22 table.style.listStyle = "none"; 23 table.style.color = "yellow"; 24 25 } 26 </script> 27 </head> 28 <body> 29 <input type="button" onclick=" CreateTable()" value="生成列表"/> 30 <div id="news"> 31 </div> 32 </body>
火狐不支持InnerText。
所以动态加载网站列表的程序修改为:
1 var tr = tableLinks.insertRow(-1);//FF必须加-1这个参数 2 var td1 = tr.insertCell(-1); 3 td1.innerText = key; 4 var td2 = tr.insertCell(-1); 5 td2.innerHTML = "<a href='" + value + "'>" + value + "</a>";
事件中的this。除了可以使用event.srcElement在事件响应函数中,this表示发生事件的控件。只有在事件响应函数才能使用this获得发生事件的控件,在事件响应函数调用的函数中不能使用,如果要使用则要将this传递给函数或者使用event.srcElement。(*)this和event.srcElement的语义是不一样的,this就是表示当前监听事件的这个对象,event.srcElement是引发事件的对象
获取和设置元素属性——getAttribute与setAttribute方法
var p1 = document.getElementById("p1");
alert(p1.getAttribute("id"));
p1.setAttribute("title","Value");