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>