js操作node节点

1.访问节点
document.getElementById(id);
返回对拥有指定id的第一个对象进行访问

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

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

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:得到已知节点的父节点

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
在 G6 中,节点Node)默认是基于 SVG 技术实现的,不支持直接使用 HTML。如果想要在节点中使用 HTML,可以通过在节点上添加一个 HTML 元素的方式实现。 具体步骤如下: 1. 创建节点 使用 G6 提供的 API 创建节点,示例代码如下: ```javascript graph.addNode('node1', { x: 100, y: 100, size: 50, label: 'Node 1', }); ``` 其中,label 参数指定节点的文本标签。 2. 获取节点元素 使用 G6 提供的 find 方法获取节点的元素对象,示例代码如下: ```javascript const node = graph.find('node1'); const nodeElem = node.get('group').get('children')[0]; ``` 其中,get('group') 方法获取节点所在的 Group 对象,get('children') 方法获取 Group 中的子元素列表,[0] 表示获取第一个子元素,即节点的图形元素。 3. 添加 HTML 元素 在获取到节点的元素对象后,可以通过 JavaScript 动态添加 HTML 元素,示例代码如下: ```javascript const div = document.createElement('div'); div.innerHTML = '<p>Hello, G6!</p>'; nodeElem.appendChild(div); ``` 其中,createElemen() 方法用于创建一个新的 HTML 元素,innerHTML 属性用于设置元素的文本内容,appendChild() 方法用于将新创建的元素添加到节点的元素对象中。 通过以上步骤,即可在 G6 节点中使用 HTML 元素。需要注意的是,由于节点是基于 SVG 实现的,HTML 元素会覆盖节点的图形元素,因此需要通过 CSS 样式表设置 HTML 元素的样式,以避免影响节点的显示效果。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值