嗯，工作也有一段时间了，对编程的认识也深入了一些，以前认为HTML/CSS/JAVASCRIPT是比较简单的，看网上的教程就可以了，W3C是我学习这些知识常去的一个网站，非常感谢她让我学习到了更多的一些关于前端的知识，不过现在我不这样看了，前端工程师们最主要的就是通过这些来工作的（当然考虑的问题肯定是更多更广更深入了，架构问题、兼容性问题、性能问题、还有各种插件、JS库以及前端的各种工具等等），这些内容是非常丰富的，我也是挺感兴趣的并且觉得这样更为专业！至少让我觉得比天天，修改BUG、为客户修改数据、写一些文档、测试、发布、来回的几个项目间切换要好玩一些！以前写博客总想写一些他人从来没有写过的、自己亲身经历的、对他人和自己而言又是有一些价值的东西！现在我觉得自己的学习心得体会也是要记录下来的，毕竟即使简单的知识，如果不常常的使用也会随着时光的流逝而渐渐模糊的，记录下来、即使是按照自己的理解整理一下也能加深自己对知识的理解的！我不是天才，脑袋里没有公式、没有代码、没有对待世界特别的一种理解方式，那我就选择脚踏实地的一步一个脚印的走！

1：HTML DOM 是什么？

先来看一下一个简单的HTML文档的结构

<!DOCTYPE html>

<html lang="en">

    <head>

        <link rel=stylesheet href="">

        <meta charset="UTF-8">

        <title>文档标题</title>

    </head>

    <body>

        <div>文本内容</div>

        <div>

             <div></div>

        </div>

        <table></table>

    </body>

</html>

如果我们将此文档整个的顺时针旋转90度就会看到如下的样子

HTML DOM 的英文全称是：Hyper Text Markup Language Document Object Model 翻译成中文是，超文本标记语言的文档对象模型。我的理解是将HTML文档换一种视角来看待的方式，看成是一棵倒挂的DOM树，对HTML文档的操作可以看成是对DOM树的操作，HTML文档中的一切都映射在这一棵DOM树上！

W3C的解释是：DOM是W3C的标准，DOM定义了访问HTML和XML文档的标准（W3C DOM 是中立于平台和语言的接口，它允许程序和脚本动态地访问和更新文档的内容、结构和样式。）W3C标准被分成3个不同的部分：

1）核心DOM——针对任何结构化文档的标准模型

2）XML DOM——针对XML文档的标准模型

3）HTML DOM——针对HTML文档的模型

我们这里仅关心HTML DOM，官方的描述他是：

1）HTML 的标准对象模型

2）HTML的标准编程接口

3）W3C标准

HTML DOM 定义了所有的HTML元素的对象和属性，以及访问他们的方法。简单点讲，HTML DOM 是关于如何获取、修改、添加或者删除HTML元素的标准。也就是换一种方式操作HTML文档的方法，主要的就是加上的JAVASCRIPT这门脚本语言的参与，对HTML文档进行操作！

2：HTML DOM 的作用是什么？

嗯，最主要的就是增强了网站的动态交互性，因为可以使用JAVASCRIPT或者服务器端的脚本来控制HTML文档了！

3：HTML DOM 的内容关键点是什么？

我觉得将HTML文档换成DOM树的这种视角来看待后，在对DOM树来操作，无论是修改、添加、删除、或者是改变节点的结构或者是样式，第一步总是要先获得一个节点的，就像对数据库里的数据进行操作一样增删改查，查的地位是相当重要的！所以，我门对待查询的方法和属性是要特别用心来学习的！

4：HTML DOM 的基本内容？

学习HTML DOM之前是需要了解HTML/CSS/JAVASCRIPT的，就像下图所表达的一样，只有这四者的配合才能更加灵活多变丰富多彩的展现出更加好玩的网页！

当然，使用DOM树的方式来表达HTML文档，也必须有自己的一套控制的方式方法的，我们要全面的转换视角。我们需要学习一些获取DOM树中节点的方法、修改节点的方法、添加节点的方法、删除节点的方法；改变节点的样式、结构等等，需要学习一些各种类型的节点以及节点的属性相关的内容，和HTML联系起来，我们需要知道某个节点是什么标签、他的属性、他的事件、他与其他节点的联系等等的内容，你能想到的更加合理和控制DOM树的方式、方法、属性、事件等等HTML DOM 都为我们想到了，这些就是我们需要学习的内容啦！

嗯，此篇的目标是让我对HTML DOM有一个比较清晰的认识，让我知道她是什么、有什么用、有哪些内容，然后我载慢慢的将它的内容补充上来！感谢W3C!

HTML DOM（学习笔记一）的更多相关文章

  1. Dom学习笔记

    今天老师出了一道面试题目:取到表单里面的textbox的值,两种方法.知道一种,老师说的什么dom,我竟然不知道. 以前学html的时候,老师也重来没有提到dom的概念.javaScript只是学了一 ...

  2. JS DOM学习笔记

    1.window对象代表当前浏览器窗口 2.使用window对象的属性.方法的时候可以省略window.例如:window.alert("hello")一般写成alert(&quo ...

  3. Dom学习笔记-（一）

    一.概述 DOM(文档对象模型)是针对HTML和XML文档的一个API,其脱胎于DHTML. DOM可以将任意HTML和XML文档描绘成一个由多层节点构成的结构. 每一个文档包含一个根节点-文档节点, ...

  4. BOM、DOM学习笔记——JavaScript

    1.BOM的概述    browser object modal :浏览器对象模型.    浏览器对象:window对象.    Window 对象会在 <body> 或 <fram ...

  5. DOM学习笔记--入门1

    HTML DOM 是关于如何获取.修改.添加或删除 HTML 元素的标准. 首先节点有很多种,不仅仅HTML元素是节点,尤其 要注意文本节点的存在. 根据 W3C 的 HTML DOM 标准,HTML ...

  6. HTML DOM 学习笔记

    一.HTML DOM定义了所有HTML元素的对象和属性,以及访问他们的方法即:HTML DOM是关于如何获取,修改,添加,删除HTML元素的标准二.DOM节点1.分类整个文档是一个文档节点每个HTML ...

  7. DOM学习笔记（三）DOM元素的访问、修改与事件

    访问 HTML 元素等同于访问节点,使用的是document对象下的数个getElement方法,然后再对返回的元素(或元素列表)进行具体内容的访问和修改,或者响应对应的事件是操作 一些 DOM 对象 ...

  8. DOM学习笔记（二）对象方法与属性

    所有 HTML 元素被定义为对象,而编程接口(对象的访问)则是对象方法和对象属性. 事实上,常用的只用window对象及其子对象document对象,以及事件Event对象. Window 对象 Wi ...

  9. DOM学习笔记（一）DOM树

    DOM 定义了访问和操作 HTML 文档的标准方法. HTML 文档中的所有内容都是节点,将 HTML 文档表达为树结构,称为节点树 HTML DOM 树 HTML DOM 是关于如何获取.修改.添加 ...

  10. DOM学习笔记（思维导图）

    导图

随机推荐

  1. Node.js 相关资料网站汇总

    地址:https://cnodejs.org/ nodejs中文网:http://nodejs.cn/ nodejs中文网:http://www.nodejs.net/ 相关API地址:http:// ...

  2. 浅析:setsockopt()改善socket网络程序的健壮性

    1. 如果在已经处于 ESTABLISHED状态下的socket(一般由端口号和标志符区分)调用closesocket(一般不会立即关闭而经历TIME_WAIT的过程)后想继续重用该socket:BO ...

  3. 《黄聪:手机移动站SEO优化教程》1、为什么要做手机移动端网站

    视频地址:http://v.youku.com/v_show/id_XNzE2Mzk3MjI4.html

  4. (C#) Action, Func, Predicate 等泛型委托

    (转载网络文章) (1). delegate delegate我们常用到的一种声明   Delegate至少0个参数,至多32个参数,可以无返回值,也可以指定返回值类型.   例:public del ...

  5. mysql事件

    文章参考自http://blog.163.com/duanpeng3@126/blog/static/8854373520105182123112/在使用这个功能之前必须确保event_schedul ...

  6. Accounting_权责发生制和收付实现值的区别（概念）

    2014-07-11 BaoXinjian

  7. HDU 2188 悼念512汶川大地震遇难同胞――选拔志愿者(巴什博奕)

    选拔志愿者 题意: 对于四川同胞遭受的灾难,全国人民纷纷伸出援助之手,几乎每个省市都派出了大量的救援人员,这其中包括抢险救灾的武警部队,治疗和防疫的医护人员,以及进行心理疏导的心理学专家.根据要求,我 ...

  8. DB2 SQL性能调优秘笈

    SQL优化技巧 1.去除在谓词列上编写的任何标量函数 2.去除在谓词列上编写的任何数学运算 3.SQL语句的Select部分只写必要的列 4.尽可能不用Distinct 5.尽量将In子查询重写为Ex ...

  9. mysql给日期增减

    有个需求就是判断过期的供求信息,如果用户刷新了则判断过期日期是否小于现在,如果是则自动推迟7天. IF(expire<NOW(),DATE_ADD(NOW(), INTERVAL 7 DAY), ...

  10. ajax提交后完全不进入action直接返回错误

    今天遇到个问题就是jQuery提交ajax请求,居然没有进入action的断点而直接返回错误信息. 仔细排查后才发现原来是因为客户端提交的某字段是100w的值,而后台对应的字段是个Short类型,根本 ...