DOM有三种节点：元素节点、属性节点、文本节点。

一、用nodeType可以检测节点的类型

节点类型 nodeType属性值
元素节点 1
属性节点 2
文本节点 3

这样方便在js中对各个节点进行操作。

元素节点：html中的标签。

属性节点：html便签中的属性值。

文本节点：元素节点之间的文本。

二、用body的childNodes来测试

  <body>/*第一个文本元素

    */<div></div>/*第二个文本元素

    */<div></div>/*第三个文本元素

    */<ul>

          <li></li>

          <li></li>

          <li></li>

      </ul>/*第四个文本元素

  */</body>

来看body的childNodes中各个节点的个数。

先说一下childNodes，这个属性用来获取任何一个元素的所有子元素，它是一个包含这个元素的全部子元素的数组。

用js测试：

 window.onload = function (){

     var oBody = document.getElementsByTagName('body')[0];

     var aChild = oBody.childNodes;

     alert(aChild.length);//

     for(var i = 0; i < aChild.length; i++) {

         alert(aChild[i].nodeType);//3 1 3 1 3 1 3

         }

 };

由此看来：

body的子元素有div、div、ul。

body的文本元素有四个，代码中注释出出来的，我故意将*/换了一行写出来，是想表明在<body>和<div>之间是一个文本节点。

有人会觉得疑惑，不是说元素节点之间就是文本节点吗？为什么像<div></div>之间的文本节点没有算进去呢？

对的，那个也算文本节点，但我们计算的是body的子节点，像<div></div>之间的那是<div>的子节点啦，并不是body的子节点。

三、用nodeValue来得到和设置一个节点的值

三大节点中，属性节点和文本节点都是可能有值的，但是元素节点是没有值的。

用node.nodeValue得到node的值，那么有一个问题，nodeValue和innerHTML有什么区别呢？

nodeValue获取的是节点的值，innerHTML是以字符串形式返回该节点的所有子节点及其值。可以看做是部分与大体的一个区别。

举个例子：

 <body>

     <div id="div1">

         这是div的第一个子节点，是一个文本节点

         <p>div的第二个子节点p，这是p的第一个文本节点</p>

     </div>

 </body>

我们用js来测试一下nodeValue和innerHTML的结果

 window.onload = function (){

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

     var aChild = oDiv.childNodes;

     alert(aChild[0].nodeValue);

     alert(oDiv.innerHTML);

 };

测试结果如下：

第一个alert弹出“这是div的第一个子节点，是一个文本节点”

第二个alert弹出“这是div的第一个子节点，是一个文本节点 <p>div的第二个子节点p，这是p的第一个文本节点</p>”

三、用nodeName来获取节点的

nodeName属性含有某个节点的名称。

对于元素节点，nodeName=标签名（返回的名称是大写的）。

对于文本节点，nodeName=#text。

对于属性节点，nodeName=属性名（返回的名称是大写的）。

使用方法：elemt.nodeName;

js----DOM的三大节点及部分用法的更多相关文章

  1. Javascript之DOM的三大节点及部分用法

    DOM有三种节点:元素节点.属性节点.文本节点. 一.用nodeType可以检测节点的类型 节点类型 nodeType属性值 元素节点 1 属性节点 2 文本节点 3 这样方便在js中对各个节点进行操 ...

  2. js dom操作获取节点的一些方法

    在复习javascript基础的时候,整理了一下js中获取节点的一些常用的方法,见代码: //js获取下一个兄弟节点 function getNextSibling(eleObj){ var next ...

  3. JS DOM操作（创建、遍历、获取、操作、删除节点）

    创建节点 <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="u ...

  4. JS Dom节点操作demo!

    通过黑马课程的学习,在这里分享一个js Dom中节点操作的小练习 需求:使用js创建一个4*3的表格table. onload = function(){ function c(tagName){ r ...

  5. JS之获取子节点

    在JS中获取子节点有以下几种方法: firstElementChild.firstChild.childNodes和children 我们通过一个例子来分析这几种方法的区别(获取div下的p标签) 输 ...

  6. js DOM优化相关探索

    我在这尝试两个方面:-->DOM与js -->DOM与浏览器 (最近在秒味视频上学到不少,哈哈哈) 一.DOM与js 1.js与dom的交互问题 频繁的与dom交互,是一件浪费时间与金钱的 ...

  7. JS DOM 来控制HTML元素

    JS DOM 来控制HTML元素 (ps:这个有很多方法,挑一些详解,嘻嘻) 1.getElementsByName():获取name. ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ ...

  8. JavaScript学习总结【5】、JS DOM

    1.DOM 简介 当页面加载时,浏览器会创建页面的文档对象模型(Document Object Model).文档对象模型定义访问和处理 HTML 文档的标准方法.DOM 将 HTML 文档呈现为带有 ...

  9. DOM Style样式对象的详细用法

    DOM Style样式对象的详细用法 HTML Style样式比较复杂,相应访问.修改方法也有所差异.参考相关资料,整理如下. 典型Html文件如下,有三种定义方式. <head>     ...

随机推荐

  1. [JavaEE] SSH框架笔记_eclipse搭建SSH框架详解

    SSH框架是最常用的框架之一,在搭建SSH框架的时候总有人遇到这样,那样的问题.下面我介绍一下SSH框架搭建的全过程. 第一步:准备工作. 下载好eclipse,Struts2,Spring,Hibe ...

  2. Android（java）学习笔记62：继承Thread类创建线程类

    package cn.itcast_02; /* * 该类要重写run()方法,为什么呢? * 不是类中的所有代码都需要被线程执行的. * 而这个时候,为了区分哪些代码能够被线程执行,java提供了T ...

  3. (转)WIN7更改用户名访问共享文件夹

    原文地址: http://ryy8013.blog.163.com/blog/static/71729589201210610533778/ 一直以来,windows7客户端访问windows ser ...

  4. web前端开发（5）

    CSS的一些问题: 一般情况下,尽量使用class选择器 解决点击超链接后hover 样式不出现多次问题:a:visited  a:hover 的顺序是问题所在,记住 love hate  L(lin ...

  5. 21世纪C语言(影印版)

    <21世纪C语言(影印版)> 基本信息 原书名:21st Century C 作者: Ben Klemens 出版社:东南大学出版社 ISBN:9787564142056 上架时间:201 ...

  6. json数据处理技巧（字段带空格、增加字段）

    1.json数据的正常取值:json[i].fieldName 2.json数据的字段带空格:eval('json[' + i + ']["' + field + '"]') 3. ...

  7. ionic Modal

    在ionic中,modal也是添加控制器写服务的~ 在modal.html页面中增加控制器:ng-controller="aboutCtrl"记住要给这个添加控制器.头部使其关闭按 ...

  8. C# 序列化JavaScriptSerializer

    1.首先引入 System.Web.Extensions.dll 2.写入命名空间 System.Web.Script.Serialization 3.实现序列化. class Program { s ...

  9. 磁珠 磁环 双向二极管 TVS二极管

    磁珠专用于抑制信号线.电源线上的高频噪声和尖峰干扰,还具有吸收静电脉冲的能力.磁珠是用来吸收超高频信号,像一些RF电路,PLL,振荡电路,含超高频存储器电路(DDR SDRAM,RAMBUS等)都需要 ...

  10. Linux之cuda安装

    1.下载https://developer.nvidia.com/cuda-downloads 2.双击下载好的deb进行安装 3.sudo apt-get install cuda 4.As par ...