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>

你可能感兴趣的:(python,python)