前言:
通过javascript可以重构整个HTML文档,可以添加、移除、改变、或重排页面上的项目。要改变页面上的某个部分,javascript就需要对HTML文档中所有元素设置进行访问的接口。通过这个接口,可以提供对HTML元素进行添加、移动、改变、或移除的方法和属性,这些都是由文档对象模型(DOM)来实现。简单点说,HTML文档代表的是页面,而DOM则代表了如何去操作页面。
1、DOM树的结构
DOM节点树中的节点有元素节点、文本节点、和属性节点等三种不同的类型。
2、document对象
document对象代表一个浏览器窗口或框架中显示的HTML文件。浏览器在加载HTML文档时,为每个HTML文档创建document对象,document对象是window对象的一个属性。document对象有大量的属性和方法。
最常用的函数如下:
document.write():动态的向页面写入内容。
document.createElement(Tag):创建一个html标签对象。
document.getElementById(ID):获得指定ID值的对象。
document.getElementByName(Name):获取指定name值的对象。
Example a :
var mainContent = document.getElementById("main"); //alert(mainContent); mainContent.style.backgroundColor = "#FF0000"; var paragraphs = document.getElementsByTagName("p"); for (var i = 0; i < paragraphs.length;i++) { paragraphs[i].style.fontSize = "2em"; } var elements = document.getElementsByTagName("body")[0].childNodes; for (var i = 0; i < elements.length;i++) { alert(elements[i].nodeType); }
HTML文档:
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="default.aspx.cs" Inherits="UI._default" %> <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title>DOM</title> <script src="Scripts/jquery-1.7.1.min.js"></script> <script src="Scripts/Demo.js"></script> </head> <body> <div id="main"> <p class="intro">Welcom to my web sit</p> <p>We sell all the widgets you need</p> </div> <div id="footer"> Copyright 2015 Example Corp,Inc </div> <input type="button" onclick="" value="执行" /> </body> </html>
注:childNodes属性返回节点的子节点集合,以Nodelist对象(换行为文本节点)。
Document对象还有下面几个比较常用的方法和属性:
open():打开一个流,以收集来自任何document.write()或document.writeln()的方法的输出。
close():关闭document.open打开的输出流,并显示选定的数据。
write():向文档写HTML代码或javascript代码。
writeln():等同于write()方法,不同的是在每个表达式之后写一个换行符。
title:该属性可以引用和设置页面中title标记的内容。
Example b:
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="default.aspx.cs" Inherits="UI._default" %> <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title>DOM</title> <script src="Scripts/jquery-1.7.1.min.js"></script> <script type="text/javascript"> function Greeting() { var NewWin = window.open(); var name = document.getElementById("name"); //alert(name.value) with(NewWin.document) { open(); write("<h1>新的页面</h1>"); close(); } } </script> </head> <body> 输入你的姓名:<input type="text" id="name"/> <button onclick="Greeting()">Greeting</button> </body> </html>
3、获取DOM中的元素
DOM中定义了多个获取元素节点的方法,如getElementById()、getElementsByName()和getElementsbyTagName()。如果需要获取文档中某一特定的元素节点,最有效的方法是getElementById()。
3.1、getElementById():该方法是通过元素节点的ID来准确的获取元素节点。
Example:
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="default.aspx.cs" Inherits="UI._default" %> <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title>DOM</title> <script src="Scripts/jquery-1.7.1.min.js"></script> <script type="text/javascript"> function gGetValue() { var x = document.getElementById("myHeader"); alert(x.innerHTML); } </script> </head> <body> <h1 id="myHeader" onclick="gGetValue()">这是标题</h1> <p>点击标题,会提示出它的值</p> </body> </html>
3.2 getElementsByName():根据Name属性来获取元素节点,得到的是一个元素节点数组。
example:
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="default.aspx.cs" Inherits="UI._default" %> <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title>DOM</title> <script src="Scripts/jquery-1.7.1.min.js"></script> <script type="text/javascript"> function GetElements() { var x = document.getElementsByName("MyInput"); alert(x.length); } </script> </head> <body> <input name="MyInput" type="text" size="20"/> <br /> <input name="MyInput" type="text" size="20"/> <br /> <input name="MyInput" type="text" size="20"/> <br /> <input type="button" onclick="GetElements()" value="名为myInput的元素有多少个?" /> </body> </html>
注:getElementById()能够与GetElementsByName()结合起来用:document.getElementById("a").GetElementsByName("b")意思就是获取Id为a元素节点的子节点中Name属性为b的所有元素节点,以数组的形式表示。
3.3 getElementsByTagName():通过元素的标签名获取节点,同样该方法返回的也是一个数组。