DOM补充与BOM操作
DOM补充
可以通过dom对元素进行增删改查操作 --> 增删改查是基于Node节点来实现
parent: 父级
child: 子级
创建节点:
createElement 创建一个元素节点
添加节点:
appendChild 元素最后添加一个子节点
insertBefore 在元素某个子节点之前添加新的子节点 第一个参数为新节点 第二个参数为已存在的子节点
替换节点:
replaceChild 用新节点替换某个子节点 第一个参数为新节点 第二个参数为已存在的某个子节点
删除节点:
removeChild 删除元素的某个子节点
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Documenttitle>
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>Documenttitle>
head>
<body>
<button id="1">多喝热水button>
<script>
setInterval(function(){
alert('多喝热水')
},2000)//1秒=2000毫秒
setTimeout(function(){
alert('多喝热水')
})
script>
body>
html>