DOM

DOM学习

1、Dom介绍

DOM是HTML页面对象的模型，将每个标签都做为一个对象，JavaScript通过调用DOM中的属性、方法就可以对网页中的文本框、层等元素进行动态编程控制。

JavaScript与Dom的关系就是C#与.Net Framwork的关系。

详细介绍：DOM（document object model）

　　也可以把DOM理解为javascript在浏览器文档中引用对象的方式。本章将进一步谈到DOM如何表示组成WEB文档的对象，以及如何使用DOM在页面中移动对象。

理解DOM结构：

　　一个HTML文档可以理解为由多个容器与内容组成的，<html>标签包含整个文档，而<body>包含了文档中的正文。DOM（document object model）通过对象来表示页面中的每个容器与内容，这些对象之间的关系表现为树型结构(tree)。该结构(tree)也很符合HTML标签之间的包含关系，从而很好的描述了文档的结构。这就是DOM。

什么是结点(node)：

　　WEB文档中每个元素都被称为是DOM的一个结点。脚本经常需要引用结点，可以通过ID来查找，也可以通过结点关系在TREE结构中导航来实现。

父与子关系：

　　指的是DOM中结点之间的关系，就是被包含的关系，父结点包含子结点，而子结点被父结点包含。

　　这里有一点要弄清楚：文本类结点有点不同的是，文本结点的内容也是文本结点的子结点，比如<p>的内容就<p>的子结点。

结点的兄弟关系：

　　简单的来理解就是：2个对象拥有同一个父对象，那这2个对象就是兄弟关系，它们2个应该在TREE的同一层中。

可定位元素（层）：

　　通过DOM可以控制WEB文档中的任何元素，包括：改变元素的样式、改变元素的位置等。

　　层是指用特定标签定义的特殊元素组，虽然现在已经可以定位任何元素，但是在很多时候使用元素组仍然很有用。利用<div >标签可以创建层。

利用<div>标签创建层的具体方式：

　　把层的内容写在<div>与</div>之间。

　　<div>的style属性指定了该层的相关属性。

利用javascript控制定位层：

　　实现其实很简单，只需要引用对象的style属性就可以了。<div>的style属性定义了该层的样式，我们可以修改style的属性以实现改变该层的样式，当然也可以移动该层在浏览器中的位置：

　　</div>

　　以上代码通过<div>标签定义了一个层。

　　Var obj=document.getElementById(“layer1”).style.top=200;

　　以上代码实现了将layer1所标识的层向下移动了100象素。

　　临时插上一句：一些ＣＳＳ属性中有连字符，比如：text-align。在javascript中使用的时候连字符的２边必须要合并在一起，连字符后的部分采用首字符大写，比如：textAlign。

如何在文档内写入文字？

　　Document.write()方法的作用是写入文字到指定文档，而document.writeln()不但可以想document.write()那样写入文字而且还在最后写入一个换行符号(\n)。

2、window对象

window对象代表浏览器的整个窗口，在JavaScript中，对window对象的属性和方法的引用，可以省略“window”这个前缀。

1）window对象的方法

alert方法：显示一个只有Ok按钮的提示对话框。

confirm方法：显示一个Ok和Cancel按钮的对话框，分别返回true和false。

用法：bool confirm("提示字符串");

close方法：关闭当前浏览器窗口。

navigate方法：在当前窗口中导航到指定的窗口。

用法：window.navigate(url);火狐和谷歌不支持。

setInterval方法：设置浏览器每隔多长时间定期调用指定的代码，单位为毫秒。

用法：var intervalId=setInterval(code, delay);

setTimeout方法：设置浏览器过多长时间执行指定的代码。

cleatInterval方法：取消setInterval的设置，参数为要取消setInterval的返回值。

用法：clearInterval(intervalId);

clearTimeout方法：取消setTimeout的设置。

showModalDialog方法：产生一个模态对话窗口。

showModelessDialog方法：产生一个非模态对话窗口。

2）window对象的属性

close：返回true或者false，表示window对象对对应的窗口是否关闭。

opener：表示打开当前窗口的那个window对象。

Defaultstatus：设置和返回窗口状态栏中默认显示的文本内容。

Status：设置和返回窗口状态栏中当前正显示的内容。

screenTop：返回窗口左上角顶点在屏幕上的垂直距离。

srceenLeft：返回窗口左上角顶点在屏幕上的水平距离。

3）window对象的事件

onload：对应浏览器窗口装载完网页文档时的事件。

onunload：对应浏览器窗口卸载网页文档之后的事件。

onbeforunload：对应浏览器窗口准备卸载网页文件之前的事件。

onclick：单击某个HTML元素时产生的事件。

onmousemove：当鼠标在某个HTML元素上移动时产生的事件。

onmouseover：当鼠标刚从外面移进一个HTML元素的边界时产生的事件。

onmouseout：当鼠标移出一个HTML元素的边界时产生的事件。

onmousedown、onmouseup、onkeydown、onkeyup、onkeypress。

4）window对象的对象属性

a、localtion：设置和返回当前网页的URL信息。

winodw.location.href= "url";

winodw.location.reload()：刷新

b、event：获取和设置当前事件的有关信息。

altKey、ctrlKey、shifrtKey分别检验事件发生时，该键是否被按下。

clientX、clientY：设置和返回鼠标相对有效工作区顶点的x和y坐标。

screenX、screenY：设置和返回鼠标相对于屏幕顶点的x和y坐标。

offsetX、offsetY：设置和返回鼠标相对于事件源顶点的x和y坐标。

x、y：设置和返回鼠标相对于事件源的父元素顶点的x和y坐标。

cancelBubble：设置和返回当前事件是否被继续传下去。

取消事件冒泡： window.event.cancelBubble = true;

srcElement：设置和返回事件源对象。

keyCode：设置和返回键盘按下、键盘谈起时的那个按键的unicode码。

button：用于检索鼠标移动、按下、弹起时使用的哪个按键。

火狐不支持evevt处理兼容性：

// 如果浏览器支持window.event那么就使用它，否则使用传进来的第一个参数(Firefox)

var e = window.event || arguments[0];

IE中的event.offsetX、event.offsetY，火狐上是arguments[0].layerX、layerY。

c、screen

这个对象中的一些属性提供了一些显示器分辨率和色彩度相关的信息。

window.screen获取屏幕信息

onload = window.document.onmousedown = function () {

var sr = window.screen;

alert(sr.width+"*"+sr.height);

}

d、clipboardData

这个对对象提供了读写剪切板的内容。

• clipboardData.setData("text", value);
• clipboardData.getData("text");
• clipboardData.clearData("text");
• oncopy事件、onpaste事件、oncut事件

禁止复制、禁止粘贴、禁止剪切等在对应的事件中return false。

练习：给文章添加版权信息。

window.onload = function () {

document.getElementsByTagName("body")[0].oncopy = function () {

//得到剪切板中的数据

var txt = clipboardData.getData('text');

//添加版权注意：需要延迟操作，哪怕是0秒钟

setTimeout(function(){

clipboardData.setData('text', txt + "\r\n文章来源于www.itcast.com,欢迎关注")},100);

};

}

e、history

提供了重新装载浏览器曾经访问过的URL列表中的某个URL的方法。

window.history.back(); window.history.go(-1);
window.history.forward();window.history.go(1);

f、navigation

提供了获取浏览器名称、版本号、所用的操作系统、cpu类型、浏览器的国家语言等方面的信息。

g、document对象

document对象代表整个网页文档，下面详细介绍。

3、document对象

tite：可以设置显示在浏览器标题上的内容。

write：用于向HTML文档中动态写入内容。

writeln：与wite类似。

write与writeln的区别：

如果

document.write('<a href="#">123</a>');

翻译成HTML

如果

document.writeln('<a href="#">123</a>');

翻译成HTML

getElementById：根据id获取指定HTML元素对象

语法：var ele=document.getElementById(“id号”);

getElementsByTagName：根据name获取HTML元素数组。

语法：var tagsObject=document.getElementsByTagName(“标签名”);

createElement：产生一个代表HTML元素的对象。

创建文本节点，用：document .createTextNode(“要创建的文本”);

4、body对象

bosy对象代表HTML文档的整个正文部分，也就是<body></body>之间的所有内容。body是document的一个对象。

1）body对象的方法

body中的大多数方法都是HTML元素所通用的方法。如：appendChild

属性：

className：设置或返回HTML对象的className属性值。

如：document.getElementById(“dv”).className=”content”;

innerText：获取或设置HTML元素的标签对之间的内容。（IE、谷歌支持，火狐不支持）

innetHTML：标签对之间的内容，可以包含标签。（标准用法）

offsetTop、offsetLeft：元素的左上角顶点到上一级元素左上角顶点的垂直和水平距离。

offsetWidth、offsetHeight：元素自身的宽度和高度。

clientTop、clientLeft：对象上的客户区顶点相对于自身顶点的垂直和水平距离。

clientWidth、clientHeight：对象上的可见客户区的宽度和高度。

5、form对象

1）submit方法：模拟点击表单的submit按钮，但不产生onsubmit事件。

在页面添加一个submit标签，用button按钮调用submit按钮的click方法。

</form>

onload = function () {

document.getElementById("btn").onclick = function () {

document.getElementById("submit").click();

};

2）form的onsubmit事件，表单提交发生该事件。

document.getElementById("fr").submit();

6、form表单字段元素对象

form字段元素包括普通按钮、提交按钮、重置、单选、复选按钮，文本输入框、多行文本输入框、下拉列表等。

事件：

onChange：焦点离开文本框且文本框值改变，或者改变列表框的选择结果后，触发。

onSelect：单行或者多行文本框文字被选择加亮后，产生该事件。

onFocue：表单字段元素获得焦点时，产生该事件。

onBlure：当表单字段元素失去焦点，产生该事件。

7、其他

1）节点相关

HTML的成员在DOM中都是一个节点。

（1）节点的常用属性：

nodeType：节点的类型。供12种取值，3种常用（1：元素；2：属性；3：文本）

nodeName：表示元素的名字（特用于元素节点）。得到是标签的大写形式。

得到文本节点：获得一个容器（父元素） à 调用父元素的childNodes à 取 nodeType=3的节点。

nodeValue：表示节点的文本（只是用于文本）

ele.firstChild.nodeValue、ele.lastChild.nodeValue

在火狐与谷歌和IE9中，将标签后的换行当作一个节点。

当一个标签下面只有一个标签，习惯用lastChild获取该标签（避免空节点）。

（2）创建元素节点：

语法：var 元素的引用=document .createElement（“元素标签名”）；

创建文本节点用：document .createTextNode(“要创建的文本”);

（3）获取或者设置元素属性：

getAttrubute

语法：var 属性值=元素.getAttribute(“属性名”);

setAttribute

语法：元素.setAttribute(“属性名”,”属性值”);

（4）删除节点

parentElement.removeChild(被删除的节点)：子节点也会被删除。

被删除的节点.removeNode(false[true])，true表示连子节点删除

（3）追加元素：

父容器.appendChild(元素的引用);

父元素.insertBefore(新元素，旧元素);

2）动态创建Table

方法1：

语法：元素.insertRow/insertCell(-1)

-1表示追加。0表示新添加的在最前边。

方法2：

document.createElement(.....)与appendChild(...)

var tr = document.createElement("tr");

var td = document.createElement("td");

td.innerHTML = "一个数据";

tr.appendChild(td);

table.appendChild(tr);

var row = table.insertRow(-1);

var cell = row.insertCell(-1);

cell.innerHTML = "测试数据" + i;

3）JS追加事件：

js中没有C#中事件的“+=”，可以用如下方法追加：

function myLoad(func){

var oldLoad=window.onload;

if(typeof oldLoad!="function"){

window.onload=func;

}else{

window.onload=function(){

oldLoad();

func();

}

// 执行方法调用加载事件方法

addEvent(registerOnclick);

addEvent(InitialDiv);

Window对象：

　　Windows对象是浏览器对象层的最顶层对象，该对象表示有个浏览器窗口。框架也可由window对象表示。

如何处理WEB文档？

　　我们知道document对象代表一个WEB文档(页面)，WEB文档被浏览器打开并显示在浏览器窗口中。Document对象是window对象的子对象，所以可以标准的来引用该对象：window.document

　　如何获得WEB文档的信息？

　　当前文档的信息被包含在document对象的属性中：

　　Document.URL：指明了该文档的URL地址，其内部存储了一个字符串。而且该属性是“只读属性”。

　　Document.title：指出当前文档的标题，由HTML中的<title>标签定义。

　　Document.referrer：用户浏览的上一页面URL。

　　Document.lastModified：文档最后修改日期，该属性从服务器获得数据。

　　Document.bgColor：文档的背景颜色。

　　Document.fgColor：文档的前景颜色。

　　Document.linkColor：是文档中连接的颜色。

　　Document.cookie：关于该文档的cookie。

十三：DOM的高级功能

DOM结点：

　　DOM以TREE结构组织网页中的对象，在javascript中可以访问该结点的每个对象。

基本结点属性：

　　以下属性将是DOM中的每个结点对象都具有的：

　　nodeName：是结点的名称属性，并非是ID，而是NAME。对于基本HTML标签来说，这个属性就是p或者body或者title。而对于文档结点来说该属性应该是：#document或#text等。

　　nodeType：该属性为描述结点类型的一个整数，1表示HTML标签，3表示文本结点，9表示文档结点。

　　nodeValue：是文本结点中包含的实际文本。

　　innerHTML：结点的HTML内容。

结点的关系属性：

　　除了以上介绍的基本属性外，每个结点还有描述与其它结点关系的属性：

　　firstChild：代表当前结点的第一个子对象。

　　lastChild：当前结点的最后一个子对象。

　　childNodes：当前结点的所有子结点的数组，该数组的length属性表示了当前结点一共有多少个子结点。

　　previousSibling：是当前结点之前的兄弟结点。

　　nextSibling：是当前结点之后的兄弟结点。

　　文档方法：

　　Document结点代表当前WEB页面，document结点也有几个方法，方法信息如下：

　　getElementById()：返回具有指定ID属性的元素。

　　getElementsByTagName()：返回具有指定标签的所有元素的数组。

　　createTextNode()：创建一个包含指定文本的文本结点。

　　createElement()：为指定标签创建一个HTML元素。

结点的方法：

结点的方法包括：

　　appendChild()：把指定结点添加为该对象的最后一个子对象。

　　insertBefore()：把指定的新结点插入到指定的原由结点之前。

　　replaceChild()：用新结点替换原由的指定子结点。

　　removeChild()：从对象的子结点集中删除一个指定的结点。

　　hasChildNodes()：在结点拥有一个或多个子结点时返回true否则返回false。

　　cloneNode()：为当前结点创建一个副本，如果指定参数true的话，将包括子结点集。

隐藏或显示对象：

　　对象有一个visibility属性，用于指定该对象在当前页面中是否可见：

　　 Object.style.visibility=”hidden”;

　　以上代码将隐藏object。

　　 Object.style.visibility=”visible”;

　　以上代码将显示object。

如何在页面中修改文本？

　　文本结点的nodeValue属性包含了当前的实际文本，标题结点的子结点既是标题的内容。如果要想修改标题的内容的话，可以这样做：

　　 Var head1=document.getElementById(“head1”);

　　以上代码将找到ID属性为head1的结点。

　　 Head1.firstChild.nodeValue=”new text here”;

　　以上代码将head1对象的第一个子对象的nodeValue属性设置为新的文本。

为页面添加新文本：

　　其实实现这个功能也是非常简单的，具体步骤如下：

　　创建新的文本结点：var node=document.createTextNode(“test”);

　　把创建的结点添加到文挡中：document.getElementById(“p1”).appendChild(node)；

posted @ 2013-11-04 11:06 Regan 阅读(668) 评论(2) 编辑收藏举报

刷新页面返回顶部

Regan

DOM

1、Dom介绍

详细介绍：DOM（document object model）

理解DOM结构：

如何在文档内写入文字？

2、window对象

1）window对象的方法

2）window对象的属性

3）window对象的事件

4）window对象的对象属性

3、document对象

4、body对象

1）body对象的方法

5、form对象

1）submit方法：模拟点击表单的submit按钮，但不产生onsubmit事件。

2）form的onsubmit事件，表单提交发生该事件。

6、form表单字段元素对象

7、其他

1）节点相关

（1）节点的常用属性：

（2）创建元素节点：

（3）获取或者设置元素属性：

（4）删除节点

（3）追加元素：

2）动态创建Table

3）JS追加事件：

Window对象：

如何处理WEB文档？

十三：DOM的高级功能

DOM结点：

基本结点属性：

结点的关系属性：

文档方法：

结点的方法：

公告

　　文档方法：