一、Node
DOM模型定义了Node接口,在DOM中的每个节点都是一个Node(即实现了Node接口),每个Node都有自身的Node类型,可以通过nodeType属性返回的数值区分,以下是各种节点类型所对应的数值:
Node.ELEMENT_NODE: 1
Node.ATTRIBUTE_NODE: 2
Node.TEXT_NODE: 3
Node.CDATA_SECTION_NODE: 4
Node.ENTITY_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
Node.NOTATION_NODE: 12
知道了这些信息之后,可以通过以下方法判断节点对象的类型:
//IE9以下不支持 if (someNode.nodeType == Node.ELEMENT_NODE){ alert("Node is an element."); } //所有浏览器都支持 if (someNode.nodeType == 1){ alert("Node is an element."); }
要获得Node的信息,使用以下方法:
var divNode = document.createElement("div"); var textNode = document.createTextNode("Text Node"); alert(divNode.nodeName); //DIV alert(divNode.nodeValue); //null alert(textNode.nodeName); //#text alert(textNode.nodeValue); //Text Node
二、Node关系相关的属性
var node = document.getElementById("test"); //上一个兄弟节点 var prevSibling = node.previousSibling; //下一个兄弟节点 var nextSibling = node.nextSibling; //所有(一级)子节点 var childNodes = node.childNodes; //父节点 var parentNode = node.parentNode; //第一个(一级)子节点 var firstChildNode = node.firstChild; //最优一个(一级)子节点 var lastChildNode = node.lastChild; //是否存在子节点 var hasChildNodes = node.hasChildNodes();
三、操纵Nodes
//创建Element节点 var newNode = document.createElement("div"); //创建文本节点 var textNode = document.createTextNode("Created text node"); //复制textNode节点 //参数deep代表是否进行深克隆,若为true,则同时复制子节点 var textNode2 = textNode.cloneNode(false); var node = document.getElementById("test"); //把newNode插入为node的最后一个子节点 node.appendChild(newNode); newNode.appendChild(textNode); //把textNode2插入到textNode之前 node.insertBefore(textNode2, newNode); //从node中移除textNode2(保持被移除元素的引用) var removedChildNode = node.removeChild(textNode2); //用removedChildNode替换newNode node.replaceChild(removedChildNode, newNode); //当某个节点存在两个或以上的相邻的文本节点时, //可以用normalize()方法合并文本节点 node.normalize();
相关推荐
javascript_DOM,javascript_DOM,javascript_DOM,javascript_DOM
JavaScript之DOM事件(源代码)JavaScript之DOM事件(源代码)JavaScript之DOM事件(源代码)JavaScript之DOM事件(源代码)JavaScript之DOM事件(源代码)JavaScript之DOM事件(源代码)JavaScript之DOM事件(源...
JavaScript_DOM编程艺术第二版(中文),欢迎下载,111111111111111111111
javaScript-DOM编程艺术javaScript-DOM编程艺术javaScript-DOM编程艺术javaScript-DOM编程艺术
简介 这篇文章简单介绍了DOM 1.0一些基本而强大的方法以及如何在JavaScript中使用它们。你可以学到如何动态地创建、获取、控制和删除HTML元素。这些DOM方法同样适用于XML。所有全面支持DOM 1.0的浏览器都能很好地...
JavaScript.DOM编程艺术(第2版)附录及源码,JavaScript.DOM编程艺术(第2版)附录及源码
Beginning JavaScript with DOM Scripting and Ajax is an essential resource for modern JavaScript programming. This completely updated second edition covers everything you need to know to get up-to-...
经典之作《javascript dom编程艺术》源码。通过一个实际案例,讲述了原生的javascript操作dom的使用方法,以及操作dom中应该注意的一些事项。
读者将看到JavaScript、 HTML5和CSS如何协作来创建易用的、与标准兼容的Web设计,掌握使用JavaScript和DOM通过客户端动态效果和用户控制的动画来加强 Web页面的必备技术;同时,还将对如何利用库提高开发效率有全面...
javascript_DOM操作.rar
JavaScript & DOM Enlightenment JavaScript & DOM Enlightenment JavaScript & DOM Enlightenment
纯Java范例该存储库包含使用纯JavaScript与dom交互的不同示例。 目的是提供无需jQuery就可以与dom进行交互的不同方式。 当前实例遍历-提供有关如何上下移动dom的不同方式的示例。 creation-elements-提供有关如何在...
Beginning JavaScript with DOM Scripting and Ajax, 2nd Edition (pdf + ePub) by Russ Ferguson and Christian Heilmann Publisher: Apress; 2nd Edition (July 2013) Language: English ISBN-10: 1430250925 ...
《javascript dom编程艺术:第2版》讲述了javascript、dom 和html5 的基础知识,着重介绍dom 编程技术背后的思路和原则:平稳退化、渐进增强和以用户为中心等。这些概念对于任何前端web 开发工作都非常重要。本书将...
JavaScript DOM编程艺术 --全
Beginning JavaScript with DOM Scripting and Ajax
JavaScript.DOM高级程序设计.pdf
JavaScriptDOM编程艺术(第2版)PDF版本下载
《javascript dom编程艺术:第2版》讲述了javascript、dom 和html5 的基础知识,着重介绍dom 编程技术背后的思路和原则:平稳退化、渐进增强和以用户为中心等。这些概念对于任何前端web 开发工作都非常重要。本书将...