DOM

什么是DOM？简单地说DOM是一套对文档内容进行抽象和概念化的方法。

  W3C给出的DOM定义是这样的：“一个与系统平台和编程语言无关的接口，程序和脚本以通过这个接口动态的访问和修改文档的内容，结构和样式。”

  那么楼主在这里主要是跟大家分享下JavaScript中如何使用DOM，当然如果会用JavaScript使用DOM，当你使用PHP或是Python之类的语言来解析XML文档的时候，我们获得的DOM新知识将会有很大的帮助。

DOM中的“D"，”O"，“M”。

  “D”当然就是“document”了，没有document的存在DOM也就无从谈起，浏览器在加载完我们所写的网页时，DOM就在后台产生了。浏览器将之转化为一个可读的文档对象。

  "O"呢，就是“object”,JavaScript中对象分为三种，分别是：用户自定义对象（用户自行创建的对象），宿主对象（浏览器提供的对象）和内建对象（JavaScript中的内建对象，如：Math，Date）。对象就是我们操作的主要目标。

  “M"怎么说呢，说它是”Modle"可以，也能说是“Map”本身DOM的存在就是让我们对整个文档有一个把握，所以说它是模型有道理，说它是地图也有道理。这里我们姑且把它当做是Map吧，既然是地图，那必然要有诸如图例，方向，等高线和比例尺之类的图例。我们要向看懂地图就需要对这些图例了如指掌。对于DOM同样如此，DOM把文档表示成一棵树（这里的“树”是数学上的概念），也是我们理解和运用这一模型的关键。家谱树模型非常适合用来表示一分用（X)HTML编写的文档。

比如：

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. <title>Canvas</title>
  6. <style>
  7. </style>
  8. </head>
  9. <body>
  10.   <h1 title="example">Examples</h1>
  11.   <p>A example</p>
  12.   <ul id="number">
  13.     <li class="one">第一条</li>
  14.     <li class="two">第二条</li>
  15.     <li class="three">第三条</li>
  16.   </ul>
  17. </body>
  18. </html>

节点

    节点是个网络术语，他表示的是构成网络中的一个连接点。一个网络就是由一些节点所构成的集合。

那么在DOM中同样存在节点，浏览器所解析的文档就是由一个个的节点构成，这个节点就是我们上面所画出来的树中的树叶和树枝。那么这些树叶和树枝被分为了三种：元素节点，属性节点，文本节点。，接下来我们一一看一下：

1.元素节点

元素节点其实很好理解，我们文档中诸如body,p,ul,li等标签都是一个元素节点。

标签的名字就是元素节点的名字。

比如：

  1. <p>A example</p>

这里的p标签就是一个元素节点，p就是元素节点的名称。

2.属性节点

属性节点是为了对元素做出更具体的描述，比如我们文档中：

  1. <h1 title="example">Examples</h1>

这里的title就是一个属性节点，属性节点用用比较广泛，CSS中的诸如style，id,class我们都可以把它看做是一个属性节点访问。

3.文本节点

文本节点就更容易理解了，就是文本内容嘛。比如：

  1. <ul>
  2.     <li>第一条</li>
  3.     <li>第二条</li>
  4.     <li>第三条</li>
  5.   </ul>

在XHTML中文本节点被包含在元素节点的内部，当并非所有的元素节点都包含文本节点，就像这里的ul标签没有文本内容，它包含了li标签，li有文本内容，里面的内容就构成了文本节点。

获取元素

有三种方法可以获取元素节点，分别是通过元素ID（getElementByID),通过标签名字（getElementByTagName），通过类名字（getELementByClassName）来获取：

1.getElementById

注意：JavaScript区分大小写，getELementById这几个字母不能写错了

  1. <script>
  2.    var number=document.getElementById("number");
  3.    alert(typeof number);
  4. </script>

我们会得到 如图所示的alert对话框：



由此我们也能更深入的理解了HTML中处处皆对象的概念。

2.getElementByTagName

getElementTagName会得到一个数组，这个数组对应着给定标签的每一个元素，

比如：

  1. var element=document.getElementsByTagName("li");
  2. for(var i=0;i<element.length;i++){
  3. alert(typeof element[i]);
  4. }

我们依然可以看到：



3.getElementByClassName

  1. var element=document.getElementsByClassName("one");
  2. alert(typeof element);

我们仍旧可以看到：



到这里我们就学完了获取元素的三种方法，我想你一定厌倦了看那么多变的显示着object的alert对话框，你一定也明白了文档中每个节点都是一个对象。

那么我们下一次就要说一下节点对象的属性和方法了。利用这些方法我们就可以随心所欲的改变文档中的内容，甚至改变某些元素的属性。

下面是对本次学习的一个总结：

一份文档就是一棵节点树.

节点分为不同的类型，元素节点，属性节点和文本节点等。

getElementByTagName和getElementByClassName将返回一个对象数组，他们对应着一组特定的元素节点。

每个节点都是一个对象。

Happy hacking !

JavaScript DOM学习总结（一）的更多相关文章

  1. javascript DOM 学习总结 (1)

    摘自javascript DOM编程艺术 1.首先介绍DOM的三个字母的含义: 1.1  D 如果没有document(文档),DOM 也无从谈起,当创建了一个网页并把他加载到web浏览器中时,DOM ...

  2. JavaScript DOM学习总结（二）

    获取和设置属性 DOM实在是个好东西,掌握了它我们不仅可以在JavaScript中使用,其它程序语言我们同样可以使用. 接下来就一起使用DOM来干些实事吧! 1.getAttribute getAtt ...

  3. 《JavaScript DOM 编程艺术》 学习笔记

    目录 <JavaScript DOM 编程艺术> 学习笔记 第一章 js简史 第二章 js语法 准备工作 语法 第三章 DOM DOM中的D DOM中的O DOM中的M 第四章 js图片库 ...

  4. JavaScript DOM编程艺术学习笔记（一）

    嗯,经过了一周的时间,今天终于将<JavaScript DOM编程艺术(第2版)>这本书看完了,感觉受益匪浅,我和作者及出版社等等都不认识,无意为他们做广告,不过本书确实值得一看,也值得推 ...

  5. 初步总结javascript中学习DOM之前的知识

    嘿嘿,又到了周末时间,周六其实就是总结这周的学习的,记得周二周三刚开始接触javascript时间,还是不知道怎么学习的,就感觉找不到方向,那时间学习的只是总结了一些简单的定义或者是学习结构,今天就把 ...

  6. javascript DOM 操作

    在javascript中,经常会需要操作DOM操作,在此记录一下学习到DOM操作的知识. 一.JavaScript DOM 操作 1.1.DOM概念 DOM :Document Object Mode ...

  7. JavaScript DOM 编程艺术（第2版）读书笔记（1）

    JavaScript 简史 JavaScript 是Netscape公司与Sun公司合作开发的.在 JavaScript 1.0发布时,Netscape Navigator主宰着浏览器市场.微软在推出 ...

  8. JavaScript DOM动态创建（声明）Object元素

    http://www.cnblogs.com/GuominQiu/archive/2011/04/01/2002783.html 一文提及“等整个页面加载完毕后,根据用户所选的阅读机类型,再用Java ...

  9. JavaScript DOM编程艺术第一章：JavaScript简史

    本系列的博客是由本人在阅读<JavaScript DOM编程艺术>一书过程中做的总结.前面的偏理论部分都是书中原话,觉得有必要记录下来,方便自己翻阅,也希望能为读到本博客的人提供一些帮助, ...

随机推荐

  1. 【Python】调用WPS V9 API，实现PPT转PDF

    WPS 的API,即COM,主要分为V8与V9两个版本,网上容易查到的例子,都是V8的. 现在官网上可以下载的,2013抢鲜版,就是V9的API. Python 调用COM 需要安装 Python f ...

  2. RCP：美化基于eclipse3.7.2的RCP界面

    从e4开始,eclipse rcp界面具备了深度自定义的能力. 但是在eclipse3.7.2上,几乎没有提供能够用于修改界面的外部接口. 这里介绍一种方式来自定义你自己的eclipse rcp. 先 ...

  3. WPF，Silverlight与XAML读书笔记第四十三 - 多媒体支持之文本与文档

    说明:本系列基本上是<WPF揭秘>的读书笔记.在结构安排与文章内容上参照<WPF揭秘>的编排,对内容进行了总结并加入一些个人理解. Glyphs对象(WPF,Silverlig ...

  4. Nim教程【十一】

    引用类型和指针类型 不同的引用可以只想和修改相同的内存单元 在nim中有两种引用方式,一种是追踪引用,另一种是非追踪引用 非追踪引用也就是指针,指向手动在内存中分配的对象: 追踪引用指向一个垃圾收集的 ...

  5. [.net 面向对象程序设计进阶] (4) 正则表达式 (三) 表达式助手

    [.net 面向对象程序设计进阶] (2) 正则表达式(三) 表达式助手 上面两节对正则表达式的使用及.NET下使用正则表达式作了详细说明,本节主要搜集整理了常用的正则表达式提供参考. 此外为了使用方 ...

  6. 【译】什么导致了Context泄露：Handler&内部类

    思考下面代码 public class SampleActivity extends Activity { private final Handler mLeakyHandler = new Hand ...

  7. easy-ui JOB 及 小记录

    $:获取  $.ajax({             type: "POST" ,             url: "" ,             cont ...

  8. [Java集合] 彻底搞懂HashMap,HashTable,ConcurrentHashMap之关联.

    注: 今天看到的一篇讲hashMap,hashTable,concurrentHashMap很透彻的一篇文章, 感谢原作者的分享. 原文地址: http://blog.csdn.net/zhanger ...

  9. Atitit 热更新资源管理器 自动更新管理器 功能设计

    Atitit 热更新资源管理器 自动更新管理器 功能设计 · 多线程并行下载支持 · 两层进度统计信息:文件级以及字节级 · Zip压缩文件支持 · 断点续传 · 详细的错误报告 · 文件下载失败重试 ...

  10. 关于Ubuntu运行级别、开机启动脚本的说明

    关于Ubuntu运行级别.开机启动脚本的说明 目录简介 1.1介绍Ubuntu下面的自启动脚本目录 1.2 Linux操作系统运行级别的概念 1.3关于操作系统自启脚本的启动顺序 1.4    Lin ...