文章出自 : http://www.cnblogs.com/seamar/archive/2011/07/25/2116197.html
谢谢该文章的作者,帮助我解决了很大问题.
接口 |
nodeType常量 |
nodeType值 |
备注 |
Element |
Node.ELEMENT_NODE |
1 |
元素节点 |
Text |
Node.TEXT_NODE |
3 |
文本节点 |
Document |
Node.DOCUMENT_NODE |
9 |
document |
Comment |
Node.COMMENT_NODE |
8 |
注释的文本 |
DocumentFragment |
Node.DOCUMENT_FRAGMENT_NODE |
11 |
document片断 |
Attr |
Node.ATTRIBUTE_NODE |
2 |
节点属性 |
方法 |
描述 |
createAttribute() |
用指定的名字创建新的Attr节点。 |
createComment() |
用指定的字符串创建新的Comment节点。 |
createElement() |
用指定的标记名创建新的Element节点。 |
createTextNode() |
用指定的文本创建新的TextNode节点。 |
getElementById() |
返回文档中具有指定id属性的Element节点。 |
getElementsByTagName() |
返回文档中具有指定标记名的所有Element节点。 |
属性 |
描述 |
attributes |
如果该节点是一个Element,则以NamedNodeMap形式返回该元素的属性。 |
childNodes |
以Node[]的形式存放当前节点的子节点。如果没有子节点,则返回空数组。 |
firstChild |
以Node的形式返回当前节点的第一个子节点。如果没有子节点,则为null。 |
lastChild |
以Node的形式返回当前节点的最后一个子节点。如果没有子节点,则为null。 |
nextSibling |
以Node的形式返回当前节点的兄弟下一个节点。如果没有这样的节点,则返回null。下一个兄弟节点 |
nodeName |
节点的名字,Element节点则代表Element的标记名称。 |
nodeType |
代表节点的类型。 |
parentNode |
以Node的形式返回当前节点的父节点。如果没有父节点,则为null。 |
previousSibling |
以Node的形式返回紧挨当前节点、位于它之前的兄弟节点。如果没有这样的节点,则返回null。上一个兄弟节点 |
方法 |
描述 |
appendChild() |
通过把一个节点增加到当前节点的childNodes[]组,给文档树增加节点。 |
cloneNode() |
复制当前节点,或者复制当前节点以及它的所有子孙节点。 |
hasChildNodes() |
如果当前节点拥有子节点,则将返回true。 |
insertBefore() |
给文档树插入一个节点,位置在当前节点的指定子节点之前。如果该节点已经存在,则删除之再插入到它的位置。 |
removeChild() |
从文档树中删除并返回指定的子节点。 |
replaceChild() |
从文档树中删除并返回指定的子节点,用另一个节点替换它。 |
相关推荐
本文主要介绍了如何使用JavaScript...这涉及到对DOM操作的理解和对特定方法的应用,对于前端开发者来说是一项基础且重要的技能。掌握了这些知识点,开发者可以更加灵活地处理页面元素,进行动态的内容修改或交互设计。
幸运的是,在 JavaScript 中有多种方法可以用来获取 DOM 节点,下面将对这些方法进行详细的介绍。 #### 一、通过 `document` 获取 1. **`document.getElementById(elementId)`** - **说明**:通过元素的 ID 来...
6. 脚本编辑:可能支持直接在浏览器环境中编写和运行JavaScript代码,进行更复杂的DOM操作。 由于文件列表中只有一个名为"Plug-in unit"的条目,这可能是插件的主要代码单元或组件。它可能包含了实现上述功能的...
JavaScript获取HTML DOM节点元素的方法是Web开发中的基础技能,尤其是在动态更新页面内容时。本文将对几种常见的DOM操作方法进行详细解释。 首先,我们可以通过顶层的`document`对象来获取元素: 1. `document....
本实践项目“js_HTML_Dom操作练习”旨在帮助初学者熟悉DOM的基本操作,包括查找、修改和添加网页元素。在这个过程中,我们将探讨几个关键的DOM接口和方法,以加深对JavaScript与HTML交互的理解。 1. **获取元素**:...
JS中的DOM操作是JavaScript与网页交互的核心技术,用于动态更新、添加、删除和修改HTML或XML文档中的元素。DOM(Document Object Model)是一种标准,它将网页内容组织成一棵结构化的节点树,允许通过编程方式对这些...
理解并熟练掌握JavaScript DOM操作是成为一名优秀前端开发者的关键,这不仅能让你更好地控制网页动态行为,还能提升用户体验,使网页更具互动性和吸引力。在实际项目中,结合现代前端框架,DOM操作的效率和灵活性将...
在这个“Javascript_Dom操作案例”中,我们将深入探讨如何利用JavaScript有效地操纵DOM元素,提升用户体验并实现动态网页功能。 1. **DOM基本概念**: DOM是一种标准,用于表示HTML或XML文档的树形结构。每个节点...
总的来说,这个项目将强化你对原生JavaScript和DOM操作的理解,特别是如何利用数组方法来处理DOM节点,提高代码的效率和可读性。通过实践,你会更加熟练地驾驭DOM,为构建交互式Web应用打下坚实的基础。在实际工作中...
对于更复杂的DOM操作,如遍历和修改DOM树,可以使用`querySelectorAll`配合循环,或者使用`documentfragment`进行批量操作以提高性能。 最后,`DOM文档对象中文手册.chm`可能包含了关于DOM的详细中文参考资料,对于...
例如,当使用ElementUI的树形组件来渲染结构,并且需要在鼠标移入节点时显示操作按钮,如果在新增节点后立即尝试获取节点进行操作,可能会得到更新前的DOM结构。具体表现为,如果在新增节点后立即进行DOM操作,可能...
**JS DOM操作备忘** 在JavaScript中,DOM(Document Object Model)是HTML和XML文档的结构化表示,它提供了一种标准的方式来访问和修改页面内容。这篇备忘将深入探讨如何利用JavaScript进行DOM操作,包括选择元素、...
"原生js操作dom实现上下左右移动" 本文将详细讲解如何使用原生JavaScript操作DOM实现上下左右移动的功能。首先,我们需要了解什么是DOM,以及如何使用JavaScript来操作DOM。 DOM(Document Object Model,文档对象...
在这个压缩包文件“javascript_DOM操作.rar”中,我们可以找到一个名为“javascript_DOM操作.docx”的文档,它很可能是详细介绍了JavaScript与DOM交互的相关知识。 首先,DOM是网页内容的树状表示,它将HTML或XML...
下面将详细阐述在JavaScript中如何进行DOM操作。 1. **访问相关的节点**: 访问DOM节点通常通过`getElementById`、`getElementsByClassName`、`getElementsByTagName`、`querySelector`和`querySelectorAll`等方法...
6. **Web性能优化**:转换DOM到图像可能会涉及大量计算,因此理解性能优化技巧,如延迟加载、异步处理、减少DOM操作等,对于优化这个过程至关重要。 7. **跨域问题**:由于同源策略的限制,当涉及到图片的跨域请求...
通过以上这些DOM操作,开发者可以构建动态交互的网页应用。了解并熟练运用这些方法,将有助于提升JavaScript编程能力,特别是在需要频繁与DOM交互的项目中。这份资料中的例子将帮助你更好地理解和应用这些知识点。
2. **节点属性**:每个节点都有属性,如`nodeType`表示节点类型,`nodeValue`获取或设置文本节点的值,`parentNode`指向父节点,`childNodes`包含子节点列表。 3. **创建和插入节点**:可以使用`document....