BOM操作、定时器、DOM的基本操作(上)、DOM的基本操作(下)

最新推荐文章于 2024-08-27 15:59:21 发布

林光虚霁晓

最新推荐文章于 2024-08-27 15:59:21 发布

阅读量97

点赞数

分类专栏： JavaScript 前端文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/weixin_44145338/article/details/131859338

版权

前端同时被 2 个专栏收录

17 篇文章 0 订阅

订阅专栏

JavaScript

6 篇文章 0 订阅

订阅专栏

一、BOM操作

1.浏览器可视窗口尺寸
<script>
    // 获取浏览器可视窗口的宽度
    var w = window.innerWidth

    // 获取浏览器可视窗口的高度
    var h = window.innerHeight9898

    // 输出一下
    console.log(w)
    console.log(h)
  </script>
2.浏览器的弹出层
 <script>
    // 提示框
    // window.alert( '欢迎光临' )

    // 询问框
    // var res = window.confirm( '你爱我吗 ?' )

    // // // 输出返回值
    // console.log( res )

    // // 输入框
    var res = window.prompt(' 请输入您的银行卡密码 ')

    // // 输出返回值
    console.log( res )
  </script>
3.开启和关闭标签页
 <button id="on"> 开启 </button>
  <button id="off"> 关闭 </button>

  <script>
    // 开启按钮的点击事件
    on.onclick = function () {
      // 开启标签页
      window.open( 'http://www.mobiletrain.org/' )
    }

    // 关闭按钮的点击事件
    off.onclick = function () {
      // 关闭标签页
      window.close()
    }

  </script>
4.浏览器常见事件
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <style>
    body {
      width: 3000px;
      height: 3000px;
    }
  </style>
</head>
<body>

  <img src="http://upload.mobiletrain.org/2021/0224/1614152185802.jpg" alt="">

  <script>
    // // 资源加载完毕
    // window.onload = function () {
    //   console.log( '资源已经加载完毕' )
    // }


    // 窗口尺寸改变
    // window.onresize = function () {
    //   console.log( '窗口尺寸发生变化了' )
    // }


    // 滚动条位置改变
    window.onscroll = function () {
      console.log( '滚动条位置改变了' )
    }
  </script>
</body>
</html>

5.浏览器卷去的尺寸
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <style>
    body {
      width: 3000px;
      height: 3000px;
    }
  </style>
</head>
<body>

  <script>
    // 滚动条位置变化
    // window.onscroll = function () {
    //   // 有 DOCTYPE 标签
    //   // console.log( document.documentElement.scrollTop )
    //   // // 没有有 DOCTYPE 标签
    //   // console.log( document.body.scrollTop )

    //   // 兼容
    //   var height = document.documentElement.scrollTop || document.body.scrollTop
    //   console.log( height )
    // }

    window.onscroll = function () {
      // 有 DOCTYPE 标签
      // console.log( document.documentElement.scrollLeft )
      // // 没有有 DOCTYPE 标签
      // console.log( document.body.scrollLeft )

      // 兼容
      var height = document.documentElement.scrollLeft || document.body.scrollLeft
      console.log( height )
    }
  </script>
</body>
</html>

6.浏览器滚动
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <style>
    body { width: 3000px; height: 3000px; }

    button { position: fixed; bottom: 50px; right: 50px; }
  </style>
</head>
<body>

  <button id="go"> 走你 </button>

  <script>
    // // 按钮添加点击行为
    // go.onclick = function () {
    //   // 浏览器滚动到指定位置
    //   window.scrollTo( 300, 400 )
    // }


    // 按钮添加点击行为
    go.onclick = function () {
      // 浏览器滚动到指定位置
      window.scrollTo({
        left: 300,
        top: 400,
        behavior: 'smooth'
      })
    }
  </script>
</body>
</html>

二、定时器

1.间隔定时器
 <script>
    // 书写一个定时器
    setInterval(function () {

      console.log( '执行一次' )

    }, 1000)
  </script>
2.延时定时器
<script>
    // 书写一个定时器
    setTimeout(function () {

      console.log( '执行一次' )

    }, 1000)
  </script>
3. 定时器返回值
<script>
    // 书写第一个定时器
    var timer1 = setInterval(function () {}, 1000)

    // 书写第二个定时器
    var timer2 = setTimeout(function () {}, 1000)

    // 输出返回值
    console.log( 'timer1 : ', timer1 )
    console.log( 'timer2 : ', timer2 )
  </script>
4.关闭定时器
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>

  <button id="off">关闭定时器</button>

  <script>
    // 定时器返回值

    // 开启定时器
    // 书写第一个定时器
    var timer1 = setInterval(function () {
      console.log('间隔定时器')
    }, 1000)

    // 书写第二个定时器
    var timer2 = setTimeout(function () {
      console.log('延时定时器')
    }, 3000)

    // // 给按钮绑定点击事件
    off.onclick = function () {
      // 关闭定时器
      clearInterval(timer1)
      clearInterval(timer2)
    }
  </script>
</body>
</html>

三、DOM的基本操作(上)

1.获取元素的方式
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>
  <div>一号</div>
  <div class="box">二号</div>
  <div class="box content">三号</div>
  <div class="box" id="container">四号</div>

  <script>
    // 获取元素的方式

    // 根据 id 获取页面元素
    // var ele = document.getElementById( 'abc' )
    // 输出返回值
    // console.log(ele)

    // 根据类名获取页面元素
    // var eles = document.getElementsByClassName( 'box' )
    // 输出返回值
    // console.log( eles )

    // 根据标签名获取页面元素
    // var eles = document.getElementsByTagName( 'div' )
    // 输出返回值
    // console.log( eles )

    // 根据选择器获取一个
    // var ele = document.querySelector( '.box' )
    // 输出返回值
    // console.log( ele )

    // 根据选择器获取一组
    var eles = document.querySelectorAll( '.abc' )
    // 输出返回值
    console.log( eles )
  </script>
</body>
</html>

2.操作元素文本内容
<button>操作内容</button>

  <div>
    <p>文本内容</p>
  </div>


  <script>
    // 操作元素文本内容

    // 获取元素
    // var ele = document.querySelector( 'div' )
    // var btn = document.querySelector( 'button' )

    // // 获取元素的文本内容
    // console.log( ele.innerText )

    // // 给 按钮 绑定点击事件
    // btn.onclick = function () {

    //   // 设置 div 内的文本内容
    //   ele.innerText = '新内容'

    // }


    // 获取元素
    var ele = document.querySelector( 'div' )
    var btn = document.querySelector( 'button' )

    // 获取元素的文本内容
    console.log( ele.innerHTML )

    // 给 按钮 绑定点击事件
    btn.onclick = function () {

      // 设置 div 内的文本内容
      ele.innerHTML = '<span>新内容</span>'

    }
  </script>
  
3.操作元素属性
<button>操作属性</button>
  <div id="box" hello="world">div 标签</div>

  <script>
    // 操作元素属性

    // 原生属性
    // 获取元素
    var box = document.querySelector( 'div' )
    var inp = document.querySelector( 'input' )
    var btn = document.querySelector( 'button' )

    // // 获取元素属性
    // console.log( box.id )
    // console.log( inp.type )

    // // 给按钮绑定点击事件
    // btn.onclick = function () {
    //   // 修改元素属性
    //   box.id = 'content'
    //   inp.type = 'checkbox'
    // }


    // 获取自定义属性
    var res = box.getAttribute( 'hello' )
    console.log( res )

    // 给按钮绑定点击事件
    btn.onclick = function () {
      // 修改自定义属性
      box.removeAttribute( 'hello', '新来的' )
    }
  </script>
4.操作元素类名
<button>操作类名</button>
  <div class="content">文本内容</div>

  <script>
    // 操作元素类名

    // 获取元素
    var box = document.querySelector( 'div' )
    var btn = document.querySelector( 'button' )

    // 获取类名
    console.log( box.className )

    // 给 按钮 绑定点击事件
    btn.onclick = function () {

      // 设置 div 内的类名
      box.className = '新内容'

    }
  </script>
5.操作元素样式
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <style>
    div {
      font-size: 20px;
    }
  </style>
</head>
<body>

  <button>操作样式</button>
  <div style="width: 100px; height: 100px; background-color: pink;">文本内容</div>

  <script>
    // 操作元素样式

    // 获取元素
    var box = document.querySelector( 'div' )
    var btn = document.querySelector( 'button' )

    // 获取样式
    console.log( box.style.width )
    console.log( box.style.height )
    console.log( box.style.backgroundColor )

    // 给 按钮 绑定点击事件
    btn.onclick = function () {

      // 设置 div 的样式
      box.style.width = '200px'
      box.style.height = '300px'
      box.style.backgroundColor = 'skyblue'

    }
  </script>
</body>
</html>

6.操作元素非行内样式
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <style>
    div {
      font-size: 20px;
    }
  </style>
</head>
<body>

  <button>操作类名</button>
  <div style="width: 100px; height: 100px; background-color: pink;">文本内容</div>

  <script>
    // 操作元素类名

    // 获取元素
    var box = document.querySelector( 'div' )
    var btn = document.querySelector( 'button' )

    // 获取样式
    console.log( window.getComputedStyle(box).width )
    console.log( window.getComputedStyle(box).height )
    console.log( window.getComputedStyle(box).fontSize )

  </script>
</body>
</html>

四、案例

1.回到顶部
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }

    body {
      height: 3000px;
    }

    .header {
      width: 100%;
      height: 80px;
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 30px;
      color: #fff;
      background-color: skyblue;

      transition: top .5s linear;

      position: fixed;
      top: -80px;
      left: 0;
    }

    .goTop {
      width: 50px;
      height: 50px;
      background-color: pink;
      font-size: 20px;
      text-align: center;
      line-height: 25px;
      color: #fff;

      position: fixed;
      bottom: 50px;
      right: 50px;

      display: none;
    }
  </style>
</head>
<body>
  <div class="header">顶部通栏</div>
  <div class="goTop">回到顶部</div>

  <script>
    // 1. 获取元素
    var header = document.querySelector('.header')
    var goTop = document.querySelector('.goTop')

    // 2. 绑定滚动事件
    window.onscroll = function () {
      // 2-1. 获取浏览器卷去的高度
      var height = document.documentElement.scrollTop || document.body.scrollTop

      // 2-2. 判断卷去的高度
      if (height >= 300) {
        // 显示
        header.style.top = '0px'
        goTop.style.display = 'block'
      } else {
        // 隐藏
        header.style.top = '-80px'
        goTop.style.display = 'none'
      }
    }

    // 3. 绑定点击事件
    goTop.onclick = function () {
      // 3-1. 让页面滚动回到顶部
      window.scrollTo({
        top: 0,
        behavior: 'smooth'
      })
    }
  </script>
</body>
</html>

2.全选
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }

    .box {
      width: 100px;
      padding: 20px;
      border: 1px solid pink;
      margin: 30px auto;
      border-radius: 5px;
    }

    hr {
      margin: 10px 0;
    }
  </style>
</head>
<body>
  <div class="box">
    全选 : <input type="checkbox"> <br>
    <hr>
    <input type="checkbox"> 选项一 <br>
    <input type="checkbox"> 选项二 <br>
    <input type="checkbox"> 选项三 <br>
    <input type="checkbox"> 选项四 <br>
  </div>

  <script>
    // 1. 获取元素
    var allBtn = document.querySelector('input')
    var items = document.querySelectorAll('input:nth-child(n + 2)')

    // 2. 给全选按钮绑定事件
    allBtn.onclick = function () {
      // 2-1. 拿到自己的选中状态
      var type = allBtn.checked

      // 2-2. 把自己的选中状态设置给每一个选项按钮
      for (var i = 0; i < items.length; i++) {
        items[i].checked = type
      }
    }

    // 3. 循环给每一个选项按钮绑定点击事件
    for (var i = 0; i < items.length; i++) {
      // 3-1. 给每一个选项按钮绑定点击事件
      items[i].onclick = function () {
        // 3-2. 首先定义假设变量, 假设所有按钮都是选中的
        var flag = true

        // 3-3. 通过循环来验证我们的假设
        for (var j = 0; j < items.length; j++) {
          if (items[j].checked === false) {
            flag = false
            break
          }
        }

        // 3-4. 把我们得到的结果设置给全选按钮
        allBtn.checked = flag
      }
    }
  </script>
</body>
</html>

3.选项卡
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }

    ul, ol, li {
      list-style: none;
    }

    .box {
      width: 600px;
      height: 400px;
      border: 3px solid pink;
      margin: 50px auto;
      display: flex;
      flex-direction: column;
    }

    .box > ul {
      height: 60px;
      display: flex;
    }

    .box > ul > li {
      flex: 1;
      color: #fff;
      background-color: skyblue;
      font-size: 30px;
      display: flex;
      justify-content: center;
      align-items: center;
      cursor: pointer;
    }

    .box > ul > li.active {
      background-color: orange;
    }

    .box > ol {
      flex: 1;
      position: relative;
    }

    .box > ol > li {
      width: 100%;
      height: 100%;
      background-color: purple;
      display: flex;
      justify-content: center;
      align-items: center;
      color: #fff;
      font-size: 100px;

      position: absolute;
      left: 0;
      top: 0;

      display: none;
    }

    .box > ol > li.active {
      display: flex;
    }
  </style>
</head>
<body>
  <div class="box">
    <ul>
      <li class="active">1</li>
      <li>2</li>
      <li>3</li>
    </ul>
    <ol>
      <li class="active">1</li>
      <li>2</li>
      <li>3</li>
    </ol>
  </div>

  <script>
    // 1. 获取元素
    var btns = document.querySelectorAll('ul > li')
    var tabs = document.querySelectorAll('ol > li')

    // 2. 给 btns 里面所有按钮添加点击事件
    btns.forEach(function (item, index) {

      item.onclick = function () {

        // 2-2. 给 btns 和 tabs 里面的所有内容取消 active 类名
        btns.forEach(function (t, i) {
          t.className = ''
          tabs[i].className = ''
        })

        // 2-3. 当前点击的按钮和索引对应的盒子添加 active 类名
        item.className = 'active'
        tabs[index].className = 'active'

      }

    })

  </script>
</body>
</html>

五、DOM的基本操作(下)

1.创建节点
  <script>
    // 创建一个 div 标签
    var div = document.createElement('div')

    // 控制台输出
    console.log(div)

  </script>
2.插入节点
<div>
    <p>我是 div 内本身的 p 标签</p>
  </div>

  <script>
    // // 创建一个 span 标签
    // var span = document.createElement('span')
    // // 向 span 内添加一些文本内容
    // span.innerText = '我是创建出来的 span 标签'
    // // 输出一下
    // console.log(span)

    // // 获取到页面上的 div 元素
    // var div = document.querySelector('div')
    // // 把创建的 span 标签插入到 div 内部
    // div.appendChild(span)



    // 创建一个 span 标签
    var span = document.createElement('span')
    // 向 span 内添加一些文本内容
    span.innerText = '我是创建出来的 span 标签'
    // 输出一下
    console.log(span)

    // 获取到页面上的 div 元素
    var div = document.querySelector('div')
    // 获取到 div 内部本身的 p 标签
    var p = document.querySelector('p')
    // 把创建的 span 标签插入到 div 内部, 并且放在 p 标签的前面
    div.insertBefore(span, p)
  </script>
3.删除节点
<div>
    <p>我是 div 内部本身的 p 标签</p>
    <span>我是 div 内部本身的 span 标签</span>
  </div>

  <script>
    // // 获取到 div 元素
    // var div = document.querySelector('div')
    // // 获取到 p 元素
    // var p = document.querySelector('p')

    // // 从 div 内删除 p 元素
    // div.removeChild(p)


    // 获取到 div 元素
    var div = document.querySelector('div')

    // 把 div 删除
    div.remove()
  </script>
4.替换节点
<div>
    <p>我是 div 内的 p 标签</p>
    <span>我是 div 内的 span 标签</span>
    <p>我是 div 内的 p 标签</p>
  </div>

  <script>
    // 创建一个 i 标签
    var i = document.createElement('i')
    // 向 i 标签内添加一些文本
    i.innerText = '我是创建出来的 i 标签'

    // 获取到 div 元素
    var div = document.querySelector('div')
    // 获取到 span 元素
    var span = document.querySelector('span')
    // 使用创建的 i 标签去替换 div 内本身的 span 标签
    div.replaceChild(i, span)
  </script>
5.克隆节点
 <div>
    <p>我是 div 内的 p 标签</p>
  </div>

  <script>
    // 获取 div 元素
    var div = document.querySelector('div')

    // 克隆一个 div 元素, 不克隆后代元素
    var clone1 = div.cloneNode(false)
    // 克隆一个 div 元素, 克隆后代元素
    var clone2 = div.cloneNode(true)

    // 输出
    console.log('不克隆后代节点 : ', clone1)
    console.log('克隆后代节点 : ', clone2)
  </script>