Javascript & DHTML DOM基础和基本API第4/5页

《Javascript & DHTML DOM基础和基本API》的4/5页主要介绍了JavaScript中DOM的基础知识和基本API的使用。

DOM的基础知识

DOM是文档对象模型（Document Object Model）的缩写，它是一种表示和操作HTML和XML文档的标准编程接口，可以使用JavaScript来控制web页面的内容、结构和样式。

在DOM中，文档中的每个元素都是节点（node），有不同的类型。节点可以是元素节点、文本节点、注释节点等等。每个节点都有父节点、子节点和同级节点，它们组成了一棵树状的结构，我们称之为节点树。

DOM的基本API

DOM提供了一系列API来控制web页面的内容、结构和样式，其中一些基本的API包括：

1. getElementById

通过给定的id值，获取元素节点

document.getElementById("myElement");

2. getElementsByTagName

通过给定的元素类型，获取元素节点列表

document.getElementsByTagName("div");

3. parentNode，firstChild，lastChild，childNodes

这些属性可以获取节点的父节点、第一个子节点、最后一个子节点和所有子节点列表。

var parent = element.parentNode;
var firstChild = element.firstChild;
var lastChild = element.lastChild;
var childNodes = element.childNodes;

4. innerHTML，innerText，outerHTML，textContent

这些属性可以获取和设置节点的文本内容和HTML内容。

element.innerHTML = "<p>new content</p>";
element.innerText = "new text";
element.outerHTML = "<div id='newElement'><p>new content</p></div>";
element.textContent = "new text";

示例

以下示例演示了如何通过JavaScript动态更改网页中的文本内容和样式。

<!DOCTYPE html>
<html>
<head>
    <title>DOM Manipulation Example</title>
    <style type="text/css">
        #myButton{
            background-color: blue;
            color: #fff;
            padding: 10px;
            border-radius: 5px;
            outline: none;
            cursor: pointer;
        }
        #myText{
            font-size: 24px;
        }
    </style>
</head>
<body>
    <p id="myText">This is some text.</p>
    <button id="myButton">Change Text</button>

    <script type="text/javascript">
        var text = document.getElementById("myText");
        var button = document.getElementById("myButton");

        button.onclick = function(){
            text.innerText = "New Text";
            text.style.color = "red";
            text.style.fontSize = "32px";
        }
    </script>
</body>
</html>

在这个例子中，当用户点击按钮时，JavaScript会动态地更改页面中的文本内容和文本样式。

以上是《Javascript & DHTML DOM基础和基本API第4/5页》的完整攻略。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：Javascript & DHTML DOM基础和基本API第4/5页 - Python技术站