文档章节

JavaScript中的Node相关内容介绍

 大东家
发布于 2015/01/13 10:28
字数 1193
阅读 8
收藏 0

Node往往被翻译为节点,在一个对象(可以简单的理解为是HTML页面中),一个属性name="aaa"可以是一个节点,一个< div id="aaa">……< /div>也可以是一个节点,在< body>……< /body>中的,也是一个大大的节点。下面是一些有关Node的属性和方法,并没有包含部分不兼容IE和FF内容的讲解。

Node的属性介绍:

nodeType:显示节点的类型
nodeName:显示节点的名称
nodeValue:显示节点的值
attributes:获取一个属性节点
firstChild:表示某一节点的第一个节点
lastChild:表示某一节点的最后一个子节点
childNodes:表示所在节点的所有子节点
parentNode:表示所在节点的父节点
nextSibling:紧挨着当前节点的下一个节点
previousSibling:紧挨着当前节点的上一个节点
ownerDocument:(不知)

Node有各种各样的节点,我们先花一些时间认识他们,同时一并了解nodeType,nodeName和nodeValue属性:
名称:元素节点
nodeType:ELEMENT_NODE
nodeType值:1
nodeName:元素标记名
nodeValue:null

< body >
<
div id = " t " >< span >< / span>< / div >
<
/ body>
<script>
var d = document.getElementById("t");
document.write(d.nodeType);
document.write(d.nodeName);
document.write(d.nodeValue);
// 显示 1 DIV null
<
/ script >

名称:属性节点
nodeType:ATTRIBUTE_NODE
nodeType值:2
nodeName:属性名
nodeValue:属性值

< body >
<
div id = " t " name = " aaa " >< span >< / span>< / div >
<
/ body>
<script>
var d = document.getElementById("t").getAttributeNode("name");
document.write(d.nodeType);
document.write(d.nodeName);
document.write(d.nodeValue);
// 显示 2 name aaa
<
/ script >

名称:文本节点
nodeType:TEXT_NODE
nodeType值:3
nodeName:#text
nodeValue:文本内容

< body >
<
div id = " t " > bbb < / div>
<
/ body >
<
script >
var d = document . getElementById ( " t " ) . firstChild ;
document . write ( d . nodeType ) ;
document . write ( d . nodeName ) ;
document . write ( d . nodeValue ) ;
//显示 3 #text bbb
<
/ script>

名称:CDATA文本节点(XML中传递文本的格式)
nodeType:CDATA_SECTION_NODE
nodeType值:4
nodeName:#cdata-section
nodeValue:CDATA文本内容

(作者省略8个属性,需技术补充)

attributes属性,直接获取一个属性节点,注意这里要使用[],保持IE和FF的兼容性。

< body name = " ddd " >
<
div id = " t " name = " aaa " >< span > aaa < / span><span>bbb< / span >< span > ccc < / span>< / div >
<
/ body>
<script>
var d = document.getElementById("t").attributes["name"];
document.write(d.name);
document.write(d.value);
// 显示 name aaa
<
/ script >

firstChild和lastChild属性,表示某一节点的第一个和最后一个子节点:

< body >
<
div id = " t " >< span > aaa < / span><span>bbb< / span >< span > ccc < / span>< / div >
<
/ body>
<script>
var d = document.getElementById("t");
document.write(d.firstChild.innerHTML);
document.write(d.lastChild.innerHTML);
// 显示 aaa ccc
<
/ script >

childNodes和parentNode属性,表示所在节点的所有子节点和所在节点的父节点,这里的childNodes注意是一个数组:

< body name = " ddd " >
<
div id = " t " >< span > aaa < / span><span>bbb< / span >< span > ccc < / span>< / div >
<
/ body>
<script>
var d = document.getElementById("t");
document.write(d.childNodes[1].innerHTML);
document.write(d.parentNode.getAttribute("name"));
// 显示 bbb ddd
<
/ script >

nextSibling和previousSibling属性,分别表示在parentNode的childNodes[]数组中,紧挨着当前节点的上一个和下一个节点:

< body name = " ddd " >
<
div id = " t " >< span > aaa < / span><span>bbb< / span >< span > ccc < / span>< / div >
<
/ body>
<script>
var d = document.getElementById("t").childNodes[1];
document.write(d.nextSibling.innerHTML);
document.write(d.previousSibling.innerHTML);
// 显示 ccc aaa
<
/ script >

ownerDocument属性(不知如何使用)

Node的方法介绍:

hasChildNodes():判定一个节点是否有子节点
removeChild():去除一个节点
appendChild():添加一个节点
replaceChild():替换一个节点
insertBefore():指定节点位置插入一个节点
cloneNode():复制一个节点
normalize():(不知)

hasChildNodes()方法:判定一个节点是否有子节点,有返回true,没有返回false

< body name = " ddd " >
<
div id = " t " >< span > aaa < / span><span>bbb< / span >< span > ccc < / span>< / div >
<
div id = " m " >< / div>
<
/ body >
<
script >
alert ( document . getElementById ( " t " ) . hasChildNodes ()) ;
alert ( document . getElementById ( " m " ) . hasChildNodes ()) ;
// 第一个true,第二个false
<
/ script>

removeChild()方法:去除一个节点

< body name = " ddd " >
<
div id = " t " >< span > aaa < / span><span>bbb< / span >< span > ccc < / span>< / div >
<
/ body>
<script>
var d = document.getElementById("t").firstChild;
document.getElementById("t").removeChild(d);
// <span>aaa< / span >被去除
<
/ script>

appendChild()方法:添加一个节点,如果文档树中已经存在该节点,则将它删除,然后在新位置插入。

< body name = " ddd " >
<
div id = " t " >< span > aaa < / span><span>bbb< / span >< span > ccc < / span>< / div >
<
/ body>
<script>
var d = document.getElementById("t").firstChild;
document.getElementById("t").appendChild(d);
// <span>aaa< / span >成了最后一个节点
<
/ script>

replaceChild()方法:从文档树中删除(并返回)指定的子节点,用另一个节点来替换它。

< body name = " ddd " >
<
div id = " t " >< span > aaa < / span><span>bbb< / span >< span > ccc < / span>< / div >
<
/ body>
<script>
var newd = document.createElement("span");
newd.innerHTML = "eee";
var oldd = document.getElementById("t").lastChild;
document.getElementById("t").replaceChild(newd,oldd);
// 最后一项成了 eee
<
/ script >

insertBefore()方法:在指定节点的前面插入一个节点,如果已经存在,则删除原来的,然后在新位置插入

< body name = " ddd " >
<
div id = " t " >< span > aaa < / span><span>bbb< / span >< span > ccc < / span>< / div >
<
/ body>
<script>
var newd = document.createElement("span");
newd.innerHTML = "eee";
var where = document.getElementById("t").lastChild;
document.getElementById("t").insertBefore(newd,where);
// 在最后一项的前面多了一项 eee
<
/ script >

cloneNode()方法:复制一个节点,该方法有一个参数,true表示同时复制所有的子节点,false表示近复制当前节点

< body name = " ddd " >
<
div id = " t " >< span > aaa < / span><span>bbb< / span >< span > ccc < / span>< / div >< div id = " m " >< / div>
<
/ body >
<
script >
var what = document . getElementById ( " t " ) . cloneNode ( false ) . innerHTML ;
document . getElementById ( " m " ) . innerHTML = what ;
// 增加了一个aaabbbccc
<
/ script>

本文转载自:http://blog.csdn.net/xiaohelong2005/article/details/4393594

粉丝 22
博文 255
码字总数 111936
作品 0
长沙
项目经理
私信 提问
《Node Web开发》书评赠书活动,国内首本node书

图灵教育&开源中国联合举办读样章赠图书活动,免费赠送《Node Web开发》10册! 本书核心:雅虎架构师精准解读最炙手可热的Web开发技术,用Node平台打造高性能Web应用 活动时间: 2012年5月1...

生气的散人
2012/05/10
5.4K
41
NODE高级编程阅读笔记系列(一)

本篇涉及以下主题 node简单介绍 事件驱动编程 模块化 缓冲区处理 Node简单介绍 直接用官方的那句话: Node.js 是一种建立在Google Chrome's V8 引擎上的non-blocking(非阻塞),event-driven(...

可爱的圣诞老人
2018/05/23
0
0
Node.js 基金会和 JS 基金会准备合并,你怎么看?

此消息来自 Node.js 和 JS Foundations 的董事会(英文原文)。 介绍 10月4日,Node.js 基金会和 JS 基金会宣布了合并意向。合并意向意味着两个基金会的董事会已同意公开讨论与可能合并的有关...

oschina
2018/10/06
2.1K
8
JS原生系列-DOM篇(扩展)

继续DOM的研究工作,我们扩展对dom api的学习! 1.介绍针对低级浏览器,能力的监测处理: 2.针对移动端,touch事件的介绍: 3.最后做几个网页实例! 4.ajax的介绍:ajax输出json格式文件 js...

透笔度
2015/08/08
163
0
JavaScript语言基础-环境搭建

我们要想编写和运行JavaScript脚本,则需要:JavaScript编辑工具和JavaScript运行测试环境。下面我们分别介绍一下。 JavaScript编辑工具 JavaScript编辑工具最简单的可以使用一些文本编辑工具...

智捷课堂
2015/03/12
2.4K
0

没有更多内容

加载失败,请刷新页面

加载更多

OpenStack 简介和几种安装方式总结

OpenStack :是一个由NASA和Rackspace合作研发并发起的,以Apache许可证授权的自由软件和开放源代码项目。项目目标是提供实施简单、可大规模扩展、丰富、标准统一的云计算管理平台。OpenSta...

小海bug
昨天
5
0
DDD(五)

1、引言 之前学习了解了DDD中实体这一概念,那么接下来需要了解的就是值对象、唯一标识。值对象,值就是数字1、2、3,字符串“1”,“2”,“3”,值时对象的特征,对象是一个事物的具体描述...

MrYuZixian
昨天
6
0
数据库中间件MyCat

什么是MyCat? 查看官网的介绍是这样说的 一个彻底开源的,面向企业应用开发的大数据库集群 支持事务、ACID、可以替代MySQL的加强版数据库 一个可以视为MySQL集群的企业级数据库,用来替代昂贵...

沉浮_
昨天
6
0
解决Mac下VSCode打开zsh乱码

1.乱码问题 iTerm2终端使用Zsh,并且配置Zsh主题,该主题主题需要安装字体来支持箭头效果,在iTerm2中设置这个字体,但是VSCode里这个箭头还是显示乱码。 iTerm2展示如下: VSCode展示如下: 2...

HelloDeveloper
昨天
7
0
常用物流快递单号查询接口种类及对接方法

目前快递查询接口有两种方式可以对接,一是和顺丰、圆通、中通、天天、韵达、德邦这些快递公司一一对接接口,二是和快递鸟这样第三方集成接口一次性对接多家常用快递。第一种耗费时间长,但是...

程序的小猿
昨天
10
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部