JavaScript入门篇之文档对象模型

超、凢脫俗 2022-08-06 11:16 268阅读 0赞

# 前言： #

文档对象模型（Document Object Model，简称DOM），是W3C组织推荐的处理可扩展置标语言的标准编程接口。它是一种与平台和语言无关的应用程序接口(API),它可以动态地访问程序和脚本,更新其内容、结构和www文档的风格(目前,HTMl和XML文档是通过说明部分定义的)。

文档对象模型提供了一种访问和修改HTML文档内容的方法。DOM是万维网联盟（W3C）定义的一种标准。大部分的互联网浏览器以各种形式实现了DOM并且获得了不同程度的成功。和其他标准，特别是那些与web编程相关的标准一样，DOM已经发展了很多年。它有三个规范，即所谓的DOM的级别，第四个规范正在制定中。DOM的强大远飞我一两句可以谈清楚的。本文简单的介绍了一下如何使用Javascript访问和操作DOM。

![SouthEast][]

# 一、获取元素 #

![SouthEast 1][]

使用Javascript编程时，获取文档的元素是使用DOM的基本方式。下面将介绍其中两个用来获取元素的基本方法：getElementById()和getElementsByTagName()。

## 1、通过ID获取元素 ##

getElementById()方法是DOM中频繁使用的一个方法。它获取HTML文档的一个特定元素并且返回一个对它的引用。为了获取元素，它必须具有一个ID属性。

举例如下：

<div id="div1">
            <p id="p1">
                我是第一个P</p>
            <p id="p2">
                我是第二个P</p>
        </div>
        
        window.onload = function () {
                var str = document.getElementById("p1").innerHTML;
                alert(str);        //弹出    我是第一个P
            }

## 2、通过标签名获取 ##

当只获取一个或几个元素时，getElementById（）方法工作的很好，但是当我需要同时获取超过一个的元素时，就发现getElementsByTagName()方法更合适。后者是通过数组或者列表的格式返回指定标签类型的所有元素。

举例如下：

<div id="div1">
            <p id="p1">
                我是第一个P</p>
            <p id="p2">
                我是第二个P</p>
        </div>
    
        window.onload = function () {
                var str = document.getElementsByTagName("p")[1].innerHTML;
                alert(str);        //输出  我是第二个P，因为获取的是索引为1的P，索引从0开始
            }    
    
        window.onload = function () {
                var arr = document.getElementsByTagName("p");
                for (var i = 0; i < arr.length; i++) {
                    alert(arr[i].innerHTML);
                }
            }
    
        window.onload = function () {
                var node = document.getElementById("div1");
             var node1 = document.getElementsByTagName("p")[1];    //从获取到的元素再获取
                alert(node1.innerHTML);
        }

# 二、操作属性 #

## 1、getAttribute()与setAttribute() ##

getAttribute()是读取属性内容，setAttribute()方法对文档做出的修改，将使得文档在浏览器窗口里的显示效果和/或行为动作发生相应的变化，但我们在通过浏览器的view source（查看源代码）选项去查看文档的源代码时看到的仍将是原来的属性值——也就是说，setAttribute()方法做出的修改不会反映在文档本身的源代码里。这种“表里不一”的现象源自DOM的工作模式：**先加载文档的静态内容、再以动态方式对它们进行刷新，动态刷新不影响文档的静态内容。**这正是DOM的真正威力和诱人之处：对页面内容的刷新不需要最终用户在他们的浏览器里执行页面刷新操作就可以实现。

## 2、举例 ##

<head>
            <title>Untitled Document</title>
            <script language="JavaScript">
                function change() {
                    var input = document.getElementById("li1");
                    alert(input.getAttribute("title"));
                    input.setAttribute("title", "mgc");
                    alert(input.getAttribute("title"));
                }
            </script>
        </head>
        <body>
            <ul id="u">
                <li id="li1" title="hello">Magci</li>
                <li>J2EE</li>
                <li>Haha!</li>
            </ul>
            <input type="button" value="Change" onClick="change();" />
        </body>

# 三、创建、删除、替代、插入节点对象 #

我们没有受到与已有元素交互的限制。我们可以使用DOM为文档添加元素。下面介绍了几种常用的操作Node对象的方法。

![SouthEast 2][]

## 1、创建 ##

<div id="div1">
                <p id="p1">我是第一个P</p>
                <p id="p2">我是第二个P</p>
            </div>
    
        window.onload = function () {
                var textNode = document.createTextNode("<p>我是一个javascript新建的节点</p>");
                document.getElementById("div1").appendChild(textNode);
            }

## 2、删除 ##

<div id="div1">
                <p id="p1">我是第一个P</p>
                <p id="p2">我是第二个P</p>
            </div>
    
        window.onload = function () {
                var div1 = document.getElementById("div1");
                div1.removeChild(document.getElementById("p2"));
            }

## 3、替代 ##

<div id="div1">
                <p id="p1">我是第一个P</p>
                <p id="p2">我是第二个P</p>
            </div>
    
        window.onload = function () {
                var div1 = document.getElementById("div1");
                var span1 = document.createElement("span");
                span1.textContent = "我是一个新建的span";
                div1.replaceChild(span1,document.getElementById("p2"));
            }

## 4、插入 ##

<div id="div1">
                <p id="p1">我是第一个P</p>
            </div>
    
        window.onload = function () {
                var pNode1 = document.createElement("p");
                pNode1.textContent = "insertBefore插入的节点";
                var pNode2 = document.createElement("p");
                pNode2.textContent = "appendChild插入的节点";
                document.getElementById("div1").appendChild(pNode2);
                document.getElementById("div1").insertBefore(pNode1,document.getElementById("p1"));
            }

# 四、小结 #

结合前面一个阶段学过的XML，XML文档就是一颗节点树，树上所有的节点都是有联系的。Javascript就是通过DOM来操作XML中的节点。解释器把XML翻译成Javascript可访问的DOM对象，这样就方便了使用Javascript语言来操作XML文档。

[SouthEast]: /images/20220806/ae9f5cf75b38436793e7ff237870ad80.png
[SouthEast 1]: /images/20220806/326cefea46294e60ae96e11d8c8d8ad7.png
[SouthEast 2]: /images/20220806/88b2f80aa5514142b3ade989403a4f07.png