DOM(文档对象模型）是针对HTML和XML文档的一个API。

DOM描绘了一个层次化的节点树。同意开发者加入，移除和改动页面的某一部分。DOM脱胎于微软公司的DHTLM（动态HTML），可是如今它已经成为表现和操作页面标记的真正跨平台，语言中立的方式。

JavaScript和DOM通常被视为一个单一的实体,由于JavaScript是最常见的用于此目的(与web上的内容交互)。 使用DOM API訪问、遍历和操作HTML和XML文档。

典型的DOM的基本轮廓层次结构(简化)

这里有一个关于DOM的一些值得注意的事情:

  • 窗体对象作为全局对象,您仅仅需键入“窗体”訪问它。

    在这个对象的全部运行JavaScript代码。 像全部对象的属性和方法。

    • 属性是一个变量存储在一个对象。

      网页上创建的全部变量authomatically成为窗体对象的属性。

    • 一个方法是存储在一个对象的函数。 以来全部的功能都存储在窗体对象(至少)下他们都能够称为“方法”。
  • DOM创建一个hierarcy相应于每一个web文档的结构。

    这样的层次结构是由节点。 有几种不同类型的DOM节点,最重要的是“元素”,“文本”和“文档”。

    • 一个“元素”节点表示一个元素在一个页面。 假设你有一个段落元素(“< p >”),那么它能够通过訪问DOM节点。
    • “文本”节点表示一个页面内全部文本(元素)。

      所以假设你的段落的文本能够直接通过DOM訪问。

    • 文档的节点代表整个文档。

      (这是DOM层次/树的根节点)。

    • 还要注意,元素属性是DOM节点本身。
  • 每一个布局引擎实现DOM标准略有不同。
    比如,火狐使用web浏览器壁虎布局引擎,有一个非常好的实现(尽管不是全然内联与W3C规范)Internet
    Explorer    ,它使用三叉戟布局引擎闻名车和不完整的实现,导致web开发社区内的多痛苦!

Node类型:

dom1级定义了一个NODE接口。该接口将由DOM中的全部节点类型实现。这个Node接口在javaScript中是作为node类型实现的，除了IE之外。在其它全部浏览器中都能够訪问到这个类型。javaScript中的全部节点都继承自NODE类型，因此全部节点类型都共享着同样的基本属性和方法。

每一个节点都有一个nodeType属性。用于表明节点的类型。节点类型由在node类型中定义的下列12个数值常量来表示，不论什么节点类型必居其一：

Node.ELEMENT_NODE(1);

Node.ATTRIBUTE_NODE(2);

Node.TEXT_NODE(3);

Node.CDATA_SECTION_NODE(4);

Node.CDATA_REFERENCE_NODE(5);

Node.ENTITY_NODE(6);

Node.PROCESSING_INSTRUCTION_NODE(7);

Node.COMMENT_NODE(8);

Node.DOCUMENT_NODE(9);

NODE.DOCUMENT_TYPE_NODE(10);

Node.DOCUMENT_FRAGMENT_NODE(11);

Node.NOTATION_NODE(12)

通过比較上面这些常量。能够非常easy地确定节点的类型，比如：

<!DOCTYPE html>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html;charset=gbk">

<title>test for javascript</title>

</head>

<body>

<p id="a">漫步人生路！</p>

<p>

<script type="text/javascript">

  var someNode=document.getElementById('a');

	alert(someNode.nodeType);

</script>

</body>

</html>

要了解Node节点的信息能够使用nodeName和nodeValue这两个属性:

<script type="text/javascript">

  var someNode=document.getElementById('a');

	alert(someNode.nodeType);

	alert(someNode.nodeName); //是元素的标签名 <p>

	alert(someNode.nodeValue); //要坚持node是不是一个元素仅仅要看nodeValue的值为null就能够了

</script>

JavaScritpt的DOM初探之Node(一)的更多相关文章

  1. DOM中的node与element的区别

    先看document的两个常见method. document.createTextNode Constructor: Text document.createElement Constructor: ...

  2. 从原型链看DOM－－Node类型

    前言: 本系列从原型,原型链,属性类型等方面下手学习了DOM文档对象模型,旨在弄清我们在DOM中常用的每一个属性和方法都清楚它从哪里来要到哪里做什么事,这样对于理解代码有一定启发.全靠自己在总结中摸索 ...

  3. 第10章 文档对象模型DOM 10.1 Node节点类型

    DOM是针对 HTML 和 XML 文档的一个 API(应用程序编程接口) .DOM描绘了一个层次化的节点树,允许开发人员添加.移除和修改页面的某一部分.DOM 脱胎于Netscape 及微软公司创始 ...

  4. day15 CSS JS DOM初探

    居中  line-hight  是上下          text-line  是左右    实现一个返回顶部的功能: 1 先写好CSS 2 写动作JS 写一个悬浮菜单: <!DOCTYPE h ...

  5. 跟随 Web 标准探究DOM -- Node 与 Element 的遍历

    写在前面 这篇没有什么 WebKit 代码的分析,因为……没啥好分析的,在实现里无非就是树的(先序DFS)遍历而已,囧哈哈哈……在WebCore/dom/Node.h , WebCore/dom/Co ...

  6. 【转载】Dom篇

    一. 初探Dom     1. Dom介绍 二. Dom基础     1. window顶级对象     2. body.document对象事件     3. 通用的HTML元素的事件     4. ...

  7. 一周一话题之四（JavaScript、Dom、jQuery全面复习总结<Dom篇>）

    -->目录导航 一. 初探Dom 1. Dom介绍 二. Dom基础 1. window顶级对象 2. body.document对象事件 3. 通用的HTML元素的事件 4. 冒泡事件 5. ...

  8. DOM对象模型接口规范中的四个基本接口

    DOM对象模型的四个基本接口 在DOM对象模型接口规范中,有四个基本的接口:Document,Node,NodeList以及NamedNodeMap.在这四个基本接口中,Document接口是对文档进 ...

  9. 【原创】Aspose.Words组件介绍及使用—基本介绍与DOM概述

           本博客所有文章分类的总目录:http://www.cnblogs.com/asxinyu/p/4288836.html 本博客其他.NET开源项目文章目录:http://www.cnbl ...

随机推荐

  1. 7天学习opengl入门

    http://blog.csdn.net/slience_perseverance/article/details/8096233 10月13号下午3:00队长给我开了一个会,10.14号开始学习op ...

  2. 《Linux命令行与shell脚本编程大全 第3版》Linux命令行---13

    以下为阅读<Linux命令行与shell脚本编程大全 第3版>的读书笔记,为了方便记录,特地与书的内容保持同步,特意做成一节一次随笔,特记录如下:

  3. C#原生加密方法： System.Security.Cryptography.CryptoStream DataSet加密解密

    采用16位密钥形式加密,把数据 dataset或文本转换为二进制流,然后进行加密解密.代码如下: using System; using System.Collections.Generic; usi ...

  4. 有道词典中的OCR功能：第三方库的变化

    之前有点好奇有道词典中的OCR功能,具体来说就是强力取词功能.我知道的最有名的OCR库是tesseract,这个库是惠普在早些年前开源的. 在用python做爬虫处理验证码的时候,就会用到这个库,对应 ...

  5. 关于WEB页面的强制分页打印问题

    最近项目中有个需求要求打印web页面数据,但是碰到打印预览显示数据时,多的数据就不翼而飞了(不分页),搞的很是焦灼~ 最先是以为纸张的问题,胡乱折腾了一番,把A4约硬是改成了LARGE号的纸,多的数据 ...

  6. 牛客网 牛客练习赛13 C.幸运数字Ⅲ-思维

    C.幸运数字Ⅲ   链接:https://www.nowcoder.com/acm/contest/70/C来源:牛客网     这个题447和477是特殊的,其他的就没什么了.   代码: 1 #i ...

  7. Codeforces Gym101522 C.Cheering-字符串 (La Salle-Pui Ching Programming Challenge 培正喇沙編程挑戰賽 2017)

    C.Cheering To boost contestants' performances in the 20th La Salle - Pui Ching Programming Challenge ...

  8. Codeforces 703D Mishka and Interesting sum（离线 + 树状数组）

    题目链接  Mishka and Interesting sum 题意  给定一个数列和$q$个询问,每次询问区间$[l, r]$中出现次数为偶数的所有数的异或和. 设区间$[l, r]$的异或和为$ ...

  9. String、Stringbuffer和Stringbuilder之间的区别

    关于这三个类在字符串处理中的位置不言而喻,那么他们到底有什么优缺点,到底什么时候该用谁呢?下面我们从以下几点说明一下 1.在执行速度方面:Stringbuilder>Stringbuffer&g ...

  10. EasyMvc入门教程-高级控件说明（15）方位布局控件

    现在很多管理后台都流行全屏切割的布局,大体结构如下图所示: 大家注意到没,整个布局是五个部分组成:“东西南北中”,EasyMvc对应的实现的代码为: @(Html.Q().Layout().TextC ...