DOM的一个想法

让我们从下面的HTML开始学习吧:

<html>
  <head>
    <title>The title</title>
  </head>
  <body>
    The body
  </body>
</html>

DOM看起来如下：


最顶层只有__html__节点，有两个子节点：head 和 body，其中__head__有子标签__title__。
HTML标签为DOM树中的元素节点，一些文本可以成为文本节点。它们俩都是节点，仅仅类型不一样。

// 修改<BODY>元素背景为红色
document.body.style.backgroundColor = 'red';

如果你运行了上面的代码，并且想恢复到默认风格：

document.body.style.backgroundColor = '';

我们还可以更改节点内容，检索节点，创建新的元素并把它们添加到文档中。
但我们需要先知道DOM的结构和DOM有哪些内容。

另一个文档

让我们看一个更加复杂的DOM文档

<!DOCTYPE HTML>
<html>
    <head>
        <title>The document</title>
    </head>
    <body>
        <div>Data</div>
        <ul>
            <li>Warning</li>
            <li></li>
        </ul>
        <div>Top Secret!</div>
    </body>
</html>

下面为我们展开后的文档树

使用开发工具查看DOM

我们可以很方便的使用浏览器开发工具查看DOM树。例如

  1. 打开DOM树2
  2. 打开FireBug, Chrome & IE或其他浏览器的开发工具

  3. 在FireBug或浏览器开发工具中定位到__HTML标签。
    下图为从Chrome开发者工具中的截图，通常它和HTML标签布局一样。

    *在开发者工具中显示的DOM树不是完整的。__有一些元素是在DOM树中存在但开发者工具中不显示出来。

    空白节点

    现在让我们用图片来近距离介绍空白节点吧。空白符在HTML中被标识为文本并且是文本节点。这些文本节点不会显示在开发者工具当中，但它们确确实实存在的。

    顺便说一下，注意到__li__节点没有任何__空白节点__。那是因为它不含任何节点。
    __空白节点__生成于两个节点之间。因此当我们消除标签间的空间时它也会消失。
    下面的代码不会生成空白节点。

    <!DOCTYPE HTML><html><head><title>Title</title></head><body></body></html>

    其他的节点类型

    DOCTYPE

    你留意到上面例子中的__DOCTYPE__吗？他没有在图片中显示出来，但它也是一个__DOM节点__，存在于__HTML__的最上头。
    __DOCTYPE__是__HTML__规格中的一部分，它还会指导Web浏览器当前页面中的文本标记的版本信息。

    注释

    注释也是一种节点：

    <html>
...
<!-- comment -->
...
</html>

    上面的注释也会保存到DOM树中，它由节点类型为__注释__，文本类型的内容组成。

    总结

    现在你已经了解了DOM的结构，它的布局，包含哪些节点。
    下一章节我们将讲解如何在JavaScript中遍历DOM。
    原文链接

DOM节点的更多相关文章

  1. 深入理解DOM节点操作

    × 目录 [1]创建节点 [2]插入节点 [3]移除节点[4]替换节点[5]复制节点 前面的话 一般地,提起操作会想到“增删改查”这四个字,而DOM节点操作也类似地对应于此,接下来将详细介绍DOM的节 ...

  2. 深入理解DOM节点关系

    × 目录 [1]父级属性 [2]子级属性 [3]同级属性[4]包含方法[5]关系方法 前面的话 DOM可以将任何HTML描绘成一个由多层节点构成的结构.节点分为12种不同类型,每种类型分别表示文档中不 ...

  3. 深入理解DOM节点类型第五篇——元素节点Element

    × 目录 [1]特征 [2]子节点 [3]特性操作[4]attributes 前面的话 元素节点Element非常常用,是DOM文档树的主要节点:元素节点是html标签元素的DOM化结果.元素节点主要 ...

  4. 深入理解DOM节点类型第六篇——特性节点Attribute

    × 目录 [1]特征 [2]属性 [3]方法 前面的话 元素的特性在DOM中以Attr类型表示,从技术角度讲,特性是存在于元素的attributes属性中的节点.尽管特性是节点,但却不是DOM节点树的 ...

  5. 深入理解DOM节点类型第四篇——文档片段节点DocumentFragment

    × 目录 [1]特征 [2]作用 前面的话 在所有节点类型中,只有文档片段节点DocumentFragment在文档中没有对应的标记.DOM规定文档片段(document fragment)是一种“轻 ...

  6. 深入理解DOM节点类型第一篇——12种DOM节点类型概述

    × 目录 [1]元素 [2]特性 [3]文本[4]CDATA[5]实体引用[6]实体名称[7]处理指令[8]注释[9]文档[10]文档类型[11]文档片段[12]DTD 前面的话 DOM是javasc ...

  7. DOM 节点的克隆与删除

    无奈的开头 关于DOM节点操作,如果仅仅是根据标准API来操作,那是最简单不过的了.但是现实中却哪有这么容易的问题让我们解决,其实不仅仅是节点的克隆与删除,节点的添加也是如此,而且添加节点需要考虑的情 ...

  8. DOM节点属性

    节点属性 在文档对象模型 (DOM) 中,每个节点都是一个对象.DOM 节点有三个重要的属性 : 1. nodeName : 节点的名称 2. nodeValue :节点的值 3. nodeType ...

  9. 第6章 DOM节点操作

    一．创建节点 为了使页面更加智能化,有时我们想动态的在 html 结构页面添加一个元素标签,那么 在插入之前首先要做的动作就是:创建节点. varbox=$('<div id="box ...

  10. dom节点的操作

    dom节点的操作 -- jQuery 内部插入 1.(结尾)append 方法 . appendto方法(为了方便链式操作) (开头)prepend方法           $('#div1').ap ...

随机推荐

  1. Learn ZYNQ(10) – zybo cluster word count

    1.配置环境说明 spark:5台zybo板,192.168.1.1master,其它4台为slave hadoop:192.168.1.1(外接SanDisk ) 2.单节点hadoop测试: 如果 ...

  2. Neil·Zou 语录三

    1 人的大脑,假设100分成熟.那么每个人大脑达到100分的时间点不同.有些人因为外界因素在读书时就达到了,而有些人到工作后才达到.但很可惜,很多国人进入社会后就不学习了.所以说,工作后保持激情.好奇 ...

  3. Linux分区方案 (转)

    以下是我的centOS6.2系统分区方案,做个记录,方便后续的参考. 根分区: >= 3G /boot (启动分区): 100M即可. /swap : 网上说是物理内存的两倍,实际随便你,看自己 ...

  4. 【php】命名空间 和 自动加载的关系

    目的 本文的目的主要是说明 命名空间的 use 关键词 和 new ClassName 这两个步骤,哪个步骤才会执行自动加载,这是逻辑有点混乱的表现,这种想法也是很正常的,让我们来解密吧 命名空间(n ...

  5. bugs

    2016-09-04 10:24:14.503 Scgl[1035:341694] You've implemented -[<UIApplicationDelegate> applica ...

  6. Python之路----------random模块

    随机数模块: import random #随机小数 print(random.random()) #随机整数 print(random.randint(1,5))#他会打印5 #随机整数 print ...

  7. 使用MapReduce实现join操作

     在关系型数据库中,要实现join操作是非常方便的,通过sql定义的join原语就可以实现.在hdfs存储的海量数据中,要实现join操作,可以通过HiveQL很方便地实现.不过HiveQL也是转化成 ...

  8. js数字位数太大导致参数精度丢失问题

    最近遇到个比较奇怪的问题,js函数里传参,传一个位数比较大,打印arguments可以看到传过来的参数已经改变. 然后查了一下,发现确实是js精度丢失造成的.我的解决方法是将数字型改成字符型传输,这样 ...

  9. 基于C#和Asp.NET MVC开发GPS部标监控平台

    基于交通部796标准开发部标监控平台,选择开发语言和技术也是团队要思考的因素,其实这由团队自己擅长的技术来决定,如果擅长C#和Asp.NET, 当然开发效率就高很多.当然了技术选型一定要选用当前主流的 ...

  10. c语言第12次作业

    #include<stdio.h> struct student { ]; ]; ]; double grade; }; void main() { ]; ;i<;i++) { pr ...