文档对象模型（DOM）系列一：DOM基础

前言：

　　通过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():通过元素的标签名获取节点，同样该方法返回的也是一个数组。

posted on 2015-07-10 17:17 MyPersistence 阅读(229) 评论(0) 收藏举报

刷新页面返回顶部

MyPersistence

公告