DOM补充与BOM操作

news/2024/10/30 23:16:45/

DOM补充

可以通过dom对元素进行增删改查操作 --> 增删改查是基于Node节点来实现

parent: 父级
child: 子级

创建节点:
createElement 创建一个元素节点

添加节点:
appendChild 元素最后添加一个子节点
insertBefore 在元素某个子节点之前添加新的子节点 第一个参数为新节点 第二个参数为已存在的子节点

替换节点:
replaceChild 用新节点替换某个子节点 第一个参数为新节点 第二个参数为已存在的某个子节点

删除节点:
removeChild 删除元素的某个子节点

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title>
</head>
<body><div id="box"><p id="active">小明 小兰 小刚</p></div><script>let box = document.getElementById('box')let active = document.getElementById('active')//相当于新建一个标签元素let newNode = document.createElement('b')newNode.innerText = '钢铁侠 孙悟空'box.appendChild(newNode)//给box新增一个子元素box.removeChild(newNode)//给box删除子元素let tb = document.createElement('a')tb.innerHTML = '跳转'//保存网址地址tb.href = 'www.baidu.com'box.replaceChild(tb,active)</script>
</body>
</html>

BOM

Browser Object Model --> 浏览器对象模型
dom简单来说就是通过js和网页内容进行交互
bom简单来说就是通过js和浏览器进行交互(弹窗 刷新 加载)

其实我们之前使用的 alert prompt 都是属于bom操作 --> 控制浏览器弹出一个窗口再进行操作 -->他们都是属于同一个对象 叫做window (当前页面窗口)

window.alert
window.prompt
但是一般不这样写

定时器

作用就是可以让网页里的一段程序 过一阵子在执行

setInterval() > 周期定时器 > 隔一段时间就运行一次
setTimeOut() > 一次性定时器 > 执行一次就结束

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title>
</head>
<body><button id="1">多喝热水</button><script>setInterval(function(){alert('多喝热水')},2000)//1秒=2000毫秒setTimeout(function(){alert('多喝热水')})</script>
</body>
</html>

http://www.ppmy.cn/news/98706.html

相关文章

C++多线程

多进程与多线程 多进程并发 使用多进程并发是将一个应用程序划分为多个独立的进程&#xff08;每个进程只有一个线程&#xff09;&#xff0c;这些独立的进程间可以互相通信&#xff0c;共同完成任务。由于操作系统对进程提供了大量的保护机制&#xff0c;以避免一个进程修改了…

js常用事件

js常用事件如下&#xff1a; onmouseover&#xff1a;鼠标被移到某元素之上&#xff1b; onmouseout&#xff1a;鼠标从某元素移开&#xff1b; onfocus&#xff1a;元素获得焦点&#xff1b; onblur&#xff1a;元素失去焦点&#xff1b; onclick&#xff1a;鼠标单击事件…

深度挖掘.c到.exe的整个过程,透过现象看本质

文章目录 程序的翻译环境和执行环境翻译环境编译预编译头文件的包含删除注释替换#define定义的符号 编译词法分析语法分析语义分析符号汇总 汇编 链接合并段表符号表的合并和重定位 执行环境 程序的翻译环境和执行环境 在ANSI C的任何一种实现中&#xff0c;存在两个不同的环境…

网络安全--红队资源大合集

红队攻击的生命周期&#xff0c;整个生命周期包括&#xff1a; 信息收集、攻击尝试获得权限、持久性控制、权限提升、网络信息收集、横向移动、数据分析&#xff08;在这个基础上再做持久化控制&#xff09;、在所有攻击结束之后清理并退出战场。 重点提醒&#xff1a;本项目…

Latex在同一figure中排版多张图片的方法

Latex在同一figure中排版多张图片的方法 主要使用了minipage&#xff08;子图&#xff09;语法。minipage可以嵌套&#xff0c;子图还可以分解为更多子图&#xff0c;功能很好玩&#xff0c;无聊可以自己试试。下面介绍几种常用效果的实现方法。 并排显示两张图&#xff0c;并…

【JVM】12. 垃圾回收相关概念

文章目录 12.1. System.gc()的理解12.2. 内存溢出与内存泄露内存溢出&#xff08;OOM&#xff09;内存泄漏&#xff08;Memory Leak&#xff09; 12.3. Stop The World12.4. 垃圾回收的并行与并发并发&#xff08;Concurrent&#xff09;并行&#xff08;Parallel&#xff09;并…

Dubbo环境搭建

1.搭建zookeeper注册中心环境 zookeeper下载地址 [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-6ptMw7rb-1685261782669)(b894c0cbb6501ca97145d3b09685ae8f.png)] 在bin文件下&#xff0c;启动zkServer.cmd会有报错&#xff0c;处理需要在condi…

Redis相关

Redis基本概念 一、Redis的持久化方式二、Redis的单机、主从、哨兵、集群Redis主从复制的原理 三、Redis分布式锁的实现四、缓存穿透 击穿 雪崩 一、Redis的持久化方式 1&#xff09;RDB方式 2&#xff09;AOF方式 二、Redis的单机、主从、哨兵、集群 单机的问题&#xf…