DOM基础：事件、获取元素、操作元素

最新推荐文章于 2024-01-04 17:37:30 发布

Rain_xyy

最新推荐文章于 2024-01-04 17:37:30 发布

阅读量1.7k

点赞数

文章标签：前端 javascript html

本文链接：https://blog.csdn.net/m0_63669414/article/details/126334837

版权

本文介绍了JavaScript中的DOM基础，包括DOM简介、元素获取方法如getElementById、getElementsByTagName，HTML5的新方法如getElementsByClassName、querySelector，以及事件处理、元素内容和属性操作、样式修改和自定义属性的使用。同时讲解了事件三要素和排他思想，并提供了相关练习。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

JS的组成

Web APIs是JS的应用，大量使用JS基础语法做交互效果。

API和Web API

API:(Application Programming Interface，应用程序编程接口）；
Web API：浏览器提供的一套操作浏览器功能和页面元素的API（BOM,DOM）,主要针对浏览器做交互效果。

DOM简介

DOM:文档对象模型（Document Object Model），是W3C推荐的处理HTML或XML的标准编程接口。通过这些DOM接口可以改变网页的内容、结构和样式。

DOM树

文档：一个页面就是一个文档，在DOM中用document表示；
元素：页面中所有标签都是元素，在DOM中用element表示；
节点：页面中所有内容都是节点，在DOM中用node表示；

在DOM中，以上内容都看做对象

在DOM中获取元素

根据id获取元素

利用document.getElementById(id)来根据id获取相应的元素。

参数id是不忽略大小写的字符串；
返回一个元素对象；

<body>
    <div id = 'time'>2022-8-13</div>
    //文档在加载时从上往下加载，要先有标签，script写到标签下
    <script>
     var timer = document.getElementById('time');
     // 结果<div id = 'time'>2022-8-13</div>
     console.log(timer);
     // object
     console.log(typeof timer);
     //console.dir 打印返回的元素对象，更详细地查看里面的属性和方法
     // div#time
     console.dir(timer);
 </script>
</body>

根据标签名获取

利用getElementByTagName()

返回带有指定标签名的对象的集合，以伪数组的形式存储；
如果页面中的只有一个相应标签，仍然以伪数组的形式返回；
如果页面中没有相应标签，仍然以空的伪数组的形式返回；
不仅有document.getElementByTagName(),还有element.getElementByTagName(),但是父元素element必须是单个元素，不能是伪数组形式；

<body>
    <ul id = 'ul'>
        <li>你好我好大家好</li>
        <li>你好我好大家好</li>
        <li>你好我好大家好</li>
    </ul>
</body>
<script>
    var list = document.getElementByTagName('li');
    //返回li的集合
    console.log(list);
    //返回第一个li
    console.log(list[0]);
    
    //element.getElementByTagName()
    var ul = document.getElementById('ul');
    console.log(ul.getElementByTagName('li'));
</script>

HTML5新增的获取元素方式

getElementsByClassName（），根据类名获取元素集合；
querySelector（），返回指定选择器的第一个元素对象，里面的选择器需要加符号号，比如：.box；
querySelectorAll(),返回指定选择器的所有元素对象的集合；

获取body和html元素

获取body：document.body;
获取html: documnet.documentElement;

事件

事件三要素

事件三要素：事件源、事件类型、事件处理程序；
事件源：事件被触发的对象；
事件类型：触发的什么事件（鼠标点击，键盘按下等）；
事件处理程序：通过函数赋值的方式完成；

执行事件的步骤

获取事件源
绑定事件
添加事件处理程序

<body>
   <button id = 'bt'>你好</button>
   <script>
    //1.获取事件源
    var bt = document.querySelector('#bt');
    //2.3.绑定事件并添加事件处理程序
    bt.onclick = function(){
        alert('我好，大家好');
    }
   </script>
</body>

操作元素

操作元素内容

可以通过innerText和innerHTML来修改元素的内容。两个属性都是可读写的，但两者有所区别：

innerTex：不识别html标签，会自动去除空格和换行；
innerHTML:识别html标签，保留空格换行；

<body>
   <button>点击显示当前时间</button>
   <div>显示时间位置</div>
   <p>123</p>
   <script>
    var btn = document.querySelector('button');
    var d = document.querySelector('div');
    btn.onclick = function(){
        d.innerHTML = getDate();
    }
    function getDate(){
        var date = new Date();
            //2022年 8月 13日 星期六
            var year = date.getFullYear();
            var month = date.getMonth() + 1;
            var dates = date.getDate();
            var arr = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'];
            var day = date.getDay();
            return '今天是：' + year + '年' + month + '月' + dates + '日 ' + arr[day];
    }
    var p = document.querySelector('p');
    p.innerHTML = getDate();
   </script>
</body>

操作元素属性

可以修改元素的属性，如：src、herf、title等。

<body>
    <button id = 'ldh'>刘德华</button>
    <button id = 'zxy'>张学友</button>
    <img src="../教程代码/第一天/images/ldh.jpg" alt="",title = '刘德华'>
    <script>
        var ldh = document.querySelector('#ldh');
        var zxy = document.querySelector('#zxy');
        var img = document.querySelector('img');
        ldh.onclick = function(){
            img.src = '../教程代码/第一天/images/ldh.jpg';
            img.title = '刘德华';
        }
        zxy.onclick = function(){
            img.src = '../教程代码/第一天/images/zxy.jpg';
            img.title = '张学友';
        }
    </script>
</body>

操作表单属性

通过DOM可以操作表单的以下属性：type、value、checked、selected、disabled。
表单不能用innerHTML和innerText，这俩是用来修改普通盒子的内容

<body>
    <button>按钮</button>
    <input type="text" value=" 输入内容">
    <script>
        var btn = document.querySelector('button');
        var input = document.querySelector('input');
        btn.onclick = function(){
            input.value = '被点击';
            this.disabled = true;
        }
    </script>
</body>

修改样式属性

修改样式的操作：

行内样式操作：element.style

JS修改style样式操作，产生的是行内样式，权重高

<style>
        div{
            width: 200px;
            height: 200px;
            background-color: antiquewhite;
        }
    </style>
</head>
<body>
    <div></div>
    <script>
        var div = document.querySelector('div');
        div.onclick = function(){
            div.style.background = 'red';
        }
    </script>
</body>

类名样式操作：element.className

如果样式比较多，可以采取操作类名的方式来修改元素的样式，className会直接更改元素的类名，会覆盖之前的类名。

<style>
        .a{
            width: 200px;
            height: 200px;
            background-color: antiquewhite;
        }
        .change{
            background-color: aquamarine;
            margin-top: 100px;

        }
    </style>
</head>
<body>
    <div class="a">啦啦啦啦</div>
    <script>
        var div = document.querySelector('.a');
        div.onclick = function(){
        //直接更改类名，注意是否保存以前的类名
            this.className = 'a change';
        }
    </script>
</body>

排他思想

排他思想：首先排除其他人，最后再设置自己的样式。

<body>
    <button>按钮1</button>
    <button>按钮2</button>
    <button>按钮3</button>
    <script>
      //获取所有button
      var buttons = document.getElementsByTagName('button');
      //利用循环为button绑定事件
      for(var i = 0;i<buttons.length;i++){
        buttons[i].onclick = function(){
          //先将所有按钮的背景色去掉
          for(var j = 0;j<buttons.length;j++){
            buttons[j].style.backgroundColor = '';
          }
          //然后让被点击的按钮变蓝
          this.style.backgroundColor = 'blue';
        }
      }
    </script>
  </body>

自定义属性的操作

自定义属性目的：为了保存并使用数据，有些数据可以保存到页面而不用保存到数据库中。

获取属性值

element.属性：只能获取内置属性值
element.getAttribute(‘属性’)：主要用于获取自定义属性
H5新增：element.dataest.index或element.dataest['index]，只能获取自定义属性。如果自定义属性里有多个-连接的单词，在获取时需要采用驼峰命名法而不是直接获取

在H5中规定自定义属性的属性名以data-开头并赋值,如：<div data-index="1"></div>或者使用JS进行设置element.setAttribute('data-index',2)

<div data-index-number = '1'></div>
    <script>
        var div = document.querySelector('div');
        console.log(div.getAttribute('data-index-number'));
        //自定义属性为多个-链接，要使用驼峰命名法
        console.log(div.dataset.indexNumber);
        console.log(div.dataset['indexNumber']);
    </script>