资讯专栏INFORMATION COLUMN

节点操作

MiracleWong / 2714人阅读

Dom节点操作方法

1.访问/获取节点
返回对拥有指定id的第一个对象进行访问

document.getElementById(id);

返回带有指定名称的节点集合   注意拼写:Elements

document.getElementsByName(name);

    
返回带有指定标签名的对象集合  注意拼写:Elements

document.getElementsByTagName(tagname);

  
返回带有指定class名称的对象集合 注意拼写:Elements

document.getElementsByClassName(classname)

2.创建节点/属性
创建一个节点

document.createElement(eName);

 
对某个节点创建属性

document.createAttribute(attrName);

创建文本节点

document.createTextNode(text);

3.添加节点
在某个节点前插入节点

document.insertBefore(newNode,referenceNode);

 
给某个节点添加子节点

parentNode.appendChild(newNode);

4.复制节点
复制某个节点 参数:是否复制原节点的所有属性

cloneNode(true | false);

5.删除节点
删除某个节点的子节点 node是要删除的节点

parentNode.removeChild(node);

注意:为了保证兼容性,要判断元素节点的节点类型(nodeType),若nodeType==1,再执行删除操作。通过这个方法,就可以在 IE和 Mozilla 完成正确的操作。

nodeType 属性可返回节点的类型.最重要的节点类型是:
元素类型 节点类型
元素element
属性attr
文本text
注释comments
文档document

6.修改文本节点

将data加到文本节点后面

appendData(data);

将从start处删除length个字符

deleteData(start,length);

在start处插入字符,start的开始值是0;

insertData(start,data);

在start处用data替换length个字符

replaceData(start,length,data);    

在offset处分割文本节点

splitData(offset);

从start处提取length个字符

substringData(start,length);


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

getAttribute(name)

修改某个节点属性的值

setAttribute(name,value); 

删除某个属性

removeAttribute(name); 

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

parentObj.firstChild;  
parentObj.firstChild.firstChild

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

parentObj.lastChild;  
parentObj.lastChild.lastChild

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

parentObj.childNodes; 

9.获取相邻的节点
获取已知节点的相邻的上一个节点

curtNode.previousSibling;

获取已知节点的下一个节点

curtNode.nextSlbling;

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

childNode.parentNode;

11.替换节点

replace(newNode,oldNode);

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/98174.html

相关文章

  • 公有云端USDP集群资源节点管理 智能大数据平台 USDP

    摘要:目前暂不支持用户主动对主节点监控节点的删除操作。不允许对节点执行删除操作,且节点至少保留台。方式三通过云主机内网进行登录。当需要通过云主机登陆大数据集群节点时,请留意云主机与大数据集群的内网是否可达,如在同一中,或不同设置了互通。 公有云端USDP集群资源节点管理本篇目录添加节点资源删除节点资源绑定EIP、设置防火墙资源节点登录节点基本操作通过本章节介绍,即可对USDP集群的所有公有云端集群...

    ernest.wang 评论0 收藏708
  • 图解SynchronousQueue原理详解-公平模式

    摘要:如果节点不为说明已经有其他线程进行操作将节点替换为节点等待有消费者消费线程。如果头节点下一个节点是当前节点以防止其他线程已经修改了节点则运算,否则直接返回。 一、介绍 SynchronousQueue是一个双栈双队列算法,无空间的队列或栈,任何一个对SynchronousQueue写需要等到一个对SynchronousQueue的读操作,反之亦然。一个读操作需要等待一个写操作,相当于是...

    jifei 评论0 收藏0
  • React 源码剖析系列 - 不可思议的 react diff

    摘要:目前,前端领域中势头正盛,使用者众多却少有能够深入剖析内部实现机制和原理。当发现节点已经不存在,则该节点及其子节点会被完全删除掉,不会用于进一步的比较。 目前,前端领域中 React 势头正盛,使用者众多却少有能够深入剖析内部实现机制和原理。本系列文章希望通过剖析 React 源码,理解其内部的实现原理,知其然更要知其所以然。 React diff 作为 Virtual DOM 的加速...

    shuibo 评论0 收藏0
  • 大牛整理的ZooKeeper笔记

    摘要:除此之外,它严格的序列访问控制意味着复杂的控制原语可以应用在客户端上。版本号对节点的每一个操作都将致使这个节点的版本号增加。事件是一次性的触发器,当的对象状态发生改变时,将会触发此对象上所对应的事件。节点事件节点的建立,删除,数据的修改。 目录 一、ZooKeeper概述 二、ZooKeeper数据模型 三、ZooKeeper服务中操作 四、Watch触发器 五、ZooKeeper应用...

    Noodles 评论0 收藏0
  • 图解AQS原理之ReentrantLock详解-非公平锁

    摘要:内部提供了两种的实现,一种公平模式,一种是非公平模式,如果没有特别指定在构造器中,默认是非公平的模式,我们可以看一下无参的构造函数。 概述 并发编程中,ReentrantLock的使用是比较多的,包括之前讲的LinkedBlockingQueue和ArrayBlockQueue的内部都是使用的ReentrantLock,谈到它又不能的不说AQS,AQS的全称是AbstractQueue...

    Clect 评论0 收藏0
  • 关于 MongoDB 复制集的几个问题

    摘要:所有的读操作都在复制集的从节点上执行。读操作会在复制集中网络延时最小的节点上进行,与节点类型无关。根据上面讲的,如果复制集的读选项是配置的。为了避免这种情况,提高服务的可用性,可以在服务器上部署一个投票节点。 为什么要使用复制集 1.备份数据通过自带的 mongo_dump/mongo_restore 工具也可以实现备份,但是毕竟没有复制集的自动同步备份方便。 2.故障自动转移部署了复...

    awokezhou 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<