DOM は HTML とともに発明されましたか?-CSSチュートリアル-php.cn

Was DOM Invented with HTML?

はじめに

ドキュメントオブジェクトモデル (DOM) は、HTML および XML コンテンツの体系的な表現を提供するため、Web 開発の重要なコンポーネントです。しかし、HTML は DOM よりも前に開発されたのでしょうか?この記事では、DOM と HTML の歴史を探り、その始まり、成長、そして最終的な融合について考察します。重要なアイデアを強調するコードサンプルなど、両方の技術的な詳細について説明します。これらのテクノロジーの進歩を理解すると、それらが現代の Web にどのような影響を与え、Web 開発方法論に影響を与え続けているかが明らかになります。

HTML の誕生

HTML (ハイパーテキストマークアップ言語) は、1991 年に Tim Berners-Lee によって発明されました。Web 上で情報を公開し、ナビゲートする簡単な方法を作成するように設計されました。 HTML の最初のバージョンは比較的単純で、ドキュメントを構造化するための基本的なタグで構成されていました。

<!DOCTYPE html>
<html>
<head>
    <title>First HTML Document</title>
</head>
<body>
    <h1>Hello, World!</h1>
    <p>This is a paragraph.</p>
</body>
</html>

ログイン後にコピー

HTML の初期

HTML の初期バージョンには、今日見られる洗練された機能がありませんでした。これは主に、テキスト、リンク、単純なメディア要素を含む静的ページを作成するために使用されていました。ウェブが成長するにつれて、よりダイナミックでインタラクティブなコンテンツの必要性も高まりました。

ウェブは 1990 年代初頭、ほとんど機能を備えていない新しいメディアでした。初期の Web サイトはテキストベースであり、現在では標準と考えられているインタラクティブな機能がありませんでした。ウェブを利用する個人が増えるにつれ、より豊富な情報とユーザーエクスペリエンスの向上に対する要望が高まりました。

ティム・バーナーズ・リーのビジョン

ティム・バーナーズ・リーのウェブに対するビジョンの目標は、国際的な情報ハブを確立することでした。同氏は、ハイパーリンクを使用して論文を接続することで、ユーザーがある情報から別の情報に簡単に移動できる方法を提案しました。今日私たちが知っている World Wide Web と HTML は、この概念によって可能になりました。

Berners-Lee による HTML の最初の提案には、Web ドキュメントの構造を記述するために設計された 18 個の要素のセットが含まれていました。これらの要素により、見出し、段落、リスト、リンクの作成が可能になり、初期の Web ページの基礎が形成されました。

HTML の進化

ウェブが進化するにつれて、HTML も進化しました。 HTML の新しいバージョンは、Web 開発者とユーザーの増大する要求に対応するために開発されました。 1995 年にリリースされた HTML 2.0 は、最初の標準バージョンであり、将来の機能拡張のための基盤を提供しました。後続のバージョンでは、テーブル、フォーム、マルチメディアサポートなどの機能が導入されました。

<!DOCTYPE html>
<html>
<head>
    <title>HTML 2.0 Document</title>
</head>
<body>
    <h1>HTML 2.0 Features</h1>
    <p>This version introduced tables and forms.</p>
    <table>
        <tr>
            <th>Column 1</th>
            <th>Column 2</th>
        </tr>
        <tr>
            <td>Data 1</td>
            <td>Data 2</td>
        </tr>
    </table>
    <form action="/submit">
        <label for="name">Name:</label>
        <input type="text" id="name" name="name">
        <input type="submit" value="Submit">
    </form>
</body>
</html>

ログイン後にコピー

さらなるインタラクティブ性の必要性

インタラクティブなメディアとしてのウェブの可能性は、1990 年代半ばまでに明らかになり始めました。開発の目標は、ユーザーエクスペリエンスをよりダイナミックで魅力的なものにすることでした。 Web ページのクライアント側の変更を可能にする JavaScript のようなスクリプト言語の作成は、この対話の需要によって促進されました。

静的 HTML の限界が明らかになり、動的コンテンツの需要が高まりました。 JavaScript は、HTML 要素をリアルタイムで操作する方法を提供し、よりリッチでインタラクティブな Web アプリケーションへの道を開きました。

現代の Web 開発における HTML の役割

今日でも、HTML は Web 開発の基礎です。最新の HTML、特に HTML5 には、マルチメディア、グラフィックス、および複雑な Web アプリケーションをサポートする高度な機能が含まれています。レスポンシブでインタラクティブな Web サイトを作成するための堅牢な基盤を提供します。

<!DOCTYPE html>
<html>
<head>
    <title>HTML5 Example</title>
</head>
<body>
    <h1>HTML5 Features</h1>
    <video width="320" height="240" controls>
        <source src="movie.mp4" type="video/mp4">
        Your browser does not support the video tag.
    </video>
    <canvas id="myCanvas" width="200" height="100" style="border:1px solid #000000;"></canvas>
    <script>
        var canvas = document.getElementById('myCanvas');
        var context = canvas.getContext('2d');
        context.fillStyle = '#FF0000';
        context.fillRect(10, 10, 150, 75);
    </script>
</body>
</html>

ログイン後にコピー

HTML がその地味な始まりから現在の形に至るまでの進化は、Web が強力で多用途のプラットフォームに変わったことを反映しています。 HTML の継続的な開発により、HTML の関連性が維持され、最新の Web アプリケーションの要求を満たすことができるようになります。

DOM とは何ですか?

Web ドキュメントには、Document Object Model (DOM) と呼ばれるプログラミングインターフェイスが含まれています。プログラムは、ドキュメントをページの表現として使用することで、ドキュメントの構造、デザイン、コンテンツを変更できます。ドキュメントは DOM によってオブジェクトのツリーとして表示され、各オブジェクトはコンテンツの異なるセクションを示します。

DOM の構造

DOM は HTML または XML ドキュメントをツリー構造として表します。各ノードはドキュメントの一部を表すオブジェクトです。このツリー状の構造により、開発者はドキュメントの要素をプログラムで移動および操作できます。

<!DOCTYPE html>
<html>
<head>
    <title>DOM Example</title>
</head>
<body>
    <h1 id="heading">Hello, World!</h1>
    <p>This is a paragraph.</p>
    <button id="changeText">Change Text</button>
    <script>
        // Accessing an element in the DOM
        document.getElementById("changeText").addEventListener("click", function() {
            document.getElementById("heading").innerHTML = "Text Changed!";
        });
    </script>
</body>
</html>

ログイン後にコピー

上記の例では、DOM は HTML ドキュメントをオブジェクトのツリーとして表します。各要素 (

など)

と

タグ) は、DOM ツリー内のノードです。 JavaScript を使用すると、これらのノードと対話して、ドキュメントのコンテンツと構造を動的に変更できます。

DOM の仕組み

The DOM is a language-neutral interface, meaning it can be used with different programming languages, although it is most commonly used with JavaScript in web development. It allows scripts to update the content, structure, and style of a document while it is being viewed.

Here are some key operations that can be performed using the DOM:

Accessing Elements: You can access elements by their ID, class, tag name, or other attributes.

   var element = document.getElementById("myElement");

ログイン後にコピー

Modifying Elements: You can change the content, attributes, and style of elements.

   element.innerHTML = "New Content";
   element.style.color = "red";

ログイン後にコピー

Creating Elements: You can create new elements and add them to the document.

   var newElement = document.createElement("div");
   newElement.innerHTML = "Hello, DOM!";
   document.body.appendChild(newElement);

ログイン後にコピー

Removing Elements: You can remove elements from the document.

   var elementToRemove = document.getElementById("myElement");
   elementToRemove.parentNode.removeChild(elementToRemove);

ログイン後にコピー

Evolution of the DOM

The DOM has evolved through several levels, each adding new capabilities and addressing limitations of previous versions.

DOM Level 1 (1998): The initial specification that provided basic methods for document manipulation.

DOM Level 2 (2000): Introduced support for XML namespaces, enhanced event handling, and improved CSS support.

DOM Level 3 (2004): Added support for XPath, better document traversal, and improved error handling.

Modern DOM Features

Modern web development relies heavily on the DOM for creating dynamic and interactive web applications. Here are some examples of modern DOM features:

Event Handling: Adding event listeners to respond to user actions.

   document.getElementById("myButton").addEventListener("click", function() {
       alert("Button clicked!");
   });

ログイン後にコピー

Manipulating Attributes: Changing the attributes of elements.

   var img = document.getElementById("myImage");
   img.src = "new-image.jpg";

ログイン後にコピー

Working with Classes: Adding, removing, or toggling CSS classes.

   var element = document.getElementById("myElement");
   element.classList.add("newClass");

ログイン後にコピー

Traversing the DOM: Navigating through the DOM tree.

   var parent = document.getElementById("childElement").parentNode;
   var children = document.getElementById("parentElement").childNodes;

ログイン後にコピー

The Importance of the DOM

In order to build dynamic and interactive user experiences, modern web developers need to have access to the Document Object Model (DOM). It offers the basis for programmable online document manipulation, enabling real-time changes and interactions. The DOM keeps changing as web applications get more sophisticated, adding new features and functionalities to satisfy developers' needs.

Understanding the DOM and how to use it effectively is crucial for web developers. It allows them to create rich, interactive web applications that respond to user input and provide dynamic content, enhancing the overall user experience.

Standardization of the DOM

Diverse web browsers have incompatibilities because the Document Object Model (DOM) was not originally standardized. Due to these variations, early web developers had several difficulties while trying to construct web sites that functioned uniformly across all devices. Addressing these problems and guaranteeing a uniform method for manipulating online documents required the standardization of the DOM.

Early Implementations and Challenges

The two main scripting languages used to interact with HTML documents in the mid-1990s were Microsoft's JScript and Netscape's JavaScript. Compatibility problems resulted from the fact that every browser implemented a different version of the DOM. Cross-browser programming is difficult since different browsers have distinct ways of accessing and modifying document components, such as Internet Explorer and Netscape Navigator.

// Netscape Navigator
document.layers["myLayer"].document.open();
document.layers["myLayer"].document.write("Hello, Navigator!");
document.layers["myLayer"].document.close();

// Internet Explorer
document.all["myLayer"].innerHTML = "Hello, Explorer!";

ログイン後にコピー

The lack of a standardized model meant that developers had to write different code for different browsers, increasing development time and complexity. This fragmentation hindered the growth of the web as a platform for rich, interactive content.

The Role of the World Wide Web Consortium (W3C)

Acknowledging the necessity for uniformity, the World Wide Web Consortium (W3C) assumed the initiative in creating a common Document Object Model. To secure the web's continuous expansion, a global community known as the W3C creates open standards. DOM Level 1, the first standardized version of the DOM, was published by the W3C in 1998.

DOM Level 1 (1998)

DOM Level 1 provided a basic set of interfaces for manipulating document structures and content. It defined a standard way for scripts to access and update the content, structure, and style of HTML and XML documents. This standardization was a significant milestone, allowing developers to write code that worked consistently across different browsers.

// Standardized DOM Level 1 code
var element = document.getElementById("myElement");
element.innerHTML = "Hello, DOM!";

ログイン後にコピー

DOM Level 1 focused on providing a core set of features, including:

Document Navigation: Methods to traverse the document tree.

Element Manipulation: Methods to access and modify elements.

Event Handling: Basic support for handling events.

DOM Level 2 (2000)

DOM Level 2 expanded on the capabilities of DOM Level 1, introducing several new features:

XML Namespaces: Support for XML namespaces to handle documents with multiple XML vocabularies.

Enhanced Event Handling: Improved event model with support for event capturing and bubbling.

CSS Manipulation: Methods to access and manipulate CSS styles.

// Adding an event listener in DOM Level 2
document.getElementById("myButton").addEventListener("click", function() {
    alert("Button clicked!");
});

ログイン後にコピー

DOM Level 3 (2004)

DOM Level 3 further enhanced the DOM by introducing new features and improving existing ones:

XPath Support: Methods to query documents using XPath expressions.

Document Traversal and Range: Interfaces for more sophisticated document navigation and manipulation.

Improved Error Handling: Enhanced mechanisms for handling errors and exceptions.

// Using XPath in DOM Level 3
var xpathResult = document.evaluate("//h1", document, null, XPathResult.ANY_TYPE, null);
var heading = xpathResult.iterateNext();
alert(heading.textContent);

ログイン後にコピー

Impact of Standardization

The standardization of the DOM by the W3C had a profound impact on web development:

Consistency: Developers could write code that worked across different browsers, reducing the need for browser-specific code.

Interoperability: Standardized methods and interfaces ensured that web pages behaved consistently, regardless of the user's browser.

Innovation: Standardization provided a stable foundation for further innovation in web technologies, enabling the development of advanced web applications.

Modern DOM Standards

The DOM continues to evolve, with modern standards building on the foundations laid by earlier versions. HTML5, for example, introduced new APIs and features that rely on the DOM, such as the Canvas API, Web Storage, and Web Workers.

// Using the HTML5 Canvas API with the DOM
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
context.fillStyle = "#FF0000";
context.fillRect(0, 0, 150, 75);

ログイン後にコピー

The standardization of the DOM was a critical step in the evolution of the web, providing a consistent and reliable way for developers to interact with web documents. The work of the W3C in developing and maintaining these standards has ensured that the web remains a powerful and versatile platform for creating dynamic and interactive content. As the DOM continues to evolve, it will continue to play a central role in the development of the web.

HTML and DOM: Intertwined Evolution

While HTML and the Document Object Model (DOM) were developed separately, their evolution became increasingly intertwined as the web matured. The need for dynamic, interactive content led to enhancements in HTML, and these improvements, in turn, relied on the DOM for interaction with web pages. This section explores how HTML and the DOM evolved together, highlighting key milestones and their impact on web development.

The Early Web: Static HTML and Limited Interactivity

Static web pages were the main use of HTML in the early days of the internet. There was very little to no interaction on these sites; they were just text, graphics, and links. Documents featuring components like headers, paragraphs, lists, and links might be organized using HTML.

<!DOCTYPE html>
<html>
<head>
    <title>Early Web Page</title>
</head>
<body>
    <h1>Welcome to the Early Web</h1>
    <p>This is a simple, static web page.</p>
    <a href="https://www.example.com">Visit Example</a>
</body>
</html>

ログイン後にコピー

However, as the web grew in popularity, there was a growing demand for more dynamic and interactive content. This demand led to the development of scripting languages like JavaScript, which enabled developers to manipulate HTML documents programmatically.

The Advent of JavaScript and Dynamic HTML

JavaScript, introduced by Netscape in 1995, revolutionized web development by allowing scripts to interact with the HTML document. This interaction was made possible through the DOM, which provided a structured representation of the document.

<!DOCTYPE html>
<html>
<head>
    <title>Dynamic HTML Example</title>
</head>
<body>
    <h1 id="heading">Hello, World!</h1>
    <button onclick="changeText()">Change Text</button>

    <script>
        function changeText() {
            document.getElementById("heading").innerHTML = "Text Changed!";
        }
    </script>
</body>
</html>

ログイン後にコピー

In this example, JavaScript uses the DOM to change the content of the

element when the button is clicked. This capability marked the beginning of Dynamic HTML (DHTML), allowing for more interactive and engaging web pages.

The Evolution of HTML: Introducing New Elements and APIs

As web developers began to explore the possibilities of dynamic content, HTML continued to evolve. New versions of HTML introduced elements and attributes that enhanced the ability to create interactive web pages.

HTML 4.0 (1997): Introduced features like inline frames (), enhanced form controls, and support for scripting languages.

HTML 5 (2014): Brought significant advancements, including new semantic elements, multimedia support, and APIs for offline storage, graphics, and real-time communication.

<!DOCTYPE html>
<html>
<head>
    <title>HTML5 Example</title>
</head>
<body>
    <header>
        <h1>HTML5 Enhancements</h1>
    </header>
    <section>
        <video width="320" height="240" controls>
            <source src="movie.mp4" type="video/mp4">
            Your browser does not support the video tag.
        </video>
    </section>
    <canvas id="myCanvas" width="200" height="100" style="border:1px solid #000000;"></canvas>

    <script>
        var canvas = document.getElementById('myCanvas');
        var context = canvas.getContext('2d');
        context.fillStyle = '#FF0000';
        context.fillRect(10, 10, 150, 75);
    </script>
</body>
</html>

ログイン後にコピー

Modern Web Development: HTML5, CSS3, and JavaScript

Today, the core technologies of web development are HTML, CSS, and JavaScript. JavaScript allows for interactivity, whereas HTML supplies the structure and CSS manages the display. These technologies are held together and enable smooth operation together by the DOM.

HTML5 and New APIs

HTML5 introduced several new APIs that rely heavily on the DOM, enabling developers to create richer and more interactive web applications:

Canvas API: For drawing graphics and animations.

Web Storage API: For storing data locally within the user's browser.

Geolocation API: For retrieving the geographical location of the user.

// Using the Geolocation API with the DOM
if (navigator.geolocation) {
    navigator.geolocation.getCurrentPosition(function(position) {
        document.getElementById("location").innerHTML =
            "Latitude: " + position.coords.latitude + "<br>" +
            "Longitude: " + position.coords.longitude;
    });
}

ログイン後にコピー

CSS3 and Advanced Styling

CSS3 introduced new features and capabilities for styling web pages, including animations, transitions, and transformations. These enhancements allow developers to create visually appealing and interactive user interfaces that work in tandem with the DOM.

/* CSS3 Transition Example */
#box {
    width: 100px;
    height: 100px;
    background-color: blue;
    transition: width 2s;
}

#box:hover {
    width: 200px;
}

ログイン後にコピー

The Role of Frameworks and Libraries

Modern web development often involves the use of frameworks and libraries that abstract away many of the complexities of working with the DOM directly. Frameworks like React, Angular, and Vue.js provide powerful tools for building complex web applications, while still relying on the underlying DOM.

// React component example
class MyComponent extends React.Component {
    constructor(props) {
        super(props);
        this.state = { text: "Hello, World!" };
    }

    changeText = () => {
        this.setState({ text: "Text Changed!" });
    }

    render() {
        return (
            <div>
                <h1>{this.state.text}</h1>
                <button onClick={this.changeText}>Change Text</button>
            </div>
        );
    }
}

ReactDOM.render(<MyComponent />, document.getElementById('root'));

ログイン後にコピー

Conclusion

The desire for increasingly dynamic and interactive web content has fueled the advancement of both HTML and the DOM. Together, HTML and the DOM have developed to satisfy the needs of both users and developers, from the static pages of the early web to the rich, dynamic apps of today. The evolution of the modern web will continue to revolve around the interaction between HTML and the DOM as web technologies progress.

References

W3C DOM Specifications

History of HTML

Tim Berners-Lee's Original Proposal for HTML

JavaScript and Early Browser Wars

HTML5 and Web APIs

CSS3 Transitions and Animations

以上がDOM は HTML とともに発明されましたか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。