前言：
通过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>
时间： 2024-10-09 06:47:28