当前位置：文江博客话题详情

客户端：HTML、DOM 和 CSS？

发布于 2024-10-14 17:38:03 字数 256 浏览 5 评论 0原文

我没有广泛研究应用程序的客户端/前端，我正在尝试阅读有关 HTML、CSS 和 DOM 的内容，但不知何故无法找出之间的区别如果有人能够：

用简单的英语向我解释 HTML、CSS 和 DOM 是如何工作的？
从客户端技术的角度来看，它们如何相互关联？

更新我已经阅读了 wikipedia 文章，但无法清楚地理解 DOM 的工作原理。

谢谢。

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

醉态萌生 2024-10-21 17:38:03

什么是 DOM？

假设您打开一个网络浏览器（例如 Chrome）并在其中加载一个网页（例如 stackoverflow.com）。现在，在浏览器内部，有一个 window 对象。该对象代表浏览器窗口。

这个window对象有几十个属性（成员），其中最重要的是document对象。 document 对象表示当前加载到浏览器窗口中的网页。

此 document 对象是 DOM 树的根：

_{（来源：w3schools.com）}

上面的每个框picture 是 DOM 树中的一个节点。节点是一个与 DOM 树中的其他对象“连接”的对象。

绑定到网页的 JavaScript 程序可以完全访问 DOM 树的每个节点。他们可以删除节点、添加新节点或仅操纵节点的属性。

综上所述，浏览器内部存在数百个对象。所有这些对象（以某种方式）都是相互连接的，这种相互连接的对象的巨大结构就是 DOM。

回复收藏 0 原文

清晰传感 2024-10-21 17:38:03

HTML 是您网站上的内容（标题、列表、表格）

CSS 是这些内容的外观（边框、颜色、字体大小）

DOM 是您通过 javascript 访问这些内容的方式（获取节点、添加新元素、更改其样式）

这是 3 者一起工作的示例（似乎在 ie 中不起作用）
http://jsfiddle.net/gj9zT/

回复收藏 0 原文

二智少女 2024-10-21 17:38:03

HTML 描述了文档的结构。浏览器解析 HTML 并从中构造文档元素的内部表示，例如：

document
   |
   |-body
       |
       |-div
       |   |
       |   |-p
       |     |
       |     |-"some text"
       |-div
           |
           |-...

这个内部表示就是 DOM，即文档对象模型。这是创建网站实际视觉表示的基础。

CSS 用于定义这种视觉表示的精确外观。

DOM 的一部分也通过 API 公开，因此您可以使用 Javascript 等编程语言来操作 DOM（即文档）。

HTML describes the structure of a document. The browser parses HTML and constructs an internal representation of the elements of the document from it, like:

document
   |
   |-body
       |
       |-div
       |   |
       |   |-p
       |     |
       |     |-"some text"
       |-div
           |
           |-...

This internal representation is the DOM, the Document Object Model. This is the basis for creating the actual visual representation of the website.

CSS is used to define how this visual representation looks exactly.

Parts of the DOM are also exposed through an API, so you can manipulate the DOM (i.e. the document) using a programming language like Javascript.

回复收藏 0 原文

简美 2024-10-21 17:38:03

看看

回复收藏 0 原文

且行且努力 2024-10-21 17:38:03

这是一个很长的解释，但我会尝试简短地解释

CSS： 这些用于将属性应用于 html 元素。如果您想将通用颜色应用于各种 html 元素，我们可以在 css 中执行此操作，并将该类应用于 html 元素。我们可以通过CSS避免重复代码。
我们可以用CSS实现很多其他的事情。在 google 中阅读

HTML: HTML 只不过是我们用来显示诸如 table 、 divs 、 p 、 ul 、 li 等元素的各种标签

DOM: DOM 只不过是html元素之间的关系，我们通常使用javascript来操作DOM，比如改变高度，从一个地方移动到另一个地方......

google上会有很多链接，你可以更好的解释。

回复收藏 0 原文

删除会话 2024-10-21 17:38:03

HTML（超文本标记语言）是我们用来描述页面结构的标记。它定义了不同的结构，例如

有序列表 或 Tables > 等等...

HTML 是我们开始的代码，它是人类可读的（无论如何它应该是：p）并且易于压缩&可转让。

DOM（文档对象模型）是计算机用来组织从 HTML 呈现的页面的框架。当您的计算机分解您的 HTML 文档时，它会将其组织成一个对象模型，它可以更轻松地使用它（您也可以，在 javascript/css/等中...... .)。

CSS（层叠样式表）描述了您希望文档中的项目如何显示。它们被称为级联样式表，因为它们“级联”到下一个样式表以填补漏洞或覆盖样式。 CSS 描述了 DOM 中对象的视觉质量。

回复收藏 0 原文

紫瑟鸿黎 2024-10-21 17:38:03

HTML 实际上是 DOM（文档对象模型）的标记。文档的根是，其中包含许多级别的

s、

aragraphs、< code>

标题等。

DOM 是 html 标记的树（图形结构）。它会有一个‘根’，它有很多‘孩子’，孩子们会有‘兄弟姐妹’和‘父母’、‘子孙’和‘祖先’。根没有父节点，并且是所有后代节点的祖先。例如，典型的 html 文档的结构如下：

<!DOCTYPE html>
<html>
  <head>
    <title>Banner Example</title>
    <style type="text/css">
      #header {
        background-image: url('branding_logo.jpg');
      }

      h1 a {
        display: block;
        height: 120px;
        width: 500px;
        text-indent: -9999; /* to hide the text that would show */
                            /* over the banner */
        border: 1px solid black;
      }
    </style>
  </head>
  <body>
    <div id='header'>
      <h1><a href="/">This is a header link.</a></h1>
      <p>Here is some text.</p><p>Here is some more text.</p>
    </div>
    <div id="content">
      <p>here is a bunch of content.</p>
    </div>
  </body>
</html>

在这种情况下，html 是根节点，它有两个子节点：head 和 body。头和身体是兄弟姐妹。您可以将 DOM 模型与选择器结合使用，以选择哪些对象（包含在节点中）将受到 CSS 等代码的影响。

CSS 将采用选择器并按照您在其属性块中指定的方式设置它们的样式。您可以选择所有元素

，使用

p { color: red; }

或者您可以仅选择 'p'，它是 id 为 content 的 div 的后代>：

div#content { 颜色：黑色； }

通常会使用可应用于标签的最具体的 DOM 描述来设计标签的样式。因此，在上面的 html 示例中，第一个 css 样式将应用于所有 p，然后第二个更具体的样式将仅应用于内容 div 中的那个 p。

本质上，您的浏览器会将您的 HTML 代码解析为允许单独选择的部分。解析后的结构就是您的 DOM。 CSS 使用 DOM 来应用样式。 jQuery 也做同样的事情，允许您从 DOM 中选择特定节点，并在客户端动态地将样式或操作应用到该节点。

HTML is effectively the markup of your DOM (Document Object Model). The root of the document is <html>, which contains many levels of <div>s, <p>aragraphs, <h1>eaders and so on.

The DOM is the tree (graphical structure) of your html markup. It will have a 'root', which has many 'children', the children will have 'siblings' and 'parents', 'descendants' and 'ancestors'. The root doesn't have a parent, and is an ancestor of all the descendant nodes. for instance, your typical html document will be structured like this:

<!DOCTYPE html>
<html>
  <head>
    <title>Banner Example</title>
    <style type="text/css">
      #header {
        background-image: url('branding_logo.jpg');
      }

      h1 a {
        display: block;
        height: 120px;
        width: 500px;
        text-indent: -9999; /* to hide the text that would show */
                            /* over the banner */
        border: 1px solid black;
      }
    </style>
  </head>
  <body>
    <div id='header'>
      <h1><a href="/">This is a header link.</a></h1>
      <p>Here is some text.</p><p>Here is some more text.</p>
    </div>
    <div id="content">
      <p>here is a bunch of content.</p>
    </div>
  </body>
</html>

In this case, html is the root node, which has two children: head and body. Head and body are siblings. You can use the DOM model with selectors in order to select which objects (contained in a node) will be affected by code such as CSS.

CSS will take selectors and style them as you specify in its attribute block. You could select all elements <p>, using

p { color: red; }

Or you could select only 'p' where it's a descendant of a div whose id is content:

div#content { color: black; }

CSS will typically style a tag using the most specific DOM description that can be applied to it. So, in my above html example, the first css style will apply to all p, and then the second, more specific styling will be applied to only that one p in the content div.

Essentially, what happens is your browser will parse your HTML code into sections that allow them to be selected individually. That parsed structure is your DOM. CSS uses the DOM to apply styles. jQuery does the same, allowing you to select a specific node from the DOM and apply styles or actions to that node dynamically on the client side.

回复收藏 0 原文

~没有更多了~