DOM学习笔记(一)

最新推荐文章于 2022-08-26 19:13:18 发布

zeyoo

最新推荐文章于 2022-08-26 19:13:18 发布

阅读量582

点赞数

文章标签：文档 xml javascript html button application

本文链接：https://blog.csdn.net/zeyoo/article/details/3374088

版权

由于学习Ajax的需要，使我不得不去学习DOM的有关知识，很早以前DOM对我来说是一个很抽象的概念。可是事实上，今天才发现DOM其实早就用过，只是自己以前用了不知道而已，那么什么是DOM呢？下面是我今天学习的一些笔记。

DOM是Document Object Model的缩写，即文档对象模型，可以把DOM年作是页面上数据和结构的一个树形表示。下面的结构是我们在XML中很熟悉的：

 
 <?xml version="1.0" encoding="gb2312"?>
<employees>
    <employee name="宋岩岩">
        <job>办分文员</job>
        <salary>6800</salary>
    </employee>
    <employee name="龙建华">
        <job>高级工程师</job>
        <salary>20000</salary>
    </employee>
    <employee name="李晓渊">
        <job>部门经理</job>
        <salary>10000</salary>
    </employee>
</employees>
 

事实上，上述所示就是一个有几个节点组成的DOM树结构。其中，employees是文档的根元素，在employees根元素里包含三个employee节点；而每个employee元素又包含两个节点：job、salary，并且都包含了相应的数据信息，这里employee节点还包含了一个属性。XML、HTML文档以及类似于XML、HTML结构的文档事实上都可以看成是一个DOM，所谓类似于XML、HTML结构就是像上面一样有根元素，根元素里又包含其他节点，节点里面有包含其他节点，而且节点还可以有属性等等。想一想，XML、HTML不正是这样的结构吗？这就是DOM结构。

DOM中的核心概念就是节点。DOM在分析XML文档时，将组成XML文档的各个部分（如元素、属性、文本、注释和处理指令等）映射为一个对象，这个对象就叫做节点。在内存中这些节点形成一棵文档树。而整棵树是一个节点，树中每一个节点就是一棵树或子树，可以认为DOM就是对这棵树的一个对象描述，我们通对访问树中的节点来存取XML文档的内容。

不过DOM的概念远不是我上面说的那么简单，但是我觉得可以这么简单的去理解。

DOM实际上可以看作是一组API(Application Program Interface，应用编程接口)，它把HTML文档、XML文档等看作一个文档对象，DOM里面定义了很多对象以及对象的方法和属性，例如我们在JavaScript中经常要用到的一个方法getElementById()，在具体的编程中我们可以调用这些方法来操作我们的对象（XML文档和HTML文档等），包括使用DOM增加文档，定位文档结构，添加、修改、删除文档元素等。

DOM是独立于程序设计语言的，我们可以在JavaScript中使用DOM，我们也可以在Java中使用DOM，我们还可以在其他语言中以同样的方式使用DOM，这是DOM给我们带来的好处。

下面是使用DOM操作HTML文档的一个实例，该实例用于对分类信息进行管理，用户不但可以添加新的分类，而且可以删除当前已经存在的分类信息。如果用户没有输入新的分类名称，就单击“添加”按钮，将弹出一个对话框，以提示用户输入分类名称。该实例的部分代码如下所示：

 
  <html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>DOM操作HTML文档实例</title>
</head>
<body>
<table style="width:400px; background-color:#99ccff;">
<tbody>
    <tr>
        <td align="center" colspan="3"><b>分 类 管 理</b></td>
    </tr>
    <tr>
        <td height="20" style="width:177px">增加分类</td>
        <td height="20">
            <input type="text" id="name" size="15" />
        </td>
        <td height="20">
            <input type="button" id="submit1" value="添加" onclick="addSort();" />
        </td>
    </tr>
    <tr>
        <td height="20" style="font-weight:bold; width:177px" colspan="3">已添加的分类</td>
    </tr>
</tbody>
</table>
<table style="border:1px solid #000000;" width="400">
    <tr>
        <td>分类名称</td>
        <td id="pos_1">操作</td>
    </tr>
    <tbody id="sortList"></tbody>
</table>
</body>
</html>
 
 

用户可以单击“添加”按钮来添加分类名称，而当用户单击添加按钮的时候调用函数addSort()，该函数用于将新添加的分类显示在下面的表格当中，相关代码如下：

 
   <script language="javascript" type="text/javascript">
    function addSort()
    {
        var name = document.getElementById("name").value.trim();
        if(name == ""){
            alert("请输入分类名称！");
            document.getElementById("name").focus();
            return;
        }
        var row = document.createElement("tr");
        row.setAttribute("id",name);
        var cell = document.createElement("td");
        cell.appendChild(document.createTextNode(name));
        row.appendChild(cell);
        var deleteButton = document.createElement("input");
        deleteButton.setAttribute("type","button");
        deleteButton.setAttribute("value","删除");
        deleteButton.onclick = function(){deleteSort(name);};
        cell = document.createElement("td");
        cell.appendChild(deleteButton);
        row.appendChild(cell);
        document.getElementById("sortList").appendChild(row);
        document.getElementById("name").value = "";
    }
    </script>
 
  

在上述代码中，首先获取用户输入的分类名称，如果分类名称为空，则给出提示信息；如果分类名称不为空，则创建表格中的行及相应的单元格，并设置相应内容及属性。该实例呈现效果图如下所示：

在上图所示的页面中，用户可以单击“删除”按钮删除某一个存在的分类信息。此时将调用函数deleteSort()，相关代码如下：

 
   function deleteSort(id)
{
    if(id!=null)
    {
        var rowToDelete = document.getElementById(id);
        var sortList = document.getElementById("sortList");
        sortList.removeChild(rowToDelete);
    }
}
 
  