• 【前端】JavaScript-操作元素

    目录

    一、操作元素

    1.改变元素内容

    2.常见元素的属性操作

    3.表单元素的属性操作

    4.样式属性操作

    5.操作元素总结

     6.排他思想

    7.自定义属性操作

    设置属性值：

    移除属性：

    8.H5自定义属性操作

    一、操作元素

    JavaScript的DOM操作可以改变网页内容、结构和样式，我们可以利用DOM操作元素来改变元素里面的内容、属性等。注意以下都是属性

    1.改变元素内容

     元素.innerText

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

     元素.innerHTML

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

    2.常见元素的属性操作

    1. innerText、innerHTML改变元素内容
    2. arc、href
    3. id、alt、title

     实例：

    1. html>
    2. <html lang="en">
    3.  
    4. <head>
    5.     <meta charset="UTF-8">
    6.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
    7.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    8.     <title>Documenttitle>
    9. head>
    10.  
    11. <body>
    12.     <button id="sx">苏醒button>
    13.     <button id="zy">张远button><br>
    14.     <img src="images/sx.jpg" alt="" title="苏醒">
    15.  
    16.     <script>
    17.         //修改元素属性 src
    18.         //1.获取元素
    19.         var sx = document.getElementById('sx');
    20.         var zy = document.getElementById('zy');
    21.         var img = document.querySelector('img');
    22.         //2.注册事件
    23.         zy.onclick = function () {
    24.             img.src = 'images/zy.jpg';
    25.             img.title = '张远';
    26.         }
    27.         sx.onclick = function () {
    28.             img.src = 'images/sx.jpg';
    29.             img.title = '苏醒'
    30.         }
    31.     script>
    32. body>
    33.  
    34. html>

    3.表单元素的属性操作

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

    type、value、checked、selected、disabled

    实例： 

    1. <body>
    2.     <button>按钮button>
    3.     <input type="text" value="请输入内容">
    4.     <script>
    5.         //1.获取元素
    6.         var btn = document.querySelector('button');
    7.         var input = document.querySelector('input');
    8.         //2.注册事件 处理程序
    9.         btn.onclick = function () {
    10.             // input.innerHTML='点击了';//这个是普通盒子 比如 div标签里面的内容
    11.             //表单里面的值 文字内容是通过value来修改的
    12.             input.value = '被点击了';
    13.             //如果想要一个表单被禁用，不能再次被点击
    14.             // btn.disabled = true;
    15.             this.disabled = true;
    16.             // this指向的是时间函数的调用者 btn
    17.             
    18.         }
    19.     script>
    20. body>

    4.样式属性操作

    通过JS修改元素的大小、颜色、位置等样式。

    行内样式操作：

    元素.style        //行内样式操作

    注意：

    1. JS里面的样式采取驼峰命名法
    2. JS修改style样式操作，产生的是行内样式，权重比较高。

    实例： 

    1. html>
    2. <html lang="en">
    3.  
    4. <head>
    5.     <meta charset="UTF-8">
    6.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
    7.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    8.     <title>Documenttitle>
    9.     <style>
    10.         div {
    11.             width: 200px;
    12.             height: 200px;
    13.             background-color: pink;
    14.         }
    15.     style>
    16. head>
    17.  
    18. <body>
    19.     <div>div>
    20.     <script>
    21.         //1.获取元素
    22.         var div = document.querySelector('div');
    23.         //2.注册时间 处理程序
    24.         div.onclick = function () {
    25.             this.style.backgroundColor = 'purple';
    26.             this.style.width = '260px';
    27.         }
    28.     script>
    29. body>
    30.  
    31. html>

    类名样式操作： 

    元素.className   //类名样式操作

    注意：

    1. 如果样式较多，可以采取操作类名方式更改元素样式
    2. class因为是个保留字，因此使用className来操作元素类名属性
    3. className会直接更改元素的类名，会覆盖原先的类名
    4. 如果还想要保留原来的类名：this.className='原来的类名 新加的类名';

    实例：

    1. html>
    2. <html lang="en">
    3.  
    4. <head>
    5.     <meta charset="UTF-8">
    6.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
    7.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    8.     <title>Documenttitle>
    9.     <style>
    10.         div {
    11.             width: 200px;
    12.             height: 200px;
    13.             background-color: pink;
    14.         }
    15.  
    16.         .change {
    17.             background-color: purple;
    18.             margin-top: 100px;
    19.         }
    20.     style>
    21. head>
    22.  
    23. <body>
    24.     <div class="first">div>
    25.     <script>
    26.         var test = document.querySelector('div');
    27.         test.onclick = function () {
    28.             this.className = 'first change';
    29.         }
    30.     script>
    31.  
    32. body>

    5.操作元素总结

     6.排他思想

    如果有同一组元素，我们想要某一个元素实现某种样式，需要用到循环的排他思想算法：

    1. 所有元素全部清除样式
    2. 给当前元素设置样式

    7.自定义属性操作

    1. element.属性   //获取属性值（元素本身自带的属性）
    2. element.getAttribute('属性')   //主要获取自定义的属性（标准）程序员自定义的属性

    设置属性值：

    1. element.属性='值'   //设置内置属性值
    2. element.set Attribute('属性','值')   //主要针对自定义属性

    移除属性：

    element.removeAttribute('属性');

    8.H5自定义属性操作

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

    自定义属性获取通过element.getAttribute('属性')

    但是有些自定义属性很容易引起歧义，不容易判断是元素的内置属性还是自定义属性。

    H5新增了自定义属性：

    1. H5规定自定义属性data-开头作为属性名并且赋值
    2. H5新增的获取自定义属性的方法：element.dataset.index或者element.dataset['index'],ie11才开始支持
  • 相关阅读:
    长连接、短连接
    开学季征文|卷生卷死之新学期大学生自救指南！！！
    字体压缩神器font-spider的使用
    python爬虫基础-response响应头
    【CTF机器人】文件头字节查询(Nonebot2+CQHTTP)
    【Leetcode刷题Python】300. 最长递增子序列
    C#/.NET/.NET Core优秀项目和框架2023年10月简报
    MySQL数据库 #3
    linux tasks errors
    探索JavaScript事件流：DOM中的神奇旅程
  • 原文地址：https://blog.csdn.net/qq_45764950/article/details/127762448