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:得到已知节点的父节点
分享到:
相关推荐
3. document.getElementsByTagName(tagName):该方法是通过节点的 Tag 获取节点,同样该方法也是返回一个数组,例如:document.getElementsByTagName('A')将会返回页面上所有超链接节点。在获取节点之前,一般都是...
在"JS_操作节点.doc"中提到的是一些关键的节点属性和方法,它们构成了DOM操作的基础。 1. **Attributes**:这是一个只读属性,它存储了节点的所有属性,如HTML元素的`id`、`class`等。可以通过`element.attributes`...
本文将详细介绍JavaScript中的节点概念,包括节点的基本类型、属性以及如何通过JavaScript来操作这些节点。 #### 二、节点概述 在DOM中,所有的东西都是节点。DOM是一种树形结构,在这个结构中,每个节点代表一个...
JavaScript 操作 DOM 建立增加删除克隆访问节点示例宣贯 在 JavaScript 中,DOM(Document Object Model)是指文档对象模型,它是 HTML 和 XML 文档的编程接口。通过 DOM,我们可以动态地操作文档的结构、样式和...
在JavaScript中,为节点设置样式是一项基础且重要的任务,它使得网页内容能够根据用户的交互或者程序逻辑进行动态更新。动态绑定事件,特别是单击事件,是实现用户与页面交互的关键。接下来,我们将深入探讨如何使用...
/// <param name="index">父节点所处同名节点的位置 为0表明只有一个该节点 /// <param name="sonNode">该父节点下的子节点 /// <param name="grandSonNode">该父节点下的孙节点 为空表示没有该节点 /// <param ...
- 创建和插入节点:`document.createElement(tagName)` 创建新元素,`node.appendChild(child)` 在节点末尾添加子节点,`node.insertBefore(newChild, referenceChild)` 在指定子节点之前插入新节点。 - 删除节点:`...
当我们谈论访问某个页面节点时,通常是指通过JavaScript或DOM(Document Object Model)来操作这些元素。 DOM是浏览器解析HTML或XML文档后创建的一种树型结构,它将整个页面结构化为一个可编程的对象模型。我们可以...
5. `parentObj.getElementsByTagName(tagName)`:在父节点的所有子节点中查找指定类型的子节点,返回一个数组。 通过临近节点获取元素: 1. `neighbourNode.previousSibling`:获取当前节点的前一个相邻节点。 2. ...
d3.js是一个强大的JavaScript库,专为创建数据驱动的文档而设计,尤其擅长制作交互式和复杂的可视化图表。本篇文章将深入探讨如何利用d3.js插件构建动态拓扑图,并实现节点的动态增加与删除功能。 拓扑图是一种图形...
//JS实现treeview中选中父节点,子节点也选中,如果子节点全部选中,自动选中父节点 //仅支持TreeView //调用方法 TreeView.Attributes.Add("onclick", "OnTreeNodeChecked()");
4. **监听事件**:利用JSTree的事件系统,可以在节点操作时执行相应逻辑。 5. **操作API**:通过提供的API接口,可以实现节点的添加、删除、移动、展开和折叠等操作。 **优化技巧** 1. **延迟加载**:对于大型...
详细介绍了js获取asp.net treeview 控件点击节点的值。点击treeview节点不提交网页
在探讨JavaScript动态添加style节点的过程中,我们将重点阐述与JavaScript节点操作相关的技术细节。动态添加style节点的方法是Web开发中的常用技术,它允许我们在运行时根据特定的条件或事件向页面中插入样式规则。...
在JavaScript中,获取和操作DOM(Document Object Model)节点是网页动态交互的基础。本文将详细介绍几种常见的JavaScript获取节点的方法,并探讨如何读写属性节点。 首先,我们关注的是通过不同的方式来获取元素...
5. `parentObj.getElementsByTagName(tagName)`:与全局的`document.getElementsByTagName()`类似,但在特定的父节点范围内查找指定标签名的子节点。 此外,还可以通过临近节点获取元素: 1. `neighbourNode....
以上知识点涵盖了文件提供的关于JavaScript中DOM节点插入操作的主要概念和技术细节。掌握这些知识点,能够帮助开发者更有效地在Web页面上动态地添加、删除和修改节点,从而实现更丰富的用户交互和更动态的内容展示。
在JavaScript中,`cloneNode()`方法是DOM(Document Object Model)操作中的一个重要功能,主要用于复制(克隆)DOM树中的节点及其属性。这对于创建复杂的用户界面或者动态调整页面内容时非常有用。 #### 一、...
js实现节点可拖动的树! 值得下载看看!资源免费,大家分享!! 更多免费资源 http://ynsky.download.csdn.net/
在IT行业中,JavaScript(JS)和Vue.js框架的结合经常被用于构建交互性强、功能丰富的Web应用程序。在本示例中,“js\vue版 工作流 节点 连线”指的是一个使用Vue.js实现的工作流系统,它允许用户通过可视化方式创建...