删除节点

删除节点的步骤: 先获取父节点,再通过父节点删除自己

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>
<div id="father"><h1>标题1</h1><h1>标题2</h1><p id="p1">p1</p><p class="p2">p2</p>
</div><script>// 方式一let p1 = document.getElementById('p1');let father = p1.parentElement;// father.removeChild(p1)// 方式二, 方式二是一个动态的过程,删除一个少一个,所以 [] 里面的数字不能从 0~n-1console.log(father.children)all_ch = father.children// father.removeChild(father.children[0])father.removeChild(all_ch[0])father.removeChild(all_ch[1])father.removeChild(all_ch[1])father.removeChild(all_ch[0])
</script></body>
</html>

注意: 删除多个节点的时候,children 是在时刻变化的,删除节点的时候一定要注意

https://www.bilibili.com/video/BV1JJ41177di?p=22

JavaScript-操作DOM对象-删除dom节点相关推荐

  1. 04-前端技术_ javaScript内置对象与DOM操作

    目录 五,javaScript内置对象与DOM操作 1,JavaScript对象定义和使用 2,JavaScript内置对象 2.1 Array数组 2.1.1 创建方式 2.1.2 常用属性: 2. ...

  2. 第一百一十四节,JavaScript文档对象,DOM进阶

    JavaScript文档对象,DOM进阶 学习要点: 1.DOM类型 2.DOM扩展 3.DOM操作内容 DOM自身存在很多类型,在DOM基础课程中大部分都有所接触,比如Element类型:表示的是元 ...

  3. 『前端学习笔记』 JavaScript 事件与对象、DOM与BOM

    参考视频:[极客学院]Web前端开发教学 - 第一部分:H5+CSS+JS 参考文档:JavaScript 教程 W3school 文章目录 DOM对象 HTML DOM 操作HTML 操作CSS E ...

  4. 第十二讲 dom对象(DOM对象、document对象的常用方法、节点、查找结点、 查看/修改/删除属性节点、创建和增加节点)

    一.查看节点 getElementById( ) 元素的ID名称来访问,返回对拥有指定id的第一个对象的引用 getElementsByName( )  按元素的name名称来访问,返回带有指定名称的 ...

  5. day04【JS高级】BOM对象、Window对象、二种定时器、 Location对象、DOM对象、DOM获取元素、DOM操作内容、DOM操作属性、DOM操作样式、DOM操作元素(标签)、 正则表达式

    回顾 1. js基础语法运算符:算数运算符可以与字符串进行数学运算,js底层进行隐式转换比较运算符:===(恒等) 特点,比较类型+内容流程控制语句if判断条件表达式:1)布尔2)数值:非0为真3)字 ...

  6. JavaScript学习笔记2——JavaScript操作BOM对象

    BOM模型 BOM:浏览器对象模型(Browser Object Model) BOM提供了独立于内容的.可以与浏览器窗口进行互动的对象结构 BOM可实现功能 弹出新的浏览器窗口 移动.关闭浏览器窗口 ...

  7. JavaScript基础——第二章,JavaScript操作BOM对象

    一,BOM模型(Borwser Object Model) BOM提供了独立内容的,可以与浏览器窗口进行互动的对象结构 BOM可实现功能: 弹出新的浏览器窗口 移动,关闭浏览器窗口以及调整窗口的大小 ...

  8. JavaScript操作BOM对象

    window对象 浏览器对象模型(BOM)是JavaScript的组成之一 ,它提供了独立于内容与浏览器窗口进行交互的对象,使用浏览器对象模型可以实现与HTML的交互.它的作用是将相关的元素组织包装起 ...

  9. JavaScript-操作DOM对象-获得dom节点

    核心 浏览器网页就是一个Dom树形结构! 更新: 更新Dom节点 遍历dom节点:得到Dom节点 删除: 删除一个Dom节点 添加: 添加一个新的节点 要操作一个Dom节点,就必须要先获得这个Dom节 ...

最新文章

  1. 利用WebClient发送一个简单的HTTP GET请求并且取回响应
  2. pandas Timestamp的用法
  3. eclipse下tomcat配置
  4. draw.io基础使用
  5. Matlab之switch-case语句
  6. TCP协议抓包分析 -- wireshark
  7. java方法重载_Java方法的重载
  8. SDL_main导致main找不到入口
  9. 互联网日报 | 5月4日 星期二 | 水滴公司启动上市路演;蔚来汽车累计交付量突破10万里程碑;巴菲特透露接班人选
  10. 并发编程之多线程基础-Thread和Runnable的区别及联系(二)
  11. Spring-core源码 -- AlternativeJdkIdGenerator Spring的UUID生成器类
  12. PN532读写卡器(支持NFC、RFID)
  13. Python实现离线字典+听写单词(二):字典数据写进sqlite
  14. WIN10电脑端微信字体变模糊如何调节回来
  15. python快乐数字怎么表达_幸福快乐用数字怎么表示?
  16. All-one Matrices
  17. POJ - 3713 (Transferring Sylla)
  18. CAD转Excel,该如何转换操作
  19. BeautifulSoup实战
  20. 布朗的计算机排名,布朗计算机工程硕士排名,千万好好考查

热门文章

  1. 最小生成树的Prime算法的思想
  2. 一文读懂云上DevOps能力体系
  3. 《从单体迈向 Serverless 的避坑指南》
  4. 隐秘的角落里数亿场AI战争正在发生
  5. 微软KV Store Faster如何巧妙实现1.6亿ops
  6. 给软件工程师、数据科学家和数据工程师的面试指南:该做与不该做
  7. 拔掉数据库的电源会怎样?阿里云数据库新型灾备架构,让云端容灾有“备”无患
  8. AI助手智商测评Siri进步最大,无人驾驶打车服务已在美国试行
  9. 阿里云智能视频 AI 重装来袭
  10. 深度思考 Spring Cloud + Alibaba Sentinel 源码原理