AJAX学习(二)-------DOM基础-CSDN博客

本文链接：https://blog.csdn.net/tzd_java/article/details/2186746

DOM简介

DOM是”Document Object Model”（文档对象模型）的首字母缩写。当创建了一个网页并把它加载到

Web浏览器中时，就会在幕后创建一个文档对象。

DOM表示被加载到浏览器窗口里的当前页面：浏览器向我们提供了当前页面的模型，而我们可以通过

JavaScript访问这个模型。

DOM把一份文档表示为一棵树。

如下的HTML页面：
<html>
    <head>
        <title>rees, trees, everywhere</title>
    </head>
    <body>
        <h1>rees, trees, everywhere</h1>
        <p>welcome <em>really</em></p>
    <body>
<html>

DOM树中的一切是以最外层的HTML包含元素，即html元素开始的。使用树的比喻，这叫做根元素（root

element）。

从根流出的线表示不同标记部分之间的关系。head和body元素是html根元素的孩子（child）；title是head的孩

子，而文本 “Trees, trees, everywhere”是title的孩子；相对的，head是title的父亲（parent），title是文本

“Trees, trees, everywhere” 的父亲。处在同一层次的且互不包含的两个分支（如head和body）之间称为兄弟

（sibling）关系。整个树就这样组织下去，直到浏览器获得与上图类似的结构。

通常把这样的树结构成为一棵节点树。

节点（node）

DOM文档是由节点构成的集合，此时的节点是文档树上的树枝或树叶。

DOM中节点的类型：

元素节点（element node），诸如<head>、<p>、<div>等。元素可以包含其它的元素，唯一没有被包含在其它
元素里唯一的元素是<html>，它是根元素。

文本节点（text node），网页上，内容是最重要的。<h1>元素中包含着文本节点“Trees, trees, everywhere”。

属性节点（attribute node），元素或多或少地有一些属性，属性可以对元素做出一些具体的描述。因为属性总是被放到起始标签里，所以属性节点总是被包含在元素节点中。

基本DOM方法

getElementById(id) //取元素节点
返回一个给定id属性的元素节点相对应的对象。这个方法是与document对象相关联的函数。

getElementsByTagName(tagname) //取元素节点
返回一个对象数组，它们分别对应着文档里的一个特定的元素节点。
g
etAttribute() //取属性节点值
返回对象的属性值
s
etAttribute() //设置属性节点值
修改对象的属性值

了解了dom的一些基本概念及方法后，下面我们通过实例加深下印象！

<%@ page language="java" import="java.util.*" pageEncoding="ISO-8859-1"%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
    <title>DOM study</title>
    <script type="text/javascript">
        function init(){
            var id1_value = document.getElementById("id1");      //根据属性节点为id1取得
            alert(id1_value.value);                                                      //输出值为1
            var inputs = document.getElementsByTagName("input");   //根据标签为input取得
            alert(inputs.length);                        //输出值为2,因定义了两个input标签
            for(var i = 0 ; i<inputs.length; i++){
                  alert(inputs[i].getAttribute("value"));                //输出1,2
                  inputs[i].setAttribute("value","new_value");    //为id1 id2赋值为"new_value"
            }
        }

        window.onload = init ;                       //加载整个页面后再执行，注意init后没有()
    </script>
</head>

<body>
    <form action="">
      <input id="id1" type="text" value="1" name="input1">
      <input id="id2" type="text" value="2" name="input2">
    </form>
</body>
</html>