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. BZOJ5334:[TJOI2018]数学计算(线段树)

    Description 小豆现在有一个数x,初始值为1. 小豆有Q次操作,操作有两种类型:  1 m: x = x  *  m ,输出 x%mod; 2 pos: x = x /  第pos次操作所乘 ...

  2. Android 文件的读取和写入

    (1)openFileInput和openFileOutput的使用 文件的使用,注意最后要用finally给关闭掉. openFileOutput:(写入文件,如果没有文件名可以创建,这里不需要判断 ...

  3. JS图片Switchable切换大集合

    JS图片切换大集合 利用周末2天把JS图片切换常见效果封装了下,比如:轮播,显示隐藏,淡入淡出等.废话不多说,直接看效果吧!JSFiddler链接如下: 想看JS轮播切换效果请点击我! 当然由于上传图 ...

  4. 模板自定义函数 template function

    sqlite3中的日期默认是UTC,当日期字段的默认值是CURRENT_TIMESTAMP时,这个日期和北京时间CST少了8小时. 网上建议说数据库里用UTC,读取数据时再转换为当地时间. web页面 ...

  5. OC实现个人中心页面

    AppDelegate.m: - (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDic ...

  6. 2017-2018 Exp7 网络欺诈技术防范 20155214

    目录 Exp7 网络欺诈技术防范 实验内容 信息收集 知识点 Exp7 网络欺诈技术防范 实验内容 实验环境 主机 Kali 靶机 Windows 10 实验工具 平台 Metaploit 信息收集 ...

  7. 20155217《网络对抗》Exp06 信息搜集与漏洞扫描

    20155217<网络对抗>Exp06 信息搜集与漏洞扫描 实践内容 各种搜索技巧的应用 DNS IP注册信息的查询 基本的扫描技术:主机发现.端口扫描.OS及服务版本探测.具体服务的查点 ...

  8. WinRT IO相关整理

    虽然一般UWP开发还是依赖.Net for UWP,但有时还是需要调用WinRT API.特别是在IO部分,WinRT有着和.Net似曾相识但又不尽相同的接口.在此对经常用到的一些地方进行一下整理. ...

  9. jQuery调用Asp.Net后台方法

    常用的ajax就不讲了,这里主要是说通过ajax调用asp.net后台的cs文件暴露的方法. 前台: <%@ Page Language="C#" AutoEventWire ...

  10. ActiveMQ 的安装与使用（springboot版本）

    一.安装 上官网下载tar包 http://activemq.apache.org/ tar -zxvf 后进入bin/linux-86-64 ./activimq start 启动 二.使用 pom ...