Node类型
DOM1级定义了一个Node接口，该接口将由DOM中的所有节点类型实现，每个节点都有一个nodeType属性，用于表明节点的类型。节点类型由在Node
类型中定义的下列12个数值常量来表示，任何节点类型必居其一：

元素节点 　　Node.ELEMENT_NODE(1)

属性节点 　　Node.ATTRIBUTE_NODE(2)

文本节点 　　Node.TEXT_NODE(3)

CDATA节点 Node.CDATA_SECTION_NODE(4)

实体引用名称节点 　　 Node.ENTRY_REFERENCE_NODE(5)

实体名称节点 　　Node.ENTITY_NODE(6)

处理指令节点 　　Node.PROCESSING_INSTRUCTION_NODE(7)

注释节点 　 Node.COMMENT_NODE(8)

文档节点 　 Node.DOCUMENT_NODE(9)

文档类型节点 　　Node.DOCUMENT_TYPE_NODE(10)

文档片段节点 　　Node.DOCUMENT_FRAGMENT_NODE(11)

DTD声明节点 Node.NOTATION_NODE(12)

为了确保跨浏览器兼容，最好还是将nodeType属性与数字值进行比较

if(someNode.nodeType == 1){

    console.log('node is an element.');

    value = someNode.nodeName;

}

nodeName中保存的始终都是元素的标签名，而nodeValue的值则始终为null。在使用这两个值以前，最好是像上面这样先检测一下节点的类型

NodeList
每个节点都有一个childNodes属性，其中保存着一个NodeList对象，NodeList对象是一种类数组对象，用于保存一组有序的点，可以通过位置来访问
这些节点。NodeList对象是自动变化的

<!DOCTYPE html>

<html>

    <head>

        <title>sample page</title>

    </head>

    <body>

        <p>Hello World!</p>

    </body>

</html>    
var firstChild = $(html).childNodes[0];

var secondChild = $(html).childNodes.item(1);

var count = $(html).childNodes.length;

无论使用方括号还是使用item()方法都没有问题，length属性表示都是访问nodelist都那一刻，其中包涵的节点数量

将NodeList对象转化为数组

function converToArray (nodes) {

    var arrary = null;

    try {

        array = Array.prototype.slice.call(nodes,0); //在ie8及之前版本中无效，需要手动创建数组

    }catch (ex) {

        array = new Array();

        for (var i=0,len=nodes.length ; i<len ; i++) {

            array.push(nodes[i]);

        }

    }

    return array;

}

检测是第一个节点还是最后一个
每个节点都有一个parentNode属性，该属性指向文档树中的父节点。
包含在childNodes列表中的每个节点相互之间都是同胞节点，previousSibling(上一个同胞节点),nextSibling(下一个同胞节点)

if(someNode.nextSibling === null){

    console.log('last node'); //最后一个节点

}else if(someNode.previousSibling === null){

    console.log('first node'); //第一个节点

}

如果列表只有一个节点，那么该节点的nextSibing和previousSibling都为null.

DOM(一)：节点层次－Node类型的更多相关文章

  1. JavaScript中DOM节点层次Text类型

    文本节点 标签之间只要有一点内容都会有文本节点,包括空格 创建文本节点document.createTextNode() 可以使用 document.createTextNode 创建新文本节点 == ...

  2. DOM之节点层次

    1.1 Node类型 DOM1级定义了一个Node接口,该接口将由DOM中的所有节点类型实现.这个Node接口在JS中是作为Node类型实现的:除了IE之外,其他浏览器可访问这个类型.JS中的所有节点 ...

  3. DOM_节点层次_Element类型

    一.Element类型: nodeType: 1; nodeName: 元素名; nodeValue: null; parentValue: Document 或者 Element; var oDiv ...

  4. DOM_节点层次_Document类型

    一.Document类型 nodeType: 9; nodeName: "#document"; nodeValue: null; parentValue: null; owner ...

  5. javascript DOM中的节点层次和节点类型概述

    针对JS高级程序设计这本书,主要是理解概念,大部分要点源自书内.写这个主要是当个笔记加总结 存在的问题请大家多多指正! 因为DOM这方面的对象方法操作性都特别强,但是逻辑很简单,所以就没有涉及到实际的 ...

  6. js文本对象模型[DOM]【续】(Node节点类型)

    一.Document类型    document实例1.常用的一些属性documentElement 始终指向HTML页面中的<html>元素.body 直接指向<body>元 ...

  7. JS基础DOM篇之二：ＤＯＭ级别与节点层次？

    通过上一篇我们大致了解了什么是DOM,今天我们继续深入了解. 1.DOM级别       在大家阅读DOM标准的时候,可能会看到DOM(0/1/2/3)级的字眼,这就是DOM级别.但实际上,DOM0级 ...

  8. 《JAVASCRIPT高级程序设计》节点层次和DOM操作技术

    DOM可以将任何HTML和XML文档描绘成一个由多层次节点构成的结构.节点分为几种不同的类型,每种类型分别表示文档中不同的信息,每种类型都继承与Node接口,因此都共同享有一些属性和方法,同时,也拥有 ...

  9. 从原型链看DOM－－Node类型

    前言: 本系列从原型,原型链,属性类型等方面下手学习了DOM文档对象模型,旨在弄清我们在DOM中常用的每一个属性和方法都清楚它从哪里来要到哪里做什么事,这样对于理解代码有一定启发.全靠自己在总结中摸索 ...

随机推荐

  1. python3 关键字和可变参数笔记

    """普及一下字典的知识""" # dict = {'Name': 'Runoob', 'Age': 7, 'Class': 'First' ...

  2. [2019BUAA软工]团队项目选择

    Team V1 项目分析 写在前面 项目 内容 这个作业属于哪个课程 BUAA2019软件工程 这个作业的要求在哪里 团队项目选择 参考链接 如何提出靠谱的项目建议 NABCD 我们在这个课程的目标是 ...

  3. shell中的命令与特殊符号

    1.记录命令:! !!:连续的“!”表示执行上一次的指令 !n:表示执行命令历史中第二条指令 注:!2居然给我关机了 !字符串(字符串大于1)表示执行命令历史中最近的一次 2.通配符 " * ...

  4. 搭建hadpoot平台（集群式分布）

    1.先下载VMware1.2,然后安装. 2.下载ubuntu-1.4.05-desktop-amd64.iso.下载地址:http://mirrors.aliyun.com/ubuntu-relea ...

  5. hadoop install start-dfs.sh 失败

    linux:ubuntu 16.04 LTS hadoop version: 2.7.3 JDK: java-9-open-jdk issue: start-dfs.sh start-dfs.sh:c ...

  6. PIXI 写一个字及图片保存（2）

    <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...

  7. Mybatis学习笔记14 - 动态sql之foreach标签

    一.查询给定集合中员工id对应的所有员工信息 示例代码: 接口定义: package com.mybatis.dao; import com.mybatis.bean.Employee; import ...

  8. Surface Shader（表面着色器）

    Shader "Custom/Surface_Shadeer" { Properties {                                             ...

  9. fillder script使用

    打开fiddler script editor 在fiddler中Rules -> Customize Rules打开 在editor中点击open, 打开CustomRules.js文件, 对 ...

  10. 二叉排序树思想及C语言实现

    转自: http://blog.chinaunix.net/uid-22663647-id-1771796.html 1.二叉排序树的定义 二叉排序树(Binary Sort Tree)又称二叉查找( ...