DOM 基本操作 - 事件基础

飞宇千虹

已于 2024-07-14 20:14:56 修改

阅读量342

点赞数 4

文章标签： javascript 前端 html 开发语言 ecmascript

于 2024-07-10 23:13:38 首次发布

本文链接：https://blog.csdn.net/weixin_45924250/article/details/140338112

版权

一、事件概述

JavaScript使我们有能力创建动态页面，而事件是可以被JavaScript侦测到的行为。

简单理解: 触发---响应机制。

网页中的每个元素都可以产生某些可以触发JavaScript的事件，例如，我们可以在用户点击某按钮时产生一个事件，然后去执行某些操作。

事件由三部分组成：事件源，事件类型，事件处理程序

<html>
  <body>
   <button id="btn"><button></button></button>
    
    <script>
     //点击一个按钮，弹出对话框
    //事件是有三部分组成: 事件源、事件类型、事件处理程序，我们也称为事件三要素
    //(1)事件源事件被触发的对象谁按钮
    var btn = document.getElementById('btn');
    //(2)事件类型如何触发什么事件，比如鼠标点击(onclick)还是鼠标经过 还是键盘按下
    //(3)事件处理程序通过一个函数赋值的方式完成
    btn.onclick= function(){
        alert("clicked")
    }
    </script>
    
  </body>
</html>

二、常见鼠标事件

三、操作元素

3.1 改变元素内容

element.innerText

从起始位置到终止位置的内容,但它去除 html标签，同时空格和换行也会去掉

element.innerHTML

起始位置到终止位置的全部内容，包括html标签，同时保留空格和换行

<html>
  <body>

    <div id="div1"></div>
    <div id="div2"></div>

    <script>
      // 写
      var div1 = document.querySelector("#div1")
      var div2 = document.querySelector("#div2")

      div1.innerText = "<strong>innerText</strong>"
      div2.innerHTML = "<strong>innerHTML</strong>"

      // 读
      console.log(div2.innerText)
      console.log(div2.innerHTML)

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

innerText和innerHTML的区别

innerText不识别html标签非标准去除空格和换行
innerHTML 识别html标签 W3C标准保留空格和换行的

这两个属性是可读写的, 可以获取元素里面的内容

3.2 改变属性内容

1.innerrext、innerHTM 改变元素内容

2.src、href

3.id、alt、title

<html>
  <body>

    <img src = "./1.jpg">
    <button id="btn">change image</button>

    <script>
     var btn = document.querySelector("#btn")
     var img = document.querySelector("img")

     btn.onclick = ()=>{
      img.src = "./2.jpg"
     }
    </script>
    
  </body>
</html>

3.3 改变表单的属性

利用 DOM 可以操作如下表单元素的属性：

type、value、checked、selected、disabled

<html>
  <body>

    <input type="text" value="please input">
    <button id="change">change value</button>
    <button id="disable">change value</button>
    <script>
      // 获取元素
      var changeBtn =  document.querySelector("#change")
      var disableBtn =  document.querySelector("#disable")
      var input =  document.querySelector("input")

      // 注册事件，处理程序
      changeBtn.onclick = ()=>{
        input.value = "changed"
      }

      disableBtn.onclick = ()=>{
        input.disabled = true
      }
    </script>
    
  </body>
</html>

3.4 改变样式属性

我们可以通过JS 修改元素的大小、颜色、位置等样式.

1.element.style行内样式操作

2.element.className 类名样式操作

<html>
  <body>
    <div></div>
   
    <button id="change">change</button>
    <script>
      // 获取元素
      var changeBtn =  document.querySelector("#change")
      var div =  document.querySelector("div")

      changeBtn.onclick = ()=>{
        div.style.backgroundColor = 'black'
        div.style.width = '250px'
        div.className= 'change div'
      }
    </script>
    
    <style>
      div{
        width: 200px;
        height: 200px;
        background-color: red;
      }
      
      div{
        width: 100px;
        height: 100px;
        background-color: yellow;
      }
    </style>

  </body>
</html>

注意：

Js 修改 style 样式操作, 产生的是行内样式，css 权重比较高
Js 里面的样式采取驼峰命名法比如 fontsize、backgroundcolor
className 会直接更改元素的类名，会覆盖原先的类名; 如果想保留原先的类名，可以做多类名选择器

飞宇千虹

关注

4
点赞
踩
6

收藏

觉得还不错? 一键收藏
0
评论
DOM 基本操作 - 事件基础

JavaScript使我们有能力创建动态页面，而事件是可以被JavaScript侦测到的行为。简单理解: 触发---响应机制。网页中的每个元素都可以产生某些可以触发JavaScript的事件，例如，我们可以在用户点击某按钮时产生一个事件，然后去执行某些操作。事件由三部分组成：事件源，事件类型，事件处理程序。
复制链接

扫一扫