`
anson_xu
  • 浏览: 511939 次
  • 性别: Icon_minigender_1
  • 来自: 惠州
社区版块
存档分类

JavaScript中的Node相关内容介绍

阅读更多
JavaScript中的Node相关内容介绍

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
分享到:
评论

相关推荐

    Leanpub.JavaScript.and.Node.FUNdamentals.May.2014

    本书《Leanpub.JavaScript.and.Node.FUNdamentals.May.2014》由Azat Mardan撰写,是一本详细介绍JavaScript及其在Node.js环境中应用的基础教程。本书不仅涵盖了JavaScript的基本语法和特性,还深入探讨了如何使用...

    服务器端JavaScript之Node.js

    在当今的Web开发领域,JavaScript不再仅仅局限于浏览器中的客户端编程,而是通过Node.js拓展到了服务器端。Node.js是一个开放源代码、跨平台的JavaScript运行环境,它允许开发者使用JavaScript编写服务器端应用,极...

    Node.js Javascript运行环境(runtime environment)

    Node.js是一个Javascript运行环境(runtime environment),发布于2009年5月,由Ryan Dahl开发,实质是对Chrome V8引擎进行了封装。Node.js对一些特殊用例进行优化,提供替代的API,使得V8在非浏览器环境下运行得更好...

    Professional Node.js Building Javascript Based Scalable Software

    - 介绍了Node.js中的流概念,以及如何使用流来进行高效的数据传输。 - 探讨了不同类型的流,如可读流、可写流、双工流和转换流。 - **构建TCP服务器**(第10章) - 深入探讨了TCP协议的基础知识,并展示了如何...

    Smashing Node.js JavaScript Everywhere

    标题“Smashing Node.js JavaScript Everywhere”和描述指向了Node.js的应用以及JavaScript的普及性,强调了Node.js在开发高效Web应用中的作用,以及以JavaScript为单一语言的开发优势。标签“node.js javascript”...

    Node.js英文书籍2014出版共14本(一次下载)

    JavaScript and Node FUNdamentals (LeanPub 2014).pdf Learning Single-page Web App Development (Node, MongoDB, AngularJS)(Packt 2014).epub Learning Web App Development (JavaScript, Node, MongoDB, jQuery...

    JavaScript+jQuery Mobile+Node.js跨平台网页设计附书源码

    JavaScript,jQuery Mobile和Node.js是现代网页开发中的关键技术,它们各自扮演着不同的角色,而将它们结合起来可以创建出强大的、跨平台的网页应用。在这个项目中,我们看到这三个技术的融合,为开发者提供了从桌面...

    unpkg_Node.js_nodejscdn_javascript_CDN_

    标题 "unpkg_Node.js_nodejscdn_javascript_CDN_" 指向的是一个与 Node.js、nodejscdn 和 JavaScript CDN 相关的服务源代码。在这个项目中,开发者可能创建了一个工具或服务,允许用户通过 CDN(内容分发网络)快速...

    Node.js-一个Node.jsWebSockets开发JavaScript终端模拟器

    标题中的“Node.js-一个Node.jsWebSockets开发JavaScript终端模拟器”表明我们要讨论的是一个使用Node.js技术栈创建的项目,它具有WebSockets功能,用于开发JavaScript的终端模拟器。这个项目可能是为了提供一个交互...

    Smashing Node.js JavaScript Everywhere 无水印pdf

    Smashing Node.js JavaScript Everywhere 英文无水印pdf pdf所有页面使用FoxitReader和PDF-XChangeViewer测试都可以打开 本资源转载自网络,如有侵权,请联系上传者或csdn删除 本资源转载自网络,如有侵权,请...

    Node中文完美入门教程

    5. Node.js的高级JavaScript知识:书中不仅会涉及到JavaScript的高级概念,还会探讨这些概念在Node.js中的实际应用,以及为什么这些概念在Node.js中能实现而在其他编程语言中无法实现。 6. 完整Web应用的构建:教程...

    node-firebird, 纯javascript和 node.js的异步 firebird 客户端.zip

    node-firebird, 纯javascript和 node.js的异步 firebird 客户端 用于 Node.js.的纯 JavaScript firebird-客户端纯JavaScript和 node.js的异步 firebird 客户端。 firebird 论坛在Google网上论坛。社交

    01-Node.js介绍.zip

    Node.js是一个Javascript运行环境(runtime environment),发布于2009年5月,由Ryan Dahl开发,实质是对Chrome V8引擎进行了封装。Node.js 不是一个 JavaScript 框架,不同于CakePHP、Django、Rails。Node.js 更不是...

    Node.js-CodyCMS-Javascript内容管理系统运行在Node.js之上

    CodyCMS是一款基于Node.js开发的内容管理系统(CMS),专门利用JavaScript语言编写,旨在为用户提供快速、简洁且可定制的内容管理解决方案。CodyCMS设计的目标是让用户能够轻松地创建、管理和发布网站内容,无需深入...

    Professional Node.js-Building Javascript Based Scalable Software

    本书《Professional Node.js: Building JavaScript Based Scalable Software》深入讲解了如何使用Node.js构建可扩展的软件,并将重点放在了基于JavaScript的开发上。全书分为几个主要部分,覆盖了Node.js的安装与...

    telegram-mt-node, 电报MTProto库( javascript,node.js ).zip

    telegram-mt-node, 电报MTProto库( javascript,node.js ) telegram-mt-node 电报移动协议 ( MTProto ) unofficial在 node.js 平台上的纯收费 javascript javascript关于 MTProto 。收费 MTProt

    基于HTML和JavaScript的Node学习测试源码

    本项目是一套Node学习测试源码,采用HTML和JavaScript编写,并包含Python辅助脚本。项目共包含22个文件,其中HTML文件7个,JavaScript文件5个,文本文件3个,Markdown文件2个,Python文件2个,SQL文件2个,图片文件1...

    node-ffi是一个Node.js插件用于使用纯JavaScript加载和调用动态库

    在Node.js中,这意味着你可以利用JavaScript调用C、C++等编写的原生库,极大地扩展了Node.js的应用范围。例如,你可以使用`node-ffi`来访问操作系统API,或者调用那些没有JavaScript接口的高性能计算库。 要使用`...

    node即学即用 (英文版) Node: Up and Running, Scalable Server-Side Code with JavaScript

    书中的内容涵盖了Node.js的核心概念以及如何在服务器端进行事件驱动开发。阅读本书,读者将能够了解到如何处理跨服务器的并发连接,掌握非阻塞I/O和事件驱动编程的技巧,并且学会如何在Node.js环境中支持和使用各种...

Global site tag (gtag.js) - Google Analytics