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方法将新创建元素添加到相应的元素下。

效果演示：

　　　　 全选　　　

code 
 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列别

 
Code 
 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");
【推广】 免费学中医，健康全家人
原文地址：https://www.cnblogs.com/rohelm/p/2441270.html