`

js获取节点 dom操作(转)

阅读更多

 

文章出自 : 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中class的方法

    本文主要介绍了如何使用JavaScript...这涉及到对DOM操作的理解和对特定方法的应用,对于前端开发者来说是一项基础且重要的技能。掌握了这些知识点,开发者可以更加灵活地处理页面元素,进行动态的内容修改或交互设计。

    js获取HTML DOM节点详解

    幸运的是,在 JavaScript 中有多种方法可以用来获取 DOM 节点,下面将对这些方法进行详细的介绍。 #### 一、通过 `document` 获取 1. **`document.getElementById(elementId)`** - **说明**:通过元素的 ID 来...

    谷歌获取网页dom的插件

    6. 脚本编辑:可能支持直接在浏览器环境中编写和运行JavaScript代码,进行更复杂的DOM操作。 由于文件列表中只有一个名为"Plug-in unit"的条目,这可能是插件的主要代码单元或组件。它可能包含了实现上述功能的...

    JavaScript获取HTML DOM节点元素的方法的总结

    JavaScript获取HTML DOM节点元素的方法是Web开发中的基础技能,尤其是在动态更新页面内容时。本文将对几种常见的DOM操作方法进行详细解释。 首先,我们可以通过顶层的`document`对象来获取元素: 1. `document....

    js_HTML_Dom操作练习

    本实践项目“js_HTML_Dom操作练习”旨在帮助初学者熟悉DOM的基本操作,包括查找、修改和添加网页元素。在这个过程中,我们将探讨几个关键的DOM接口和方法,以加深对JavaScript与HTML交互的理解。 1. **获取元素**:...

    JS的简单DOM操作

    JS中的DOM操作是JavaScript与网页交互的核心技术,用于动态更新、添加、删除和修改HTML或XML文档中的元素。DOM(Document Object Model)是一种标准,它将网页内容组织成一棵结构化的节点树,允许通过编程方式对这些...

    javascript_DOM操作

    理解并熟练掌握JavaScript DOM操作是成为一名优秀前端开发者的关键,这不仅能让你更好地控制网页动态行为,还能提升用户体验,使网页更具互动性和吸引力。在实际项目中,结合现代前端框架,DOM操作的效率和灵活性将...

    Javascript_Dom操作案例

    在这个“Javascript_Dom操作案例”中,我们将深入探讨如何利用JavaScript有效地操纵DOM元素,提升用户体验并实现动态网页功能。 1. **DOM基本概念**: DOM是一种标准,用于表示HTML或XML文档的树形结构。每个节点...

    原生JS经典小项目-DOM练习

    总的来说,这个项目将强化你对原生JavaScript和DOM操作的理解,特别是如何利用数组方法来处理DOM节点,提高代码的效率和可读性。通过实践,你会更加熟练地驾驭DOM,为构建交互式Web应用打下坚实的基础。在实际工作中...

    javascript节点操作DOM属性和方法

    对于更复杂的DOM操作,如遍历和修改DOM树,可以使用`querySelectorAll`配合循环,或者使用`documentfragment`进行批量操作以提高性能。 最后,`DOM文档对象中文手册.chm`可能包含了关于DOM的详细中文参考资料,对于...

    解决vue页面DOM操作不生效的问题

    例如,当使用ElementUI的树形组件来渲染结构,并且需要在鼠标移入节点时显示操作按钮,如果在新增节点后立即尝试获取节点进行操作,可能会得到更新前的DOM结构。具体表现为,如果在新增节点后立即进行DOM操作,可能...

    JS DOM操作备忘

    **JS DOM操作备忘** 在JavaScript中,DOM(Document Object Model)是HTML和XML文档的结构化表示,它提供了一种标准的方式来访问和修改页面内容。这篇备忘将深入探讨如何利用JavaScript进行DOM操作,包括选择元素、...

    原生js操作dom实现上下左右移动.docx

    "原生js操作dom实现上下左右移动" 本文将详细讲解如何使用原生JavaScript操作DOM实现上下左右移动的功能。首先,我们需要了解什么是DOM,以及如何使用JavaScript来操作DOM。 DOM(Document Object Model,文档对象...

    javascript_DOM操作.rar

    在这个压缩包文件“javascript_DOM操作.rar”中,我们可以找到一个名为“javascript_DOM操作.docx”的文档,它很可能是详细介绍了JavaScript与DOM交互的相关知识。 首先,DOM是网页内容的树状表示,它将HTML或XML...

    javascript 操作DOM

    下面将详细阐述在JavaScript中如何进行DOM操作。 1. **访问相关的节点**: 访问DOM节点通常通过`getElementById`、`getElementsByClassName`、`getElementsByTagName`、`querySelector`和`querySelectorAll`等方法...

    domtoimage使用HTML5canvas从DOM节点生成图像

    6. **Web性能优化**:转换DOM到图像可能会涉及大量计算,因此理解性能优化技巧,如延迟加载、异步处理、减少DOM操作等,对于优化这个过程至关重要。 7. **跨域问题**:由于同源策略的限制,当涉及到图片的跨域请求...

    JS操作DOM元素属性和方法大全

    通过以上这些DOM操作,开发者可以构建动态交互的网页应用。了解并熟练运用这些方法,将有助于提升JavaScript编程能力,特别是在需要频繁与DOM交互的项目中。这份资料中的例子将帮助你更好地理解和应用这些知识点。

    第06章 DOM节点操作(上)

    2. **节点属性**:每个节点都有属性,如`nodeType`表示节点类型,`nodeValue`获取或设置文本节点的值,`parentNode`指向父节点,`childNodes`包含子节点列表。 3. **创建和插入节点**:可以使用`document....

Global site tag (gtag.js) - Google Analytics