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
分享到:
相关推荐
Learn to build fast and scalable software in JavaScript with Node.js Node.js is a powerful and popular new framework for writing scalable network programs using JavaScript. This no nonsense book ...
Node.js是一个Javascript运行环境(runtime environment),发布于2009年5月,由Ryan Dahl开发,实质是对Chrome V8引擎进行了封装。Node.js对一些特殊用例进行优化,提供替代的API,使得V8在非浏览器环境下运行得更好...
JavaScript跨域 node example.
Leanpub.JavaScript.and.Node.FUNdamentals.May.2014
服务器端JavaScript之利器Node.js
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...
资源名称:Node.js参考手册 中文CHM版内容简介:简单的说Node.js就是运行在服务端的 Javascript。Node.js 是一个基于Chrome Javascript 运行时建立的一个平台。本文给大家带来Node.js参考手册,需要的...
Smashing Node.js JavaScript Everywhere 英文无水印pdf pdf所有页面使用FoxitReader和PDF-XChangeViewer测试都可以打开 本资源转载自网络,如有侵权,请联系上传者或csdn删除 本资源转载自网络,如有侵权,请...
this指触发事件的对象,接下来为大家分享下javascript中onclick(this)的用法,感兴趣的朋友可以参考下哈,希望对你有所帮助
node-firebird, 纯javascript和 node.js的异步 firebird 客户端 用于 Node.js.的纯 JavaScript firebird-客户端纯JavaScript和 node.js的异步 firebird 客户端。 firebird 论坛在Google网上论坛。社交
Node.js是一个Javascript运行环境(runtime environment),发布于2009年5月,由Ryan Dahl开发,实质是对Chrome V8引擎进行了封装。Node.js 不是一个 JavaScript 框架,不同于CakePHP、Django、Rails。Node.js 更不是...
使用node.js进行服务器端JavaScript编程 node.js 是一个可以使用 JavaScript 开发服务器端应用的平台。它依托于 Google V8 ...本文详细介绍了 node.js 的基本知识、模块化的结构、事件驱动的机制以及常用的模块。
telegram-mt-node, 电报MTProto库( javascript,node.js ) telegram-mt-node 电报移动协议 ( MTProto ) unofficial在 node.js 平台上的纯收费 javascript javascript关于 MTProto 。收费 MTProt
Smashing Node.js: JavaScript Everywhere equips you with the necessary tools to understand Node.js and its uses in developing efficient web apps. With more traditional web servers becoming obsolete, ...
对JavaScript和node.js研究并实现WEB聊天系统
Javascript 后端的字符串像素宽度测量。 支持的字体: Andale Mono Arial Avenir Avenir Next Comic Sans MS Courier New Georgia Helvetica Impact Times New Roman Trebuchet MS Verdana Webdings Open Sans ...
JavaScript+jQuery Mobile+Node.js跨平台网页设计附书源码,供大家学习用。
Node.js 应用程序是用 JavaScript 编写的,可以在 Mac OS X、Windows 和 Linux 上的 Node.js 运行时中运行而无需更改。 Node.js 应用程序旨在最大限度地提高吞吐量和效率,使用非阻塞 I/O 和异步事件。Node.js 应用...
《node即学即用》讲解如何用node 构建可扩展因特网应用,是全面的实用指南,除了详细介绍node 提供的api 外,还用大量篇幅介绍了服务器事件驱动开发的重要概念。内容涉及跨服务器的并发连接、非阻塞i/o 和事件驱动的...
Cody CMS - Javascript 内容管理系统运行在Node.js之上