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. BZOJ4340:[BJOI2015]隐身术(后缀数组,ST表,DFS)

    Description 给定两个串A,B.请问B中有多少个非空子串和A的编辑距离不超过K? 所谓“子串”,指的是B中连续的一段.不同位置的内容相同的子串算作多个. 两个串之间的“编辑距离”指的是把一个 ...

  2. 运行metamascara时出现的一些错误

    The difference between mascara and the extension Mascara Is in alpha and some of it's behaviors are ...

  3. ethjs-1-了解

    https://github.com/ethjs/ethjs/blob/master/docs/user-guide.md Install npm install --save ethjs Usage ...

  4. kubernetes 生命周期问题分析

    1.Failed  -- pod里至少一个容器以非0code退出,说明应用有问题,需要debug应用容器 2.pending -- 说明API对象已经被创建和保存在etcd数据库里,但是创建过程出了问 ...

  5. jqgrid 获取所有行数据

    如何获取jqgrid所有数据? 通过 getRowData() 方法获得当前行数据 //获取所有行数据,是一个json对象集合 var rowArr= $("#jqGrid").g ...

  6. ETH—Lwip以太网通信

    第39章     ETH—Lwip以太网通信 全套200集视频教程和1000页PDF教程请到秉火论坛下载:www.firebbs.cn 野火视频教程优酷观看网址:http://i.youku.com/ ...

  7. 【转】深入理解C++的动态绑定和静态绑定 & 不要重定义虚函数中的默认参数

    为了支持c++的多态性,才用了动态绑定和静态绑定.理解他们的区别有助于更好的理解多态性,以及在编程的过程中避免犯错误.需要理解四个名词:1.对象的静态类型:对象在声明时采用的类型.是在编译期确定的.2 ...

  8. 2017-2018-2 20155203《网络对抗技术》Exp2 后门原理与实践

    基础问题回答 (1)例举你能想到的一个后门进入到你系统中的可能方式? 通过下载带后门的程序或者点开带有后门的软件,或者后门本身就在我的系统里: (2)例举你知道的后门如何启动起来(win及linux) ...

  9. 20155210 Exp9 Web安全基础实践

    Exp9 Web安全基础实践 实验过程 开启webgoat 输入java -jar webgoat-container-7.1-exec.jar,来运行webgoat 在浏览器输入localhost: ...

  10. 20155308 《网络攻防》 Exp2 后门原理与实践

    20155308 <网络攻防> Exp2 后门原理与实践 学习内容:使用nc实现win,mac,Linux间的后门连接 :meterpraeter的应用 :MSF POST 模块的应用 学 ...