• 【第五部分 | JS WebAPI】2：DOM 元素操作

    目录

    1-1 改变元素内容（去除html和空格换行）

    1-2 改变元素内容（保留html和空格换行 用的最多）

    1-3 获取元素的内容

    [ 更多其它可操作的元素属性 ]

    2-1 修改元素的属性

    2-2 修改表单元素属性

    2-3 使用this指向函数调用者

    3-1 通过 element.style 样式属性操作

    3-2 通过 element.className 进行样式属性批量修改

    4-1 获取用户输入的值 inputElement.value

    4-2 案例：判断用户输入的密码是否符合要求

    5-1 获取自定义属性

    6-2 设置自定义属性的值

    6-3 移除自定义属性

    [ 总结 ]

    事件：进行对元素某些操作的响应

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

    1-1 改变元素内容（去除html和空格换行）

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

    element.innerText = 'XXXXXX';
    1. html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
    6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    7.     <title>Documenttitle>
    8. head>
    9. <body>
    10.     <div id="id">猜猜我是谁div>
    11.     <button id="btn">Guessbutton>
    12.     <script>
    13.         //获取元素
    14.         var id = document.getElementById('id');
    15.         var btn = document.getElementById('btn');
    16.  
    17.         //绑定事件、函数
    18.         btn.onclick = function(){
    19.             id.innerText = '我是Klee';
    20.         }
    21.         
    22.     script>
    23. body>
    24. html>
     

    1-2 改变元素内容（保留html和空格换行 用的最多）

    • innerText不识别html标签，会保留下来显示，而且不会换行和空格

    • innerText是IE自己发起的，火狐不支持；innerHTML是W3C推荐的，用的最多。

    element.innerHTML = 'XXXXX';

    1-3 获取元素的内容

    • element.innerText 和 element.innerHTML 除了能修改元素内容，还能读取元素内容。

    • 区别的方式在于： XXXX = element.innerXXX 则代表获取 ； element.innerXXX = XXX 则代表修改

    [ 更多其它可操作的元素属性 ]

    基本用法：

    获取元素 → 绑定事件 → 声明函数 → 元素.属性 = 要修改的值

    2-1 修改元素的属性

    如 img src="XXXX"，我们通过元素的操作，其实还可以修改诸如src这样的路径

    1.     
    2.     <img src="imgs/p1.jpg" id="img" style="width: 400px;height: 600px;">
    3.     <button id="changeP">换图片button>
    4.     <script>
    5.         //获取元素
    6.         var img = document.getElementById('img');
    7.         var change = document.getElementById('changeP');
    8.         //绑定事件、函数
    9.         change.onclick = function(){
    10.             //修改img的src属性，更换图片
    11.             img.src = 'imgs/p2.jpg';
    12.         }
    13.     script>

     

    2-2 修改表单元素属性

    案例：点击小眼睛把密码改为明文显示

    1.     
    2.     <input type="password" placeholder="input pwd" name="pass" id="pass">
    3.     <button id="eye">eyebutton>
    4.     <script>
    5.         //获取元素
    6.         var pass = document.getElementById('pass');
    7.         var eye = document.getElementById('eye');
    8.         //绑定事件、函数
    9.         eye.onclick = function(){
    10.             pass.type = 'text';
    11.         }
    12.     script>

     案例2：按钮点击之后，不给再点击

     

    2-3 使用this指向函数调用者

    • 上述案例“按钮点击之后，不给再点击” 的 btn.disabled = true; 可以改写为 this.disabled = true; 效果一样

    • this指向的是函数调用者。

    3-1 通过 element.style 样式属性操作

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

     

    element.style 的语法只能一次修改一个属性。 如果需要批量修改属性，建议使用className语法，后面会学习

     

    代码示例

    1.     
    2.     <div class="b" style="width: 100px;height: 100px; background-color: pink;">div>
    3.     <button id="changeStyle">换皮肤button>
    4.     <script>
    5.         //获取元素
    6.         var b = document.getElementsByClassName('b'); //这个获取的是一个元素对象集合！需要 b[0] 取出元素对象
    7.         var block = b[0];
    8.         var changeStyle = document.getElementById('changeStyle');
    9.         //绑定事件和函数
    10.         changeStyle.onclick = function(){
    11.             block.style.backgroundColor = 'blue';//JS的属性名字是驼峰命名法
    12.         }        
    13.     script>

     案例：淘宝二维码点叉隐藏（思路：点击按钮，则隐藏元素）

     案例：循环精灵图

    案例：新浪下拉菜单

    1. html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
    6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    7.     <title>Documenttitle>
    8.     <style>
    9.         * {
    10.             margin: 0;
    11.             padding: 0;
    12.         }
    13.  
    14.         li {
    15.             list-style: none;
    16.         }
    17.  
    18.         .nav {
    19.             position: relative;
    20.  
    21.             width: 100%;
    22.             height: 60px;
    23.             background-color: lightblue;
    24.         }
    25.  
    26.         .nav .box1 {
    27.             width: 100px;
    28.             height: 100%;
    29.             
    30.             color: black;
    31.             font-size: 20px;
    32.             font-weight: 600;
    33.             text-align: center;
    34.             line-height: 60px;
    35.         }
    36.  
    37.         .nav .box1:hover {
    38.             background-color: lightslategray;
    39.         }
    40.  
    41.         .nav .box1content {
    42.             position: absolute;
    43.             left: 0;
    44.             top: 60px;
    45.  
    46.             width: 100px;
    47.             height: 100px;
    48.             background-color: pink;
    49.  
    50.             visibility: hidden;
    51.         }
    52.     style>
    53. head>
    54. <body>
    55.     <div class="nav">
    56.         <div class="box1">下拉菜单div>
    57.         <div class="box1content">
    58.             <li>1li>
    59.             <li>2li>
    60.             <li>3li>
    61.         div>
    62.     div>
    63.  
    64.     <script>
    65.         var box1 = document.querySelector('.nav .box1');
    66.         var content1 = document.querySelector('.nav .box1content');
    67.  
    68.         box1.onmouseover = function(){
    69.             content1.style.visibility = 'visible';
    70.         }
    71.         box1.onmouseout = function(){
    72.             content1.style.visibility = 'hidden';
    73.         }
    74.         content1.onmouseover = function(){
    75.             content1.style.visibility = 'visible';
    76.         }
    77.         content1.onmouseout = function(){
    78.             content1.style.visibility = 'hidden';
    79.         }
    80.  
    81.     script>
    82. body>
    83. html>

     

    3-2 通过 element.className 进行样式属性批量修改

    基本语法

    1. <style>
    2. 	.classname {
    3. 		//属性
    4. 	}
    5. style>
    6.  
    7. <script>
    8. 	var element = document.getXXXX; 
    9. 	element.className = 'classname';
    10. script>


    注意事项

    • 如果样式修改较多，可以采取操作类名方式更改元素样式。

    • 通过element.className赋值的新css类名样式，会覆盖掉原先元素所使用的CSS样式类名

    • 如果想保留原先的CSS样式类名，可以写成 element.className = '原先的类名 新样式类名';

    代码示例

    1. html>
    2. <html lang="en
    4.     UTF-8">
    5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
    6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    7.     <title>Documenttitle>
    8.     <style>
    9.         .box {
    10.             width: 200px;
    11.             height: 200px;
    12.             margin: 100px auto;
    13.             background-color:  pink;
    14.         }
    15.  
    16.         .boxchange {
    17.             width: 300px;
    18.             height: 300px;
    19.             margin: 90px auto;
    20.             background-color: greenyellow;
    21.         }
    22.     style>
    23. head>
    24. <body>
    25.     <div class="box">div>
    26.     <button id="btn">Clickbutton>
    27.     <script>
    28.         var box = document.getElementsByClassName('box');
    29.         var boxObj = box[0];//通过className获取的是元素对象集合，需要通过下标取出元素对象
    30.         var btn = document.getElementById('btn');
    31.         btn.onclick = function(){
    32.             boxObj.className = 'boxchange';//注意，这里的CSS类名不需要加 “ . ”
    33.         }
    34.         
    35.     script>
    36. body>
    37. html>

    4-1 获取用户输入的值 inputElement.value

    1. //input表单元素的元素对象是i的话，则获取用户输入的内容的语法是
    2.  
    3. var XXX = i.value;

    案例：密码框格式提示错误信息

    1. html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
    6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    7.     <title>Documenttitle>
    8.     <style>
    9.         /* CSS样式 */
    10.         * {
    11.             margin: 0;
    12.             padding: 0;
    13.         }
    14.  
    15.         .box {
    16.             width: 700px;
    17.             height: 100px;
    18.             margin: 200px auto;
    19.             background-color: antiquewhite;
    20.         }
    21.  
    22.         .box .put {
    23.             width: 100%;
    24.             height: 50px;
    25.         }
    26.  
    27.         .box .put input {
    28.             display: block;
    29.             float: left;
    30.             margin: 10px;
    31.             width: 300px;
    32.             height: 20px;
    33.         }
    34.  
    35.         .box .put .tips {
    36.             float: left;
    37.  
    38.             margin: 12px;
    39.             height: 20px;
    40.             width: 300px;
    41.             border: red;
    42.  
    43.             line-height: 20px;
    44.             color: red;
    45.             font-weight: 600;
    46.             font-family: 'Microsoft YaHei';
    47.  
    48.             visibility: hidden;
    49.         }
    50.  
    51.  
    52.         .box button {
    53.             margin: 10px;
    54.             display: block;
    55.             float: left;
    56.         }
    57.     style>
    58. head>
    59. <body>
    60.     
    61.     <div class="box">
    62.         <div class="put">
    63.             <input type="password" placeholder="设置密码" name="pwd" value="">
    64.             <div class="tips">X 格式不符合要求！需要6位，且含大小写div>
    65.         div>
    66.         <button>设置button>
    67.     div>
    68.  
    69.     
    70.     <script>
    71.         var btn = document.querySelector('.box button');
    72.         var pwd = document.querySelector('.box .put input');
    73.         var tip = document.querySelector('.box .put .tips');
    74.  
    75.         btn.onclick = function(){
    76.             var pwdStr = pwd.value;//通过input的value获取用户输入
    77.             console.log(pwdStr);
    78.             if(pwdStr.length < 6) {
    79.                 tip.style.visibility = 'visible';
    80.             }
    81.             else {
    82.                 tip.style.visibility = 'hidden';
    83.                 alert('注册成功');
    84.             }
    85.         }
    86.  
    87.     script>
    88.  
    89. body>
    90. html>

     

    路二：光标离开，则触发事件。 input.onblur

    4-2 案例：判断用户输入的密码是否符合要求

    JS中的字符不能直接当ASCII码使用！需要进行转换

    char → ASCII

    1.  let x = 'a';
    2.  x.charCodeAt(); //会输出'a'的ASCII码，即97

    ASCII → char

    String.fromCharCode(97); //会输出ASCII码为97的字符，即'a'

    示例代码：用户输入的密码 小于6位，并且不含大写和小写 则提示不合格

    1. html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
    6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    7.     <title>Documenttitle>
    8.     <style>
    9.         /* CSS样式 */
    10.         * {
    11.             margin: 0;
    12.             padding: 0;
    13.         }
    14.  
    15.         .box {
    16.             width: 700px;
    17.             height: 100px;
    18.             margin: 200px auto;
    19.             background-color: antiquewhite;
    20.         }
    21.  
    22.         .box .put {
    23.             width: 100%;
    24.             height: 50px;
    25.         }
    26.  
    27.         .box .put input {
    28.             display: block;
    29.             float: left;
    30.             margin: 10px;
    31.             width: 300px;
    32.             height: 20px;
    33.         }
    34.  
    35.         .box .put .tips {
    36.             float: left;
    37.  
    38.             margin: 12px;
    39.             height: 20px;
    40.             width: 300px;
    41.             border: red;
    42.  
    43.             line-height: 20px;
    44.             color: red;
    45.             font-weight: 600;
    46.             font-family: 'Microsoft YaHei';
    47.  
    48.             visibility: hidden;
    49.         }
    50.  
    51.  
    52.         .box button {
    53.             margin: 10px;
    54.             display: block;
    55.             float: left;
    56.         }
    57.     style>
    58. head>
    59. <body>
    60.     
    61.     <div class="box">
    62.         <div class="put">
    63.             <input type="password" placeholder="设置密码" name="pwd" value="">
    64.             <div class="tips">X 格式不符合要求！需要6位及以上，且含大小写div>
    65.         div>
    66.         <button>设置button>
    67.     div>
    68.  
    69.     
    70.     <script>
    71.         var btn = document.querySelector('.box button');
    72.         var pwd = document.querySelector('.box .put input');
    73.         var tip = document.querySelector('.box .put .tips');
    74.  
    75.         btn.onclick = function(){
    76.             var pwdStr = pwd.value;//通过input的value获取用户输入
    77.             console.log(pwdStr);
    78.  
    79.             if(pwdStr.length < 6 || !haveBigOrSmall(pwdStr)) {
    80.                 tip.style.visibility = 'visible';
    81.             }
    82.             else {
    83.                 tip.style.visibility = 'hidden';
    84.                 alert('注册成功');
    85.             }
    86.         }
    87.  
    88.         function haveBigOrSmall(str){
    89.             var len = str.length;
    90.             var small = false;
    91.             var big = false;
    92.  
    93.             for(var i=0 ; i
    94.  
    95.                 if(big && small){
    96.                     return true;
    97.                 }
    98.  
    99.                 if( str.charCodeAt(i) >= 65 && str.charCodeAt(i) <= 90 && big!=true ){
    100.                     big = true;
    101.                 }
    102.                 if( str.charCodeAt(i) >= 97 && str.charCodeAt(i) <= 122 && small!=true ){
    103.                     small = true;
    104.                 }
    105.             }
    106.             return false;
    107.         }
    108.  
    109.  
    110.     script>
    111.  
    112. body>
    113. html>

    5-1 获取自定义属性

    什么是自定义属性？

    • 写在标签内的非内置属性，则被视为自定义属性

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

    • 如下列的index。它不属于Html内置的属性，但是也不会编译报错（毕竟Html是文本语言嘛），而是会把index看作一个程序员自定义的属性

     

    <div index="1">div>

    自定义属性如何获取？

    元素对象.getAttribute('属性名字');

    • 需要注意的是：自定义属性的获取语法，也可以作用于 内置元素属性（如style、src、title等）

    区别

    6-2 设置自定义属性的值

    值得注意的是：若标签名中没有对应的自定义属性，则在使用setAttribute的时候会自动添加这个属性

     

    代码示例  

    1. <div index="2">div>
    2. <script>
    3. 	var div = document.getElementByTagName('div'); //获取dom元素对象
    4. 	div.setAttribute('index','2'); //设置对象中的自定义属性的值为2
    5. script>

    6-3 移除自定义属性

    element.removeAttribute('属性');

    [ 总结 ]

  • 相关阅读:
    LeetCode 每日一题 2023/9/11-2023/9/17
    Flink运行时架构 完整使用 (第四章)
    解决 webpack 配置 sass-loader后报错，无法正常build
    ElasticSearch(超详细解说)[springBoot整合ES并简单实现增删改查]
    机器学习概述
    HanLP — 感知机(Perceptron) -- Python
    Qt进程间通信（QSharedMemory、QLocalSocket、QWebSocket、QProcess、D-BUS、QTcpSocket）
    SpringBoot整合Redis - @Cacheable 和 RedisTemplate
    双通道内存和单通道的区别是什么
    Ray+GPU支持高性能计算
  • 原文地址：https://blog.csdn.net/m0_57265007/article/details/127981215