DOM= Document Object Model，文档对象模型，DOM可以以一种独立于平台和语言的方式访问和修改一个文档的内容和结构。换句话说，这是表示和处理一个HTML或XML文档的常用方法。DOM实际上是以面向对象方式描述的文档模型。DOM定义了表示和修改文档所需的对象、这些对象的行为和属性以及这些对象之间的关系。可以把DOM认为是页面上数据和结构的一个树形表示，不过页面当然可能并不是以这种树的方式具体实现。

通过 JavaScript，您可以重构整个 HTML 文档。您可以添加、移除、改变或重排页面上的项目。

几个常用的节点类型：

节点类型 节点描述 nodeName nodeValue nodeType
element 元素节点 元素名 null 1
text 文本节点 #text 文本内容 3
document 文档 #document null 9
comment 注释 #comment 注释文本 8
attribute 属性节点 属性名称 属性值 2

nodeType：查看某节点是什么类型

代码如下：

var div1=document.getElementById('div1');

alert(document.nodeType);//弹出数字9

alert(div1.nodeType);//弹出数字1

文字也算节点：

<body>

<div id="div1">123456</div>

<script>

	var div1=document.getElementById('div1');

	console.log(div1.childNodes);//输出#text

        console.log(div1.childNodes[0]);//输出'123456'

        console.log(div1.childNodes[0].nodeType);//输出3

</script>

</body>

123456是文本节点（div里面没有东西、换行、文字都是文本节点），childNodes子节点类数组,获取某个节点下的所有子节点

chlidren：不是标准的属性，但是所有浏览器都支持，找到某个元素下所有元素子节点

<body>

<!--<div id="div1">123456</div>-->

<div id="div1">

</div>

<script>

	var div1=document.getElementById('div1');

	console.log(div1.childNodes[0]);

</script>

结果如下：

div里面只包含文字的算一个子节点(无论有多少空格)：

例：

<body>

<div id="div1">qqq	

</div>

<script>

	var div1=document.getElementById('div1');

	console.log(div1.childNodes.length);//输出1

</script>

</body>

注释节点：节点类型为数字8

<div id="div1"><!--这是一个注释-->

</div>

<script>

	var div1=document.getElementById('div1');

	console.log(div1.childNodes[0]);//输出<!--这是一个注释-->

	console.log(div1.childNodes[1]);

        console.log(div1.childNodes[0].nodeValue);//查看div下注释的内容

</script>

</body>

div下有两个子节点，一个是注释节点，一个是文本节点

属性节点：节点类型为2

<body>

</div>-->

<div id="div1></div>

<script>

	var div1=document.getElementById('div1');

	console.log(div1.attributes[0].nodeType);//输出2

	console.log(div1.attributes[0].nodeValue);//查看节点的属性值,输出div1

	console.log(div1.attributes[0].nodeName);//查看节点的属性名,输出id

</script>

</body>

DOM之节点类型加例子的更多相关文章

  1. DOM Element节点类型详解

    上文中我们讲解了 DOM 中最重要的节点类型之一的 Document 节点类型,本文我们继续深入,谈谈另一个重要的节点类型 Element . 1.概况 Element 类型用于表现 HTML 或 X ...

  2. DOM Document节点类型详解

    在前面 DOM 概况 中,我们知道了 DOM 总共有 12 个节点类型,今天我们就来讲下 DOM 中最重要的节点类型之一的 document 节点类型. 1.概况 Javascript 通过 Docu ...

  3. 深入理解DOM节点类型第七篇——文档节点DOCUMENT

    × 目录 [1]特征 [2]快捷访问 [3]文档写入 前面的话 文档节点document,隶属于表示浏览器的window对象,它表示网页页面,又被称为根节点.本文将详细介绍文档节点document的内 ...

  4. DOM的概念及子节点类型

    前言 DOM的作用是将网页转为一个javascript对象,从而可以使用javascript对网页进行各种操作(比如增删内容).浏览器会根据DOM模型,将HTML文档解析成一系列的节点,再由这些节点组 ...

  5. DOM的概念及子节点类型【转】

    前言 DOM的作用是将网页转为一个javascript对象,从而可以使用javascript对网页进行各种操作(比如增删内容).浏览器会根据DOM模型,将HTML文档解析成一系列的节点,再由这些节点组 ...

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

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

  7. javascript DOM中的节点层次和节点类型概述

    针对JS高级程序设计这本书,主要是理解概念,大部分要点源自书内.写这个主要是当个笔记加总结 存在的问题请大家多多指正! 因为DOM这方面的对象方法操作性都特别强,但是逻辑很简单,所以就没有涉及到实际的 ...

  8. DOM基础+domReady+元素节点类型判断

    DOM节点类型  nodeType element  1    Node.ELEMENT_NODE   元素节点 attr  2   Node.ATTRIBUTE_NODE  属性节点 text  3 ...

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

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

随机推荐

  1. BZOJ2079:[POI2010]Guilds(乱搞)

    Description Zy皇帝面临一个严峻的问题,两个互相抵触的贸易团体,YYD工会和FSR工会,他们在同一时间请求在王国各个城市开办自己的办事处.这里有n个城市,其中有一些以双向马路相连,这两个工 ...

  2. Android开发-各种各样好看漂亮的进度条，指示器，加载提示汇总

    导读:之前项目中用到一些进度条,找了不少,打算写个demo自己总结一下,留着以后用, 有些是自己写的,有些是github上找的别人的库,如果大家觉得好看可以用,直接下载复制代码到项目里就可以用,ok ...

  3. WorldWind源码剖析系列：日志类Log

    Utility工程中的日志类Log主要用来输出Debug状态下的调试信息.该类的类图如下: 日志类Log中使用到的类和内嵌结构体类型主要有以下这些: public class LogEventArgs ...

  4. (二) DRF 视图

    DRF中的Request 在Django REST Framework中内置的Request类扩展了Django中的Request类,实现了很多方便的功能--如请求数据解析和认证等. 比如,区别于Dj ...

  5. HDU 1269 迷宫城堡（判断有向图强连通分量的个数，tarjan算法）

    迷宫城堡 Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others)Total Submis ...

  6. PRML5-神经网络（1）

    本节来自<pattern recognition and machine learning>第5章. 五.神经网络 在本书的第3.4章分别是基于回归和分类的线性模型,都是通过将固定的基函数 ...

  7. 20155232《网络对抗》Exp8 Web基础

    20155232<网络对抗>Exp 8 Web基础 一.实践内容 (1).Web前端HTML(0.5分) 能正常安装.启停Apache.理解HTML,理解表单,理解GET与POST方法,编 ...

  8. SSIS 你真的了解事务吗？

    事务用于处理数据的一致性,事务的定义是,处于同一个事务中的操作是一个工作单元,要么全部执行成功,要么全部执行失败.把事务的概念应用到在实际的SSIS Package场景中,如何在Package中实现事 ...

  9. 用Spring.Services整合 thrift0.9.2生成的wcf中间代码-复杂的架构带来简单的代码和高可维护性

    最近一直在看关于thrift的相关文章,涉及到的内容的基本都是表层的.一旦具体要用到实际的项目中的时候就会遇到各种问题了! 比如说:thrift 的服务器端载体的选择.中间代码的生成options(a ...

  10. Js_图片轮换

    本文介绍用javascript制作图片轮换效果,原理很简单,就是设置延时执行一个切换函数,函数里面是先设置下面的缩略图列表的白框样式,再设置上面大图的src属性,在IE中显示很正常,可是在FF中会有变 ...