js中的节点操作

5 篇文章 0 订阅
2 篇文章 0 订阅

节点

1.每个节点都有的 个属性

(1)nodeType

用法节点.nodeType

作用:用于表明节点类型。节点类型由在Node 类型中定义的下列

12 个数值常量来表示,任何节点类型必居其一,返回值是节点后面的代号(比如如果是文本节点,返回1)

元素节点              Node.ELEMENT_NODE(1)
属性节点              Node.ATTRIBUTE_NODE(2)
文本节点              Node.TEXT_NODE(3)
CDATA节点             Node.CDATA_SECTION_NODE(4)
实体引用名称节点       Node.ENTRY_REFERENCE_NODE(5)
实体名称节点          Node.ENTITY_NODE(6)
处理指令节点          Node.PROCESSING_INSTRUCTION_NODE(7)
注释节点              Node.COMMENT_NODE(8)
文档节点              Node.DOCUMENT_NODE(9)
文档类型节点          Node.DOCUMENT_TYPE_NODE(10)
文档片段节点          Node.DOCUMENT_FRAGMENT_NODE(11)
DTD声明节点            Node.NOTATION_NODE(12)

其中常用有几个,元素节点,属性节点,文本节点,文档节点,

要了解节点的具体信息,可以使用nodeName 和nodeValue 这两个属性,可以更好的查看节点 信息

*对于元素节点,nodeName 中保存的始终都是元素的标签名,而nodeValue 的值则始终为null。

(2):childNodes:其中保存着一个NodeList 对象。NodeList 是一种类数组对象,用于保存一组有序的节点,可以通过位置来访问这些节点

作用:保存着父节点的所有子节点,是一个集合,可以通过方括号,也可以使用item(下标)方法来获得所有保存在childNodes中的子节点

用法:父节点.childNodes

*也有length属性

var firstChild = someNode.childNodes[0];
var secondChild = someNode.childNodes.item(1);
var count = someNode.childNodes.length;


(3):parentNode:

作用:该属性指向文档树中的父节点;

用法:子节点.parentNode

通过使用列表中每个节点的previousSibling
和nextSibling 属性,可以访问同一列表中的其他节点。列表中第一个节点的previousSibling 属性
值为null,而列表中最后一个节点的nextSibling 属性的值同样也为null


父节点的firstChild 和lastChild属性分别指向其childNodes 列表中的第一个和最后一个节点


(4)ownerDocument,

作用:该属性指向表示整个文档的文档节点。

这种关系表示的是任何节点都属于它所在的文档,任何节点都不能同时存在于两个或更多个文档中。通过这个
属性,我们可以不必在节点层次中通过层层回溯到达顶端,而是可以直接访问文档节点。


2.操作节点的方法

首先要创建一个节点出来,用createElement方法

  var oli=document.createElement('li');

(1)appendChild();

作用:在父节点下追加一个子节点节点作为父节点最后的子节点

用法:父节点.appenChild();

(2)insetBefore()

作用节点放在childNodes 列表中某个特定的位置上

用法父节点.insertBefore(参数1,参数2)

第一个参数:要插入的节点、

第二个参数:被插入的节点

新节点会被插入在被插入节点的前面

(3)replaceChild()

作用:替换节点

用法:父节点.replaceChild(参数1,参数2)

第一个参数:要插入的节点

第二个参数:被替换的节点

(4):removeChild()

作用;移除节点

用法:父节点,removeChild(参数1);

参数1就是被删除的节点



总结:前面介绍的四个方法操作的都是某个节点的子节点,也就是说,要使用这几个方法必须先取得父节
点(使用parentNode 属性)。另外,并不是所有类型的节点都有子节点,如果在不支持子节点的节点
上调用了这些方法,将会导致错误发生。

重要:灵活应用这些方法及属性,需要理解js的DOM,这写会让我们的水平更上一层



  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
可以通过给节点添加一个状态属性,然后根据状态属性来判断节点应该是展开还是收起状态。当点击节点时,切换节点的状态属性,并根据状态属性来进行相应的节点展开或收起操作。 以下是一个简单的实现示例: HTML结构: ``` <ul> <li class="node"> <span class="toggle">+</span> <span class="text">节点1</span> <ul class="children"> <li>子节点1</li> <li>子节点2</li> </ul> </li> <li class="node"> <span class="toggle">+</span> <span class="text">节点2</span> <ul class="children"> <li>子节点1</li> <li>子节点2</li> </ul> </li> </ul> ``` CSS样式: ``` ul { list-style: none; } .node .toggle { display: inline-block; width: 20px; text-align: center; cursor: pointer; } .node .text { margin-left: 5px; } .children { display: none; } ``` JS代码: ``` // 获取所有节点 var nodes = document.querySelectorAll('.node'); // 对每个节点进行处理 nodes.forEach(function(node) { // 获取节点的toggle和children元素 var toggle = node.querySelector('.toggle'); var children = node.querySelector('.children'); // 初始状态为收起 var isExpanded = false; // 点击toggle切换状态 toggle.addEventListener('click', function() { if (isExpanded) { children.style.display = 'none'; toggle.innerText = '+'; isExpanded = false; } else { children.style.display = 'block'; toggle.innerText = '-'; isExpanded = true; } }); }); ``` 这样,当用户点击节点的toggle时,就会切换节点的展开和收起状态,并相应地展开或收起节点的子节点

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值