嗯，工作也有一段时间了，对编程的认识也深入了一些，以前认为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. 1.scala语法

    对象的apply方法 (1)对象调用apply()方法,可省略成() (2)string对象的apply方法返回第n个字符 "hello"(4) //'o' if语句的返回值 ja ...

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

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

  3. Tomcat远程调试catalina.sh的配置

    #!/bin/sh # Licensed to the Apache Software Foundation (ASF) under one or more # contributor license ...

  4. NeHe OpenGL教程 第二十二课：凹凸映射

    转自[翻译]NeHe OpenGL 教程 前言 声明,此 NeHe OpenGL教程系列文章由51博客yarin翻译(2010-08-19),本博客为转载并稍加整理与修改.对NeHe的OpenGL管线 ...

  5. Spring MVC 中文乱码的解决

    对于POST方法提交的中文乱码 , 可在web.xml中添加如下代码 : <filter> <filter-name>encodingFilter</filter-nam ...

  6. 版本控制、SVN、VSS

    ylbtech-Miscellaneos: 版本控制.SVN.VSS 1.A,版本控制返回顶部 1, 版本控制(Revision control)是一种软体工程技巧,籍以在开发的过程中,确保由不同人所 ...

  7. strace命令

    简介 strace常用来跟踪进程执行时的系统调用和所接收的信号. 在Linux世界,进程不能直接访问硬件设备,当进程需要访问硬件设备(比如读取磁盘文件,接收网络数据等等)时,必须由用户态模式切换至内核 ...

  8. Bugtags，产品经理的瑞士军刀

    做为设计移动应用的产品经理,每天的主要工作就是在手机上不停的体验自己的产品,发现问题.优化体验.你是否经常工作在这样的尴尬场景: 发现界面问题,将问题界面截屏传到电脑,用图片标记工具将问题标记出来,然 ...

  9. 转: Ubuntu 安装字体方法

    命令安装:   以微软雅黑字体为例(其他的宋体.黑体等点阵字体都一样的),我们的雅黑字体文件是:Yahei.ttf(放在自己的主目录下)(在widows目录的Fonts目录下找需要的字体)由于我是双系 ...

  10. shell如何传递外部参数给文件

    shell里面如何传递参数: sh test.sh zhang 20 那test.sh里面咋接受参数呢? #!/usr/bin/env sh name=$1 age=$2 echo "nam ...