客户端：HTML、DOM 和 CSS？答案

【问题标题】：Client Side: HTML, DOM and CSS?客户端：HTML、DOM 和 CSS？
【发布时间】：2011-01-26 01:01:14
【问题描述】：

我没有在应用程序的Client Side/Front End 上进行广泛的工作，我正在尝试阅读有关HTML, CSS and DOM 的信息，但不知何故无法弄清楚它们之间的区别，因此如果有人可以，我将不胜感激：

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

更新我浏览了wikipedia 的文章，但无法清楚地理解 DOM 的工作原理。

谢谢。

【问题讨论】：

只需阅读有关 HTML、CSS 和 DOM 的维基百科文章。你显然不会在 5 分钟内弄明白，但如果你不关心阅读那些文章（或不理解它们），那么前端开发不适合你。
@Sime：感谢您的 cmets，但我浏览了 wiki 文章，但我还不清楚 DOM。
DOM 只不过是元素之间的关系，就像我们操作它们的方式一样，比如移动元素、在运行时更改颜色等......
+1 用于维基百科评论。如果您想成为前端开发人员，您需要能够在网络上搜索信息。
我写我的答案是为了解决你对 DOM 的不理解。我希望你现在得到它:)

标签： html css dom client frontend

【解决方案1】：

什么是 DOM？

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

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

这个document 对象是DOM 树的根：

_{（来源：w3schools.com）}

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

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

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

【讨论】：

Sime：感谢DOM 的解释，现在我可以更好地理解DOM 了。

【解决方案2】：

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

CSS 就是这些东西的样子（边框、颜色、字体大小）

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

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

【讨论】：

【解决方案3】：

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

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

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

CSS 用于定义此视觉表示的外观。

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

【讨论】：

【解决方案4】：

看看

【讨论】：

【解决方案5】：

解释很长，但我会尽量简短地解释

CSS： 这些用于将属性应用于 html 元素。如果您想为各种 html 元素应用一种通用颜色，我们可以在 css 中完成，并将该类应用到 html 元素。我们可以避免使用 css 重复代码。我们可以用 css 实现许多其他的东西。在谷歌阅读

HTML： HTML 只不过是我们用来显示表格、div、p、ul、li 等元素的各种标签

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

google会有很多链接，大家可以更好的解释一下。

【讨论】：

【解决方案6】：

HTML（超文本标记语言）是我们用来描述页面结构的标记。它定义了不同的结构，例如 <ol></ol> Ordered List 或 <table> Tables 等...

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

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

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

【讨论】：

【解决方案7】：

HTML 实际上是 DOM（文档对象模型）的标记。文档的根是<html>，其中包含<div>s、<p>aragraphs、<h1>eaders等多个层次。

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>

p { color: red; }

或者您可以只选择 'p'，它是 div 的后代，其 id 是 content：

div#content { 颜色：黑色； }

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

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

【讨论】：