（javascript）（基础知识+实例）11.DOM，事件

不二哈

已于 2022-09-10 21:01:25 修改

阅读量189

点赞数 2

分类专栏： Javascript 文章标签： javascript 前端 html

于 2022-08-29 20:32:13 首次发布

本文链接：https://blog.csdn.net/sj1877288470/article/details/126591940

版权

Javascript 专栏收录该内容

27 篇文章 0 订阅

订阅专栏

DOM

操作网页的
思路
1. 获取DOM元素（标签）
2. 操作DOM元素
获取DOM元素
1. document.getElementById(id名称)
2. document.getElementsByClassName(类名)
3. document.getElementsByTagName(标签名)
4. document.querySelector(css选择器)
5. document.querySelectorAll(css选择器)
操作样式
- 获取
  - 元素.style.css属性名
  - getComputedStyle(元素).css属性名
- 设置
  - 元素.style.css属性名 = css属性值
操作属性
- 获取
  - 元素.getAttribute(属性名)
- 设置
  - 元素.setAttribute(属性名, 属性值)
- 获取自定义属性 data-*
  - 元素.dataset.*
操作类名
- 获取
  - 元素.getAttribute(‘class’)
  - 元素.className
- 设置
  - 元素.setAttribute(‘class’, ‘类名’)
  - 元素.className = ‘类名’
- 添加
  - 元素.classList.add(类名)
- 移除
  - 元素.classList.remove(类名)
操作内容
- 获取
  - 元素.innerHTML
  - 元素.innerText
  - 元素.value
- 设置
  - 元素.innerHTML=内容
  - 元素.innerText=内容
  - 元素.value = 内置
获取尺寸（宽度和高度）
- 元素.clientWidth
- 元素.offsetWidth
获取偏移
- 含义
- 元素.offsetLeft
- 元素.offsetTop
事件
- 含义
事件组成三元素
- 事件源
- 事件类型
- 事件处理函数
绑定事件
1. html+js
2. js
  - 获取事件源
  - 事件源.on+事件类型 = 事件处理函数

DOM树

用来描述Html的层级结构，html层级就是一个树状的结构

DOM节点

用来描述html里面的内容
分类
1. 标签元素节点
2. 文本文本节点
3. 注释注释节点
4. 属性属性节点

节点属性

每一个节点都会有三个属性 nodeName nodeType nodeValue
nodeType
- 可以利用nodeType去区分节点的类型
- 元素节点 1
- 属性节点 2
- 文本节点 3
- 注释节点 8
nodeName
- 元素节点标签名大写
- 属性节点属性名
- 文本节点 #text
- 注释节点 #comment
nodeValue
- 元素节点 null
- 属性节点属性值
- 文本节点文本内容
- 注释节点注释内容

获取属性节点

属性节点都是长在元素节点的身上
元素.attributes

遍历DOM树

已知一个元素节点，如何获取子元素，如何获取父元素，如何获取相邻元素？
获取子节点
- 元素.childNodes 可以获取某个元素里面所有类型的子节点（换行\n）
- 元素.children 可以获取某个元素里面的元素节点
获取父节点
- 元素.parentNode
- 在页面里面最顶层的是document
获取相邻节点
- 获取前一个相邻节点
  - 元素.previousSibling
- 获取前一个相邻的元素节点
  - 元素.previousElementSibling
- 获取后一个相邻
  - 元素.nextSibling
- 获取后一个相邻的元素节点
  - 元素.nextElementSibling

DOM操作

如何创建一个节点
- document.createElement(标签名)
如何将创建的节点添加到页面
- 父元素添加子元素(最后)
  - 父元素.appendChild(子元素)
- 父元素某一个子节点前面追加一个子节点
  - 父元素.insertBefore(新节点, 老节点)
如何删除一个节点
- 父节点移除子节点
  - 父节点.removeChild(要删除子节点)
如何克隆一个节点
- 要克隆的节点.cloneNode()
- 要克隆的节点.cloneNode(true)

事件

含义
组成部分
1. 事件源
2. 事件类型
3. 事件处理函数
绑定事件的两种方式
常见的事件类型
- 鼠标事件
  - click 点击
  - dblclick 双击
  - mouseover 移入
  - mouseout 移出
  - mousemove 移动
  - mousedown 按下
  - mouseup 抬起
  - mousewheel 滚动
mousewheel和scroll有什么区别
- scroll 滚动条位移事件一般这个事件需要给有滚动条的元素绑定
- mousewheel 鼠标滚轮滚动
获取滚动条的位移量
- 获取滚动条滚动高度
  - 元素.scrollTop
  - 此处有一个兼容性的问题有和没有doctype的时候获取的元素不一样
  - 利用逻辑或者短路的原理 var st = document.body.scrollTop || document.documentElement.scrollTop
- 获取滚动条滚动宽度
  - 元素.scrollLeft
设置滚动条高度
- 元素.scrollTop = 值

实例

（以下代码均为课程实例）

（1）获取子元素节点

<body>
    <div class="box">
        <ul>
            <li>11111</li>
            <li>11111</li>
            <li>11111</li>
            <li>11111</li>
        </ul>
        <p>dasdsadasdasd</p>
        撒打算打算大所大
        <!-- sdhaskjdasjkd -->
    </div>

<script>
    // 获取box里面子元素
    var box = document.querySelector('.box')
    // 通过childNodes
    var sons = box.childNodes
    console.log(sons)

    // 通过children
    var sons02 = box.children
    console.log(sons02)
</script>
</body>

（2）节点的属性

<body>
    <div class="box">
        <ul>
            <li>11111</li>
            <li>11111</li>
            <li>11111</li>
            <li>11111</li>
        </ul>
        <p>dasdsadasdasd</p>
        撒打算打算大所大
        <!-- sdhaskjdasjkd -->
        sdasjkdjaskd
        <span>sdjkasdjasd</span>
        哈哈哈
    </div>

<script>
    var box = document.querySelector('.box')
    var sons = box.childNodes
    console.log(sons)
    // 获取一个文本节点
    console.log(sons[0].nodeType) // 3
    console.log(sons[2].nodeType) // 3
    console.log(sons[2].nodeName) // #text
    console.log(sons[2].nodeValue) // 文本的内容
    // 获取一个元素节点
    console.log(sons[1].nodeType) // 1
    console.log(sons[1].nodeName) // UL
    console.log(sons[3].nodeType) // 1
    console.log(sons[3].nodeName) // P
    console.log(sons[3].nodeValue) // null
    // 获取一个注释节点
    console.log(sons[5].nodeType) // 8
    console.log(sons[5].nodeName) // #comment
    console.log(sons[5].nodeValue) // 注释内容

    // 利用nodeType过滤文本节点？

</script>
</body>

（3）获取属性节点

<body>
    <img src="dasda" alt="111" tilte="dasdas">
    <script>
        // 获取img的属性节点
        var tupian = document.querySelector('img')
        console.log(tupian.attributes[0])
        console.log(tupian.attributes[1])
        console.log(tupian.attributes[2])
        console.log(tupian.attributes[0].nodeType)
        console.log(tupian.attributes[0].nodeName)
        console.log(tupian.attributes[0].nodeValue)
    </script>
</body>

（4）获取父节点

<body>
    <div class="box">
        <ul>
            <li id="list">111</li>
        </ul>    
    </div>
    <script>
        var list = document.getElementById('list')
        console.log(list.parentNode)
        console.log(list.parentNode.parentNode)
        console.log(list.parentNode.parentNode.parentNode)
        console.log(list.parentNode.parentNode.parentNode.parentNode)
        console.log(list.parentNode.parentNode.parentNode.parentNode.parentNode)
        console.log(list.parentNode.parentNode.parentNode.parentNode.parentNode.parentNode)
    </script>
</body>

（5）获取相邻节点

<body>
    <ul>
        <li>1</li>
        <li>2</li>
        <li class="active">3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
    </ul>
    <script>
        var activeLi = document.querySelector('.active')
        // 获取前一个节点
        console.log(activeLi.previousSibling)
        console.log(activeLi.previousSibling.previousSibling)
        // 获取前一个元素节点
        console.log(activeLi.previousElementSibling)
        // 获取后一个节点
        console.log(activeLi.nextSibling)
        console.log(activeLi.nextSibling.nextSibling)
        // 获取后一个元素节点
        console.log(activeLi.nextElementSibling)
        console.log(activeLi.nextElementSibling.nextElementSibling)
        console.log(activeLi.nextElementSibling.nextElementSibling.nextElementSibling)
        console.log(activeLi.nextElementSibling.nextElementSibling.nextElementSibling.nextElementSibling)
    </script>
</body>

（6）创建一个节点

<body>
    <div id="old">老的div</div>
    <script>
        var div = document.createElement('div')
        console.log(div)
        // 添加内容
        div.innerText = '新的div'
        // 添加到页面
        document.body.appendChild(div)
        var link = document.createElement('a')
        console.log(link)
        link.innerText = '新链接'
        document.body.insertBefore(link, document.getElementById('old'))
    </script>
</body>

（7）删除某一个元素

<body>
    <button id="del">删除</button>
    <div class="box">
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Magni animi facere, aperiam quas est placeat ipsum quisquam dolore. Veniam accusamus odio dignissimos molestiae rem, consequatur ut libero itaque quaerat repellendus?
    </div>
    <script>
        var hezi = document.querySelector('.box')
        document.getElementById('del').onclick = function(){
            document.body.removeChild(hezi)
        }
    </script>
</body>

（8）克隆元素

<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>
        .box{
            border-bottom: 5px solid black;
        }
    </style>
</head>
<body>
    <button id="clone">克隆</button>
    <div class="box">
        <ul>
            <li>1</li>
            
        </ul>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Magni animi facere, aperiam quas est placeat ipsum quisquam dolore. Veniam accusamus odio dignissimos molestiae rem, consequatur ut libero itaque quaerat repellendus?
    </div>
    <script>
        var hezi = document.querySelector('.box')
        document.getElementById('clone').onclick = function(){
           var cloneHezi = hezi.cloneNode(true)
           document.body.appendChild(cloneHezi)
        }
    </script>
</body>

（9）鼠标事件

<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>
        .box{
            width: 300px;
            height: 300px;
            background-color: red;
        }
    </style>
</head>
<body>
    <div class="box">

    </div>
    <script>
        // 获取事件源
        var box = document.querySelector('.box')
        box.onclick = function(){
            console.log('点击事件')
        }
        box.ondblclick = function(){
            console.log('双击事件')
        }
        box.onmouseover = function(){
            console.log('移入事件')
        }
        box.onmouseout = function(){
            console.log('移出事件')
        }
        box.onmousemove = function(){
            console.log('移动事件')
        }
        box.onmousedown = function(){
            console.log('按下事件')
        }
        box.onmouseup = function(){
            console.log('抬起事件')
        }
        box.onmousewheel = function(){
            console.log('滚动了')
        }
    </script>
</body>

（10）实现css的hover效果

<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>
        .box{
            width: 300px;
            height: 300px;
            background-color: red;
        }
    </style>
</head>
<body>
    <div class="box">

    </div>
    <script>
        var hezi = document.querySelector('.box')
        hezi.onmouseover = function(){
            // hezi.style.backgroundColor = 'red'
            console.log(this)
            this.style.backgroundColor = 'blue'
        }
        hezi.onmouseout = function(){
            this.style.backgroundColor = 'red'
        }
    </script>
</body>

（11）mousewheel和scroll的区别

<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>
        .box{
            width: 300px;
            height: 300px;
            background-color: red;
            font-size: 40px;
            overflow-y: scroll;
        }
    </style>
</head>
<body>
    <div class="box">
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Nostrum ratione error, maiores veniam repudiandae possimus. Ipsam tempora perspiciatis, incidunt quos, sequi ab quibusdam, temporibus libero quidem porro sint! Eum, sunt?
        Lorem ipsum, dolor sit amet consectetur adipisicing elit. Ducimus voluptate aut nemo dicta iure nobis, eum veritatis deleniti nostrum error dolores impedit placeat quod amet maxime! At dolor excepturi quisquam.
        Lorem ipsum dolor sit amet consectetur, adipisicing elit. Impedit quia facere, eaque, labore necessitatibus fugiat, aut nostrum dolore ipsum reprehenderit assumenda officia deserunt tempora numquam ea enim perferendis dolorem commodi.
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Consectetur iste quaerat at praesentium, incidunt sint iure. Asperiores cum aliquid, consequuntur vero aspernatur doloremque esse illum explicabo voluptatibus recusandae sit est.
        Lorem ipsum dolor sit, amet consectetur adipisicing elit. Corporis itaque quibusdam, rem dolorum quasi quam nulla et voluptatum, a eligendi excepturi! Perferendis, porro culpa modi nihil laborum atque in excepturi?
        Lorem ipsum dolor, sit amet consectetur adipisicing elit. Temporibus laudantium maiores labore impedit quis est iure minus nesciunt sint eaque facilis vero sed ratione doloremque eos perferendis, provident obcaecati. Veniam.
    </div>
    <script>
        // 获取事件源
        var box = document.querySelector('.box')
        box.onscroll = function(){
            console.log('scroll触发了...')
        }
    </script>
</body>

（12）获取滚动条的位移量

<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>
        html,body{
            width: 4000px;
            height: 8000px;
        }
    </style>
</head>
<body>
    <script>
        // 获取事件源
        // 给body绑定滚动条位移事件
        // console.log(document.body)
        document.body.onscroll = function(){
            console.log('滚动了')
            // console.log('高度', document.body.scrollTop)
            // console.log('宽度', document.body.scrollLeft)
            // console.log('高度', document.documentElement.scrollTop)
            // 短路原理
            var st = document.body.scrollTop || document.documentElement.scrollTop
            console.log(st)
        }
        // 给body绑定滚动条位移事件
        // console.log(document.documentElement)
        /* document.documentElement.onscroll = function(){
            console.log('滚动了')
        } */
    </script>
</body>

（13）获取box里面子元素，分别取出box里面每一种类型的节点放在一个数组里面

<body>
    <div class="box">
        大萨达萨达所
        <!-- 注释内容 -->
        <ul>
            <li>11111</li>
            <li>11111</li>
            <li>11111</li>
            <li>11111</li>
        </ul>
        达到就阿斯卡纶大家啊时空来电
        <!-- 注释内容 -->
        <p>dasdsadasdasd</p>
        撒打算打算大所大
        <!-- sdhaskjdasjkd -->
    </div>
</body>
<script>

    // 获取box里面子元素
    var box = document.querySelector('.box')
    // console.log(box)
    // 分别取出box里面每一种类型的节点 放在一个数组里面
    var sons = box.childNodes
    console.log(sons)
    var newArr1 = []
    var newArr2 = []
    var newArr3 = []
    var newArr8 = []
    for (i = 0; i < sons.length; i++) {
        // console.log(sons[i])
        if (sons[i].nodeType == 1) {
            newArr1.push(sons[i])
        } else if (sons[i].nodeType == 2) {
            newArr2.push(sons[i])
        }
        else if (sons[i].nodeType == 3) {
            newArr3.push(sons[i])
        }
        else if (sons[i].nodeType == 8) {
            newArr8.push(sons[i])
        }

    }
    console.log(newArr1)
    console.log(newArr2)
    console.log(newArr3)
    console.log(newArr8)

</script>

（14）获取所有相邻节点放到一个数组里面 [li,li,li,li,li]

<body>
    <ul>
        <li>1</li>
        <li>2</li>
        <li class="active">3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
    </ul>
    <script>
        var activeLi = document.querySelector('.active')
        // 获取所有相邻节点 放到一个数组里面  [li,li,li,li,li]
        var sonsList = []
        while(activeLi.previousElementSibling){
            // 把节点放进来
            sonsList.push(activeLi.previousElementSibling)
            // 将当前的节点替换
            activeLi = activeLi.previousElementSibling
        }
        
        // 复元到第三个
        activeLi = document.querySelector('.active')
        while(activeLi.nextElementSibling){
            // 把节点放进来
            sonsList.push(activeLi.nextElementSibling)
            // 将当前的节点替换
            activeLi = activeLi.nextElementSibling
        }
        console.log(sonsList)
    </script>
</body>

（15）楼层效果

<!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;
      }
      section > .title {
        height: 80px;
        line-height: 80px;
        background-color: gray;
        text-align: center;
        font-size: 40px;
        color: #fff;
      }
      section > .content {
        height: 600px;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 100px;
      }
      nav {
        position: fixed;
        right: 10px;
        bottom: 10px;
        border: 1px solid orange;
      }
      nav li {
        cursor: pointer;
        list-style: none;
        font-size: 14px;
        width: 30px;
        padding: 10px;
        border-bottom: 1px solid orange;
      }
      nav li.active {
        color: orangered;
      }
    </style>
  </head>
  <body>
    <div class="home">
      <section>
        <h3 class="title">秒杀优选</h3>
        <div class="content">秒杀优选内容</div>
      </section>
      <section>
        <h3 class="title">生活家居</h3>
        <div class="content">生活家居内容</div>
      </section>
      <section>
        <h3 class="title">精品男装</h3>
        <div class="content">精品男装内容</div>
      </section>
      <section>
        <h3 class="title">精品女装</h3>
        <div class="content">精品女装内容</div>
      </section>
      <section>
        <h3 class="title">精品童装</h3>
        <div class="content">精品童装内容</div>
      </section>
      <section>
        <h3 class="title">为你推荐</h3>
        <div class="content">为你推荐内容</div>
      </section>
    </div>
    <!-- 右侧导航菜单 -->
    <nav></nav>
    <script>
      /* 根据内容区标题生成右侧的菜单项 */
      var titles = document.querySelectorAll(".title");
      var nav = document.querySelector("nav");
      console.log(titles);
      // 遍历标题 生成菜单
      for (var i = 0; i < titles.length; i++) {
        // 创建一个li
        var newLi = document.createElement("li");
        // li的内容就是标题内容
        newLi.innerHTML = titles[i].innerHTML;
        // 默认第一个li要有一个激活色的效果
        if (i == 0) {
          newLi.classList.add("active");
        }
        // 把li添加到nav
        nav.appendChild(newLi);
      }
      // 获取所有生成的菜单项
      var items = document.querySelectorAll('nav>li')
      // 获取所有的标题的偏移高度 放到一个数组里面
      var otList = []
      for (var i = 0; i < titles.length; i++) {
        otList.push(titles[i].offsetTop)
      }




      /* 滚动的时候给右侧菜单加上激活色 */
      // 监听滚轮的滚动事件
      document.body.onscroll = function () {
        // 获取滚动的高度
        var st = document.body.scrollTop || document.documentElement.scrollTop;
        console.log("当前滚动高度", st);
        // 获取每一个标题的偏移高度
        // 把所有比滚动高度小的值对应的下标存储到一个数组里面
        var indexList = []
        for (var i = 0; i < otList.length; i++) {
          if (st >= otList[i]) {
            indexList.push(i);
          }
        }
        console.log(indexList)
        // 在给当前加激活色之前去除所有菜单的激活色
        for(var i=0;i<items.length;i++){
            items[i].classList.remove('active')
        }
        var lastIndex = indexList.length-1
        // 只需要给最后一项对应的菜单加上激活色
        items[indexList[lastIndex]].classList.add('active')
      };


      

      /* 点击菜单跳转到对应的标题 */
      // 给所有的菜单绑定点击事件
      for(var i=0;i<items.length;i++){
        items[i].setAttribute('data-index', i)
        items[i].onclick = function(){
            var index = this.dataset.index
            console.log(index)
            // 获取对应标题的偏移量
            var ot = titles[index].offsetTop
            console.log(ot)
            // 将滚动条设置到当前的偏移
            document.body.scrollTop = ot
            document.documentElement.scrollTop = ot
        }
      }
    </script>
  </body>
</html>

不二哈

关注

2
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
1
评论
（javascript）（基础知识+实例）11.DOM，事件

含义组成部分绑定事件的两种方式常见的事件类型mousewheel和scroll有什么区别获取滚动条的位移量设置滚动条高度（以下代码均为课程实例）（1）获取子元素节点（2）节点的属性（3）获取属性节点（4）获取父节点（5）获取相邻节点（6）创建一个节点（7）删除某一个元素（8）克隆元素（9）鼠标事件（10）实现css的hover效果（11）mousewheel和scroll的区别（12）获取滚动条的位移量（13）获取box里面子元素，分别取出box里面每一种类型的节点放在一个数组里面
复制链接

扫一扫