js:节点、样式操作

属性

描述

节点

nodevalue

节点值(包含文本、属性,文档和元素节点不可用)

nodetype

节点类型(1:元素节点;2:属性;3:文本;8:注释;9:文档)

nodename

节点名称

基于DOM树

firstElementChild

第一个子节点

LastElementChild

最后一个子元素节点

childNodes

所有子节点(文本节点)

children

所有子元素

parentElement

父元素节点

previousElementSibling

上一个兄弟元素节点

nextElementSibling

下一个兄弟元素节点

基于API函数

getelementById

获取id匹配的页面元素

getElementByTagName

获取标签匹配的页面元素,返回一个数组

getElementByclassname

获取class匹配的页面元素,返回一个数组

getElementByname

获取name匹配的页面元素,返回一个数组

querySelector(‘:checked’)

获取第一个匹配元素

querySelectorALL

获取全部匹配元素

属性操作

dataset.[target]

获取或设置data-的属性

attributes

获取或设置所有元素属性,包括自定义属性

获取或设置预定义的属性

创建

creatElement(“”)

创建标签

innHTML

创建标签+内容

innTEXT

创建、修改文本内容

增删

creatNotetext

添加文本内容

appendchild

添加子元素

removechild

删除子元素

样式操作

.style.width=a+‘px’

style样式操作

class操作

classname

class设置

  • 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、付费专栏及课程。

余额充值