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. 密码破解技术——P201421410029

    学   号 201421410029   中国人民公安大学 Chinese people’ public security university 网络对抗技术 实验报告   实验三 密码破解技术   ...

  2. 常用lua代码块

    1.读取请求体中参数 local request_method = ngx.var.request_method local args --获取参数的值 if "GET" == r ...

  3. OpenCV——凸包

    #include <opencv2/opencv.hpp> #include <iostream> #include <math.h> using namespac ...

  4. IN2REG group 的时序分析

    针对 IN2REG 的 timing group,其 timing 模型是假设 input pin 外面有一个虚拟的reg(如图中的 reg1),这个虚拟reg的 clock 是 virtual cl ...

  5. STM32 串口中断总结

    原文:https://blog.csdn.net/weixin_42480952/article/details/82981409 最近在学习使用dma传输方式进行串口通讯,感觉这个很详细,存一下 . ...

  6. 20155325 Exp5 MSF基础应用

    目录 实验内容 遇到的问题 基础问题问答 老师!!!我实验三的C代码已经删除了,请求评分~~~ 实验内容 1.Windows服务渗透攻击--MS08-067 系统 虚拟机 参考博客 Windows X ...

  7. mfc 进程的诞生和死亡

     进程概念  进程的诞生  进程的死亡 一. 进程: .简单的说 双击一个EXE图标时,系统就会产生一个相应的进程,分配相应的资源,并执行相应的代码. .标准一些的说法: 进程是一个具有独立功能 ...

  8. 01-BAT算法特训班

  9. java 读写ini配置文件

    ini配置文件 ;客户端配置[Client];客户端版本号version=0001;设备号devNum=6405 public final class ConfigurationFile { /** ...

  10. python面试题(四)

    一.数据类型 1.字典 1.1 现有字典 dict={‘a’:24,‘g’:52,‘i’:12,‘k’:33}请按字典中的 value 值进行排序? sorted(dict.items(),key=l ...