`

js操作节点,ID,name,calssname,tag,style

    博客分类:
  • js
阅读更多
1.访问节点
document.getElementById(id);
返回对拥有指定id的第一个对象进行访问

document.getElementsByName(name);
返回带有指定名称的节点集合
注意:Elements

document.getElementsByTagName(tagname);
返回带有指定标签名的对象集合
注意:Elements

document.getElementsByClassName(classname);
返回带有指定class名称的对象集合
注意:Elements

2.生成节点
document.createElement(eName);
创建一个节点

document.createAttribute(attrName);
对某个节点创建属性

document.createTextNode(text);
创建文本节点

3.添加节点
document.insertBefore(newNode,referenceChild);
在某个节点前插入节点

parentNode.appendChild(newNode);
给某个节点添加子节点

4.复制节点
cloneNode(true | false);
复制某个节点
参数:是否复制原节点的所有属性

5.删除节点
parentNode.removeChild(node)
删除某个节点的子节点
node是要删除的节点
注意:IE会忽略节点间生成的空白文本节点(例如,换行符号),而Mozilla不会这样做。在删除指定节点的时候不会出错,但是如果要删除最后一个子结点或者是第一个子结点的时候,就会出现问题。这时候,就需要用一个函数来判断首个子结点的节点类型。
元素节点的节点类型是 1,因此如果首个子节点不是一个元素节点,它就会移至下一个节点,然后继续检查此节点是否为元素节点。整个过程会一直持续到首个元素子节点被找到为止。通过这个方法,我们就可以在 Internet Explorer 和 Mozilla 得到正确的方法。

6.修改文本节点
appendData(data);
将data加到文本节点后面

deleteData(start,length);
将从start处删除length个字符

insertData(start,data)
在start处插入字符,start的开始值是0;

replaceData(start,length,data)
在start处用data替换length个字符

splitData(offset)
在offset处分割文本节点

substringData(start,length)
从start处提取length个字符

7.属性操作
getAttribute(name)
通过属性名称获取某个节点属性的值

setAttribute(name,value);
修改某个节点属性的值

removeAttribute(name)
删除某个属性

8.查找节点
parentObj.firstChild
如果节点为已知节点的第一个子节点就可以使用这个方法。此方法可以递归进行使用
parentObj.firstChild.firstChild.....

parentObj.lastChild
获得一个节点的最后一个节点,与firstChild一样也可以进行递归使用
parentObj.lastChild.lastChild.....

parentObj.childNodes
获得节点的所有子节点,然后通过循环和索引找到目标节点

9.获取相邻的节点
neborNode.previousSibling :获取已知节点的相邻的上一个节点
nerbourNode.nextSlbling: 获取已知节点的下一个节点

10.获取父节点
childNode.parentNode:得到已知节点的父节点

分享到:
评论

相关推荐

    javascript获取指定节点父节点、子节点的方法

    3. document.getElementsByTagName(tagName):该方法是通过节点的 Tag 获取节点,同样该方法也是返回一个数组,例如:document.getElementsByTagName('A')将会返回页面上所有超链接节点。在获取节点之前,一般都是...

    示例4:操作节点属性.rar_javascript操作节点属性

    标题“示例4:操作节点属性.rar_javascript操作节点属性”表明我们将探讨如何修改和访问这些节点的属性。属性是元素的额外信息,例如`id`、`class`、`src`等。以下是一些常见的操作: 1. **获取属性值**:使用`...

    JS_操作节点.doc

    在"JS_操作节点.doc"中提到的是一些关键的节点属性和方法,它们构成了DOM操作的基础。 1. **Attributes**:这是一个只读属性,它存储了节点的所有属性,如HTML元素的`id`、`class`等。可以通过`element.attributes`...

    javascript 节点

    本文将详细介绍JavaScript中的节点概念,包括节点的基本类型、属性以及如何通过JavaScript来操作这些节点。 #### 二、节点概述 在DOM中,所有的东西都是节点。DOM是一种树形结构,在这个结构中,每个节点代表一个...

    JAVASCRIPT操作DOM建立增加删除克隆访问节点示例宣贯.pdf

    JavaScript 操作 DOM 建立增加删除克隆访问节点示例宣贯 在 JavaScript 中,DOM(Document Object Model)是指文档对象模型,它是 HTML 和 XML 文档的编程接口。通过 DOM,我们可以动态地操作文档的结构、样式和...

    javascript为节点设置样式

    在JavaScript中,为节点设置样式是一项基础且重要的任务,它使得网页内容能够根据用户的交互或者程序逻辑进行动态更新。动态绑定事件,特别是单击事件,是实现用户与页面交互的关键。接下来,我们将深入探讨如何使用...

    C# xml多个同名节点操作

    /// <param name="index">父节点所处同名节点的位置 为0表明只有一个该节点 /// <param name="sonNode">该父节点下的子节点 /// <param name="grandSonNode">该父节点下的孙节点 为空表示没有该节点 /// <param ...

    javascript节点操作DOM属性和方法

    - 创建和插入节点:`document.createElement(tagName)` 创建新元素,`node.appendChild(child)` 在节点末尾添加子节点,`node.insertBefore(newChild, referenceChild)` 在指定子节点之前插入新节点。 - 删除节点:`...

    练习2:访问当当购物车页面节点

    当我们谈论访问某个页面节点时,通常是指通过JavaScript或DOM(Document Object Model)来操作这些元素。 DOM是浏览器解析HTML或XML文档后创建的一种树型结构,它将整个页面结构化为一个可编程的对象模型。我们可以...

    d3.js插件 拓扑图 动态增加、删除节点

    d3.js是一个强大的JavaScript库,专为创建数据驱动的文档而设计,尤其擅长制作交互式和复杂的可视化图表。本篇文章将深入探讨如何利用d3.js插件构建动态拓扑图,并实现节点的动态增加与删除功能。 拓扑图是一种图形...

    javascript获取指定节点父节点、子节点的方法.pdf

    5. `parentObj.getElementsByTagName(tagName)`:在父节点的所有子节点中查找指定类型的子节点,返回一个数组。 通过临近节点获取元素: 1. `neighbourNode.previousSibling`:获取当前节点的前一个相邻节点。 2. ...

    JS实现treeview中选中父节点,子节点也选中,如果子节点全部选中,自动选中父节点

    //JS实现treeview中选中父节点,子节点也选中,如果子节点全部选中,自动选中父节点 //仅支持TreeView //调用方法 TreeView.Attributes.Add("onclick", "OnTreeNodeChecked()");

    JSTree(js写的树形菜单,支持加载10000节点以上)

    4. **监听事件**:利用JSTree的事件系统,可以在节点操作时执行相应逻辑。 5. **操作API**:通过提供的API接口,可以实现节点的添加、删除、移动、展开和折叠等操作。 **优化技巧** 1. **延迟加载**:对于大型...

    js获取treeview点击节点的值

    详细介绍了js获取asp.net treeview 控件点击节点的值。点击treeview节点不提交网页

    JavaScript动态添加style节点的方法

    在探讨JavaScript动态添加style节点的过程中,我们将重点阐述与JavaScript节点操作相关的技术细节。动态添加style节点的方法是Web开发中的常用技术,它允许我们在运行时根据特定的条件或事件向页面中插入样式规则。...

    js获取节点方法1

    在JavaScript中,获取和操作DOM(Document Object Model)节点是网页动态交互的基础。本文将详细介绍几种常见的JavaScript获取节点的方法,并探讨如何读写属性节点。 首先,我们关注的是通过不同的方式来获取元素...

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

    5. `parentObj.getElementsByTagName(tagName)`:与全局的`document.getElementsByTagName()`类似,但在特定的父节点范围内查找指定标签名的子节点。 此外,还可以通过临近节点获取元素: 1. `neighbourNode....

    JS实现DOM节点插入操作之子节点与兄弟节点插入操作示例

    以上知识点涵盖了文件提供的关于JavaScript中DOM节点插入操作的主要概念和技术细节。掌握这些知识点,能够帮助开发者更有效地在Web页面上动态地添加、删除和修改节点,从而实现更丰富的用户交互和更动态的内容展示。

    javascript 拷贝节点cloneNode()使用介绍.docx

    在JavaScript中,`cloneNode()`方法是DOM(Document Object Model)操作中的一个重要功能,主要用于复制(克隆)DOM树中的节点及其属性。这对于创建复杂的用户界面或者动态调整页面内容时非常有用。 #### 一、...

    js实现节点可拖动的树

    js实现节点可拖动的树! 值得下载看看!资源免费,大家分享!! 更多免费资源 http://ynsky.download.csdn.net/

Global site tag (gtag.js) - Google Analytics