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

青旅半醒 2023-09-23 16:06 130阅读 0赞

目录

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 标签， 同时空格和换行也会去

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

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

基本用法：

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

727d4401815d443fa116c8d5b865b50d.png

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 修改表单元素属性

7b0c1842fbef465ba891034c249033bb.png

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

  1. <!-- 操作表单元素：点击小眼睛可以明文密码 -->
  2.     <input type="password" placeholder="input pwd" name="pass" id="pass">
  3.     <button id="eye">eye</button>
  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：按钮点击之后，不给再点击

81c39f198e444cbb915b49eead436046.png

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

  • 上述案例“按钮点击之后，不给再点击” 的 btn.disabled = true; 可以改写为 this.disabled = true; 效果一样
  • this指向的是函数调用者。

27c3be1a1c5e4dbb93f24e4f86add42b.png

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

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

355e0cab8ca349fd8e2c12fefb544d85.png

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

996a4580099e436b87c622a30a013ae1.png

代码示例

  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>

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

d20bd0fc394f4b3cacaca4e09c05f8bc.png

案例：循环精灵图

c3ad54aba64140769aacbea2d3edd92f.png

案例：新浪下拉菜单

  1. <!DOCTYPE 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>Document</title>
  8.     <style>
  9.         * {
  10.             margin: 0;
  11.             padding: 0;
  12.         }
  14.         li {
  15.             list-style: none;
  16.         }
  18.         .nav {
  19.             position: relative;
  21.             width: 100%;
  22.             height: 60px;
  23.             background-color: lightblue;
  24.         }
  26.         .nav .box1 {
  27.             width: 100px;
  28.             height: 100%;
  30.             color: black;
  31.             font-size: 20px;
  32.             font-weight: 600;
  33.             text-align: center;
  34.             line-height: 60px;
  35.         }
  37.         .nav .box1:hover {
  38.             background-color: lightslategray;
  39.         }
  41.         .nav .box1content {
  42.             position: absolute;
  43.             left: 0;
  44.             top: 60px;
  46.             width: 100px;
  47.             height: 100px;
  48.             background-color: pink;
  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>1</li>
  59.             <li>2</li>
  60.             <li>3</li>
  61.         </div>
  62.     </div>
  64.     <script>
  65.         var box1 = document.querySelector('.nav .box1');
  66.         var content1 = document.querySelector('.nav .box1content');
  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.         }
  81.     </script>
  82. </body>
  83. </html>

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

基本语法

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

注意事项

  • 如果样式修改较多，可以采取操作类名方式更改元素样式。
  • 通过element.className赋值的新css类名样式，会覆盖掉原先元素所使用的CSS样式类名
  • 如果想保留原先的CSS样式类名，可以写成 element.className = ‘原先的类名 新样式类名’;

代码示例

  1. <!DOCTYPE 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>Document</title>
  8.     <style>
  9.         .box {
  10.             width: 200px;
  11.             height: 200px;
  12.             margin: 100px auto;
  13.             background-color:  pink;
  14.         }
  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">Click</button>
  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.         }
  35.     </script>
  36. </body>
  37. </html>

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

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

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

e03bd9aeba1048ba8cd1f1df32fe253d.png

  1. <!DOCTYPE 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>Document</title>
  8.     <style>
  9.         /* CSS样式 */
  10.         * {
  11.             margin: 0;
  12.             padding: 0;
  13.         }
  15.         .box {
  16.             width: 700px;
  17.             height: 100px;
  18.             margin: 200px auto;
  19.             background-color: antiquewhite;
  20.         }
  22.         .box .put {
  23.             width: 100%;
  24.             height: 50px;
  25.         }
  27.         .box .put input {
  28.             display: block;
  29.             float: left;
  30.             margin: 10px;
  31.             width: 300px;
  32.             height: 20px;
  33.         }
  35.         .box .put .tips {
  36.             float: left;
  38.             margin: 12px;
  39.             height: 20px;
  40.             width: 300px;
  41.             border: red;
  43.             line-height: 20px;
  44.             color: red;
  45.             font-weight: 600;
  46.             font-family: 'Microsoft YaHei';
  48.             visibility: hidden;
  49.         }
  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>
  69.     <!-- JS逻辑判断 -->
  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');
  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.         }
  87.     </script>
  89. </body>
  90. </html>

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

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

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

char → ASCII

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

ASCII → char

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

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

  1. <!DOCTYPE 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>Document</title>
  8.     <style>
  9.         /* CSS样式 */
  10.         * {
  11.             margin: 0;
  12.             padding: 0;
  13.         }
  15.         .box {
  16.             width: 700px;
  17.             height: 100px;
  18.             margin: 200px auto;
  19.             background-color: antiquewhite;
  20.         }
  22.         .box .put {
  23.             width: 100%;
  24.             height: 50px;
  25.         }
  27.         .box .put input {
  28.             display: block;
  29.             float: left;
  30.             margin: 10px;
  31.             width: 300px;
  32.             height: 20px;
  33.         }
  35.         .box .put .tips {
  36.             float: left;
  38.             margin: 12px;
  39.             height: 20px;
  40.             width: 300px;
  41.             border: red;
  43.             line-height: 20px;
  44.             color: red;
  45.             font-weight: 600;
  46.             font-family: 'Microsoft YaHei';
  48.             visibility: hidden;
  49.         }
  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>
  69.     <!-- JS逻辑判断 -->
  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');
  75.         btn.onclick = function(){
  76.             var pwdStr = pwd.value;//通过input的value获取用户输入
  77.             console.log(pwdStr);
  79.             if(pwdStr.length < 6 || !haveBigOrSmall(pwdStr)) {
  80.                 tip.style.visibility = 'visible';
  81.             }
  82.             else {
  83.                 tip.style.visibility = 'hidden';
  84.                 alert('注册成功');
  85.             }
  86.         }
  88.         function haveBigOrSmall(str){
  89.             var len = str.length;
  90.             var small = false;
  91.             var big = false;
  93.             for(var i=0 ; i<len ; i++){
  95.                 if(big && small){
  96.                     return true;
  97.                 }
  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.         }
  110.     </script>
  112. </body>
  113. </html>

5-1 获取自定义属性

什么是自定义属性？

  • 写在标签内的非内置属性，则被视为自定义属性
  • 自定义属性目的：是为了保存并使用数据。有些数据可以保存到页面中而不用保存到数据库中。

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

自定义属性如何获取？

  1. 元素对象.getAttribute('属性名字');
  • 需要注意的是：自定义属性的获取语法，也可以作用于 内置元素属性（如style、src、title等）

区别

a6d45810c8b443c5b6b89fd352e4a83a.png

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

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

ae212e9fc3234ba887bb63f9bdd404e0.png

代码示例

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

6-3 移除自定义属性

  1. element.removeAttribute('属性');

[ 总结 ]

c34d6f2706d248ec8a651c7538597204.png

发表评论

表情：
评论列表 （有 0 条评论，130人围观）

还没有评论，来说两句吧...

相关阅读