当前位置: 首页 > java >正文

JS WebAPIs DOM节点概述

1.DOM节点:DOM树里每一个内容都称之为节点

2.分类:

-元素节点:比如div标签
-属性节点:比如class属性
-文本节点:比如标签里的文字

3.查找结点

通过节点之间的亲戚关系来查找

		//父节点查找const baby = document.querySelector('.baby')console.log(baby.parentNode);//得到最近一级父节点  //子节点查找//childNodes:获得所有子节点,包括文本节点(空格换行)、注释节点等//children属性:仅获得所有元素节点,返回的还是一个伪数组const ul = document.querySelector('ul')console.log(ul.children);//查找兄弟节点const li2=document.querySelector('ul li:nth-child(2)')console.log(li2.previousElementSibling)console.log(li2.nextElementSibling)

4.增加节点

一般操作为:创建一个新的节点,把创建的新的节点放入到指定元素的内部 ,创建节点追加节点

5.删除节点

 //1.创建节点const ul=document.querySelector('ul')const li=document.createElement('div')li.innerHTML='我是li'//插入到ul的最后//ul.appendChild(div)//插入到某个元素的前面ul.insertBefore(li,ul,children[0])//元素克隆ul.cloneNode(true)//true表示连着后代一起克隆,false表示不克隆后代//删除节点ul.removeChild(ul.children[0])//注意和隐藏节点display:none区别
http://www.xdnf.cn/news/16058.html

相关文章:

  • 前端_Javascript复习
  • C语言:第11天笔记
  • Python通关秘籍(四)数据结构——列表
  • 力扣 hot100 Day52
  • 网络基础DAY16-MSTP-VRRP
  • 2025 年最新 AI 技术:全景洞察与深度解析​
  • 02-netty基础-java四种IO模型
  • 深入解析 Spark:关键问题与答案汇总
  • 【Spring拦截器实战】路径拦截与访问控制系统设计
  • 期货配资软件开发注意事项?
  • Linux文件——文件系统Ext2(1)_理解硬件
  • Java (Spring AI) 实现MCP server实现数据库的智能问答
  • 2️⃣tuple(元组)速查表
  • 从“点状用例”到“质量生态”:现代软件测试的演进、困局与破局
  • vscode不识别vsix结尾的插件怎么解决?
  • 应用层攻防启示录:HTTP/HTTPS攻击的精准拦截之道
  • Datawhale AI 夏令营-心理健康Agent开发学习-Task1
  • MongoDB频繁掉线频繁断开服务的核心原因以及解决方案-卓伊凡|贝贝|莉莉|糖果
  • 【OpenCV篇】OpenCV——01day.图像基础
  • 漫画版:细说金仓数据库
  • 2025年COR SCI2区,基于多种配送模式的无人机自主配送车辆路径问题,深度解析+性能实测
  • 面试高频题 力扣 LCR 130.衣柜整理 洪水灌溉(FloodFill) 深度优先遍历(dfs) 暴力搜索 C++解题思路 每日一题
  • PACKET_HOST等宏定义介绍
  • 目标检测系列(六)labelstudio实现自动化标注
  • YOLO-实例分割头
  • 使用vue-pdf-embed发现某些文件不显示内容
  • 能协调控制器的硬件与软件组成及解决方案
  • 16.多生成树MSTP
  • 图论的整合
  • 前端--bom、JQuery