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. Spring之强制修改某个方法的行为（Arbitrary method replacement）

      A less commonly useful form of method injection than Lookup Method Injection is the ability to rep ...

  2. 利用jenkins打造通过自定义参数更新svn 指定文件任务

    jenkin可以执行很多构建任务,有时候我们需要在执行构成中同构shell对服务器进行操作而且还需要进行参数的传入 比如:我要利用svn进行本地代码的更新,单又不是所有代码的更新,只更新指定的1个或这 ...

  3. linux-如何快速替换IP

    导读 在Linux在做高可用的时候,经常会使用到虚拟IP.在windows上一个网卡可以配置两个IP,在Linux直接使用ip命令就可以添加了. 添加 ip address add 192.168.1 ...

  4. Linux SSH免密登录

    SSH无密码登录要使用公钥与私钥.Linux可以用ssh-keygen生成公钥/私钥对,下面以Ubuntu为例说明配置过程. 有两个节点:node01(172.17.0.14)和node02(172. ...

  5. stm32_DMA采集一个AD数据_并通过DMA向串口发送

    这是以前学32的时候写的,那时候学了32之后感觉32真是太强大了,比51强的没影.关于dma网上有许多的资料,关于dma采集ad网上也有很多.亲们搜搜,这里只贴代码了,其实我也想详详细细地叙述一番,但 ...

  6. 批量下载，多文件压缩打包zip下载

    0.写在前面的话 图片批量下载,要求下载时集成为一个压缩包进行下载.从昨天下午折腾到现在,踩坑踩得莫名其妙,还是来唠唠,给自己留个印象的同时,也希望给需要用到这个方法的人带来一些帮助. 1.先叨叨IO ...

  7. java中CyclicBarrier简单入门使用

    一个同步辅助类,它同意一组线程互相等待,直到到达某个公共屏障点 (common barrier point). 在涉及一组固定大小的线程的程序中,这些线程必须不时地互相等待.此时 CyclicBarr ...

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

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

  9. VS编程，WPF单独更改TextBlock中部分文字格式的一种方法

    原文:VS编程,WPF单独更改TextBlock中部分文字格式的一种方法 版权声明:我不生产代码,我只是代码的搬运工. https://blog.csdn.net/qq_43307934/articl ...

  10. 探索sklearn | K均值聚类

    1 K均值聚类 K均值聚类是一种非监督机器学习算法,只需要输入样本的特征 ,而无需标记. K均值聚类首先需要随机初始化K个聚类中心,然后遍历每一个样本,将样本归类到最近的一个聚类中,一个聚类中样本特征 ...