HTML DOM (文档对象模型)

<!-- HTML DOM (文档对象模型)

    当网页被加载时，浏览器会创建页面的文档对象模型（Document Object Model）。 -->

HTML DOM 模型被构造为对象的树：

 

 

<!--
过可编程的对象模型，JavaScript 获得了足够的能力来创建动态的 HTML。

    JavaScript 能够改变页面中的所有 HTML 元素
    JavaScript 能够改变页面中的所有 HTML 属性
    JavaScript 能够改变页面中的所有 CSS 样式
    JavaScript 能够对页面中的所有事件做出反应 -->

 

<!-- 查找 HTML 元素

    通常，通过 JavaScript，您需要操作 HTML 元素。
    为了做到这件事情，您必须首先找到该元素。有三种方法来做这件事：
        通过 id 找到 HTML 元素
        通过标签名找到 HTML 元素
        通过类名找到 HTML 元素 -->

<!-- 通过 id 查找 HTML 元素

    在 DOM 中查找 HTML 元素的最简单的方法，是通过使用元素的 id。 -->
    <p id="intro">你好</p>
    <p>该实例展示<b>getElementById</b>方法！</p>
    <script>
        x = document.getElementById("intro");
        document.write("<p>文本自id为intro段落：" + x.innerHTML +"</p>")
    </script>

<!-- 通过标签名查找 HTML 元素

    本例查找 id="main" 的元素，然后查找 id="main" 元素中的所有 <p> 元素： -->
    <p>你好世界</p>
    <div id="main">
        <p>GOM是非常有用的。</p>
        <p>该实例展示了<b>getElementByTaName</b>方法</p>
    </div>
    <script>
        var x = document.getElementById("main");
        var y = x.getElementsByTagName("p");
        document.write('id="mian"元素中的第一个段落为：' + y[0].innerHTML);
    </script>
<!--
通过类名找到 HTML 元素 -->
    <p class="intro">你好世界!</p>
    <p>该实例展示了 <b>getElementsByClassName</b> 方法!</p>
    <script>
        x = document.getElementsByClassName("intor");
        document.write("<p>文本来自class为intor段落："+ x[0].innerHTML +"</p>");
    </script>
    <p><b>注意：</b>INternet Explorer 8 及更早版本不支持getElementsByClassName</p>