JavaScript 文档对象模型

前端的核心就是展示页面，研究前端，必须先搞明白页面的构成。文档对象模型（Document Object Model，DOM）就是页面的组成结构。

文档对象模型

HTML DOM 被构造为一颗对象的树：

树的根节点就是文档对象 Document，它包含了页面中的所有内容。其次，根节点之下的结构是由 HTML 标签的结构决定的，如上图的树结构对应以下的 HTML 页面：

<html>
    <head>
        <title>My title</title>
    </head>
    <body>
        <h1>My header</h1>
        <a href = "">My link</a>
    </body>
</html>

可以直接看出，html 节点是 head 和 body 的父节点，head 和 body 是兄弟节点，它们之下又有孩子 title、h1、a 节点；其次，每个节点都有自己的属性。这样的结构组成了文档对象模型 DOM。

而 JavaScript 可以通过操作 DOM 对象，修改其中的节点从而构建动态的网页。

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

查找 DOM 节点

一般有三种方式获取 DOM 节点，即通过 Id、Class 和标签。

如果查找到了对应的节点，则会返回这些节点，若查找不到则会返回空。

通过 Id 获取

<html>
    <head>
        <title>My title</title>
    </head>
    <body>
        <p id="p1">Qyc的段落</p>
    </body>
</html>
<script>
    var x = document.getElementById('p1');
    // x 就是 id = 'p1' 的对象了，可以获取和修改其中的属性
    document.write("<p>id = p1 的段落内容：" + x.innerHTML + "</p>");
</script>

通过 Class 获取

<html>
    <head>
        <title>My title</title>
    </head>
    <body>
        <p id="p1" class="Qy">Qyc的段落</p>
        <div id="div1" class="Qy">Qyc的Div</div>
    </body>
</html>
<script>
    var x = document.getElementsByClassName('Qy');
    // x 包括了上面的 p1 和 div1
    document.write(x[0] + " and " + x[1]);
    // [object HTMLParagraphElement] and [object HTMLDivElement]
</script>

通过标签获取

<html>
    <head>
        <title>My title</title>
    </head>
    <body>
        <p id="p1" class="Qy">Qyc的段落</p>
        <p id="p2" class="Qyc">Qyc的Div</p>
    </body>
</html>
<script>
    var x = document.getElementsByTagName('p');
    // x 包括了上面的 p1 和 p2
    document.write(x[0] + " and " + x[1]);
    // [object HTMLParagraphElement] and [object HTMLParagraphElement]
</script>

操作 DOM 节点

获取到 DOM 节点之后，可以通过一系列方法对节点进行操作，这正是动态网页的基础。

修改内容

通过 .innerHTML 可以修改节点的文本内容

<html>
    <head>
        <title>Qyc</title>
    </head>
    <body>
        <p id="p1" class="Qy">Qyc的段落</p>
    </body>
</html>
<script>
    // 获取 id 为 p1 的元素
    var x = document.getElementById('p1');
    // 改变内容
    x.innerHTML = "更改后的 Qyc 段落";
</script>

修改属性

通过 .attribute 可以修改节点的属性（此处的 attribute 是具体的属性）：

<html>
    <head>
        <title>Qyc</title>
    </head>
    <body>
        <img id="img" src="">没有图片</img>
    </body>
</html>
<script>
    // 获取 id 为 p1 的元素
    var x = document.getElementById('img');
    // 改变属性
    x.src = "gaze.jpg";
</script>

修改 CSS 样式

通过 .style 可以修改节点的样式，具体的样式在 style 后进行指定，属于层级关系：

<html>
    <head>
        <title>Qyc</title>
    </head>
    <body>
        <p id="p1" class="Qy">Qyc的段落</p>
    </body>
</html>
<script>
    // 获取 id 为 p1 的元素
    var x = document.getElementById('p1');
    // 改变 样式
    x.style.color = "blue";
    x.style.fontFamily="Arial";
    x.style.fontSize="larger";
</script>

添加事件

原本我们可以通过在元素中设置事件属性的方式，为元素设置一些事件：

<html>
    <head>
        <title>Qyc</title>
    </head>
    <body>
        <p id="p1" onclick="changeText()">Qyc的段落</p>
    </body>
</html>
<script>
    function changeText(){
        // 获取 id 为 p1 的元素，操作它
        var x = document.getElementById('p1');
        x.innerHTML = "触发事件了！";
        x.style.color = "blue";
        x.style.fontFamily="Arial";
        x.style.fontSize="larger";
    }
</script>

现在，通过操作 DOM 节点，我们也可以为元素设置事件：

<html>
    <head>
        <title>Qyc</title>
    </head>
    <body>
        <p id="p1" onclick="bindEvent()">Qyc的段落</p>
    </body>
</html>
<script>
    function bindEvent(){
        var x = document.getElementById('p1');
        // 设置双击事件
        x.ondblclick = function(){ changeText() };
    }

    function changeText(){
        // 获取 id 为 p1 的元素，操作它
        var x = document.getElementById('p1');
        x.innerHTML = "触发事件了！";
        x.style.color = "blue";
        x.style.fontFamily="Arial";
        x.style.fontSize="larger";
    }
</script>

在以上这段代码中，先单击段落时，会为其设置 ondblclick 事件 changeText()，之后再双击段落，就会和之前一样改变文本了。

页面的事件有很多，如页面进入和离开时的事件 onload 和 onunload，鼠标移进和移出的事件 onmouseover 和 onmouseout，这里就不多演示了。

总结

除此之外，操作 DOM 还能为节点添加事件监听（ EventListener ），或者添加和删除节点，不过这些暂时还用不到，就先不管啦。

总之，通过文档对象模型 DOM，可以动态地改变网页内容，了解 DOM，也就了解了网页结构。虽然以后可能用的都是 MVVM 模型，但这毕竟是网页的基础，还是要搞明白的。

posted @ 2022-08-12 15:33 Qirror 阅读(58) 评论(0) 收藏举报

刷新页面返回顶部

Qiyuanc

JavaScript 文档对象模型