欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页

优雅的获取表单元素、dom树的遍历与常用属性、dom元素的增删改操作、js操作元素内容的几个常用方法、元素的dataset对象、获取元素的计算样式、元素的classList 对象常用方法、事件的添加与派发

程序员文章站 2022-05-21 23:22:15
...
  1. 实例演示如何正确优雅的获取表单元素 2. 实例演示dom树的遍历与常用属性 3. 实例演示dom元素的增删改操作 4. js操作元素内容的几个常用方法,并分析异同 5. 将留言板的实战案例进行仿写,加上一些样式 6. 实例演示 dataset对象 7. 实例演示如何获取元素的计算样式 8. 实例演示 classList 对象常用方法 9. 实例演示事件的添加与派发

一、优雅的获取表单元素

  • 获取表单 － 通过form表单的ID获取
      

    1.  // 通过form表单的id获取整个表单
      2. 

    2.  // document.forms可获取页面所有表单，加上索引[0]或.id可获取指定的表单
      3. 

    3.  console.log(document.forms[0]);
      4. 

    4.  console.log(document.forms.frm);
      5. 

    5.  // 获取表单内的元素，可通过元素的name值来获取：forms.表单id.元素name
      6. 

    6.  console.log(document.forms.frm.username);
      7. 

    7.  // 获取元素的值：forms.表单id.元素name.value,获取其他属性值也一样，如：username.name;username.type
      8. 

    8.  console.log(document.forms.frm.username.value);
      9.
    优雅的获取表单元素、dom树的遍历与常用属性、dom元素的增删改操作、js操作元素内容的几个常用方法、元素的dataset对象、获取元素的计算样式、元素的classList 对象常用方法、事件的添加与派发

二、dom树的遍历与常用属性

    

  1.         // dom树的遍历与常用属性
    2. 

  2.         // 1.获取整个list元素
    3. 

  3.         let div=document.querySelector('.list');
    4. 

  4.         console.log(div);
    5. 

  5.         // 2.获取所有子节点元素：children,获取到的结果是一个元素集合。
    6. 

  6.         let child=div.children;
    7. 

  7.         console.log(child);
    8. 

  8.         // 3.将元素集合转成数组 Array.from(集合) 或者 ...集合
    9. 

  9.         const arr=Array.from(child);
    10. 

  10.         console.log(arr);
    11. 

  11.         const arr2=[...child];
    12. 

  12.         console.log(arr2);
    13. 

    14. 

  14.         // 常用属性
    15. 

  15.         // 1.元素集合.firstElementChild可获取集合中的第一个元素。
    16. 

  16.         console.log(child);
    17. 

  17.         div.firstElementChild.style.backgroundColor='#f60';
    18. 

  18.         // 2.获取最后一个
    19. 

  19.         div.lastElementChild.style.backgroundColor='yellow';
    20. 

  20.         // 获取下一个兄弟元素
    21. 

  21.         div.firstElementChild.nextElementSibling.style.backgroundColor='green';
    22. 

  22.         // 获取上一个兄弟元素
    23. 

  23.         div.lastElementChild.previousElementSibling.style.backgroundColor='red';
    24. 

  24.         // 获取父节点 parentElement或parentNode
    25. 

  25.         div.lastElementChild.parentElement.style.border='5px solid #ccc';
    26.

优雅的获取表单元素、dom树的遍历与常用属性、dom元素的增删改操作、js操作元素内容的几个常用方法、元素的dataset对象、获取元素的计算样式、元素的classList 对象常用方法、事件的添加与派发

三、dom元素的增删改操作

    

  1.         // 创建元素 document.createElement
    2. 

  2.         ul=document.createElement('ul');
    3. 

  3.         document.body.append (ul);
    4. 

  4.         // 创建子元素li
    5. 

  5.         for(let i=0;i<5;i++){
    6. 

  6.             let li=document.createElement('li');
    7. 

  7.             li.textContent='item'+(i+1);
    8. 

  8.             ul.append(li);
    9. 

  9.         }
    10. 

  10.         // 查看元素
    11. 

  11.         // 1.outerHtml获取元素的html字符串
    12. 

  12.         console.log(ul.outerHTML);
    13. 

    14. 

  14.         // 在节点之前插入元素before()
    15. 

  15.         let newLi=document.createElement('li');
    16. 

  16.         newLi.textContent='New-Item';
    17. 

  17.         newLi.style.color='#f60';
    18. 

  18.         // 例：在第4个元素前面插入新建的元素
    19. 

  19.         // 1.先获取第4个元素
    20. 

  20.         let four=document.querySelector('li:nth-of-type(4)');
    21. 

  21.         // 2.插入
    22. 

  22.         four.before(newLi);
    23. 

    24. 

  24.         // 在节点之后插入after()
    25. 

  25.         // 插入节点时必需新建或克隆节点，不能用之前创建的，否则就只是把之前创建的元素剪切移动到此处，之前插入的位置变为空了。
    26. 

  26.         // 例：在第4个节点之后插入新节点
    27. 

  27.         // 1.先创建或克隆新元素:克隆方法：元素.cloneNode(true),参数true如果不写只克隆节点不克隆文本。
    28. 

  28.         let fourAfter=newLi.cloneNode(true);
    29. 

  29.         // 2.插入
    30. 

  30.         four.after(fourAfter);
    31. 

    32. 

  32.         // 在父节点插入元素insertAdjacentElement('插入位置',元素)：有4个位置，节点开始位置之前beforeBegin、开始位置之后afterBegin、节点结束位置之前beforeEnd、结束位置之后afterEnd
    33. 

  33.         // 例：在UL前面插入一个h3
    34. 

  34.         // 1.先创建h3元素
    35. 

  35.         let H3=document.createElement('h3');
    36. 

  36.         H3.textContent='好好学习，天天向上！';
    37. 

  37.         console.log(H3);
    38. 

  38.         ul.insertAdjacentElement('beforeBegin',H3);
    39. 

    40. 

  40.         // 替换元素replaceChild
    41. 

  41.         // 1.创建一个新元素
    42. 

  42.         let a=document.createElement('a');
    43. 

  43.         a.href='https://baidu.com';
    44. 

  44.         a.textContent='百度';
    45. 

  45.         // 2.执行替换最后一个元素
    46. 

  46.         let last=ul.lastElementChild;
    47. 

  47.         ul.replaceChild(a,last);
    48. 

    49. 

  49.         // 删除元素remove(节点)
    50. 

  50.         ul.lastElementChild.remove(last);
    51.

优雅的获取表单元素、dom树的遍历与常用属性、dom元素的增删改操作、js操作元素内容的几个常用方法、元素的dataset对象、获取元素的计算样式、元素的classList 对象常用方法、事件的添加与派发

四、js操作元素内容的几个常用方法及异同

    

  1.         // textContent:返回当前元素及所有后代元素 标签内的文本内容（不含html标签本身），包括隐藏内容(display:none
    2. 

  2.         let box=document.querySelector('.box');
    3. 

  3.         console.log(box.textContent);
    4. 

  4.         // innerText:仅返回可见的文本
    5. 

  5.         console.log(box.innerText);
    6. 

  6.         // innerHTML:返回所有内容，包括html标签、style、文本（包括隐藏的）等全部内容
    7. 

  7.         console.log(box.innerHTML);
    8. 

  8.         // outerHTML:返回元素本身所有的html字符串
    9. 

  9.         console.log(box.outerHTML);
    10.

五、留言板

    

  1. <head>
    2. 

  2.     <meta charset="UTF-8">
    3. 

  3.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
    4. 

  4.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    5. 

  5.     <title>Document</title>
    6. 

  6.     <style>
    7. 

  7.         *{padding: 0;margin: 0;box-sizing: border-box;}
    8. 

  8.         .lycontent {
    9. 

  9.             width: 25em;
    10. 

  10.             height: 3em;
    11. 

  11.             border: 1px solid rgb(3, 165, 138);
    12. 

  12.             padding: 0 10px;
    13. 

  13.             border-radius: 5px;
    14. 

  14.         }
    15. 

  15.         ul{ list-style: none;background-color: bisque;width: 20.8em;margin: -1em 0 0 8.4em;}
    16. 

  16.         li{ height: 2em;line-height: 2em;border-bottom: 1px dashed #ccc;padding-left:0.5em;}
    17. 

  17.         input{margin: 2em 10em;}
    18. 

  18.     </style>
    19. 

  19. </head>
    20. 

  20. <body>
    21. 

  21.     <input type="text" placeholder="请输入留言内容" class="lycontent" onkeydown="addmsg(this);">
    22. 

  22.     <ul class="lylist"></ul>
    23. 

  23.     <script>
    24. 

  24.         function addmsg(obj){
    25. 

  25.             // 判断按键，如果是回车键则执行添加留言
    26. 

  26.             if(event.keyCode==13){
    27. 

  27.                 // 获取文本框元素
    28. 

  28.                 let input=document.querySelector('.lycontent');
    29. 

  29.                 // 获取文本框输入内容
    30. 

  30.                 let con=input.value;
    31. 

  31.                 // 判断输入内容是否为空
    32. 

  32.                 if(con==''){
    33. 

  33.                     alert('总得说点啥吧！');
    34. 

  34.                     return false;
    35. 

  35.                 }
    36. 

  36.                 // 获取ul元素，作为父级插入使用
    37. 

  37.                 let ul=document.querySelector('ul');
    38. 

  38.                 // 新建li元素，并赋值输入的内容
    39. 

  39.                 let li=document.createElement('li');
    40. 

  40.                 li.textContent=con;
    41. 

  41.                 // 根据留言规则，最新的一条显示在最上面，故应将li元素插入父节点开始位置的下方
    42. 

  42.                 ul.insertAdjacentElement('afterBegin',li);
    43. 

  43.                 // 清空文本框并获取焦点
    44. 

  44.                 input.value='';
    45. 

  45.                 input.focus();
    46. 

  46.             }
    47. 

  47.         }
    48. 

  48.     </script>
    49. 

  49. </body>
    50.

优雅的获取表单元素、dom树的遍历与常用属性、dom元素的增删改操作、js操作元素内容的几个常用方法、元素的dataset对象、获取元素的计算样式、元素的classList 对象常用方法、事件的添加与派发

六、dataset对象

内置属性：title/style/id/class等

自定义属性：以data- 开头

    

  1.     <ul>
    2. 

  2.         <!-- data-开头的为自定义属性，用dataset.加上data-后面的自定义内容即可 -->
    3. 

  3.         <li class="item" data-types="电脑">item1</li>
    4. 

  4.         <li class="item" data-types="手机">item2</li>
    5. 

  5.         <li class="item" data-types="平板">item3</li>
    6. 

  6.         <li class="item" data-types="MP3">item4</li>
    7. 

  7.         <li class="item" data-types="电视">item5</li>
    8. 

  8.     </ul>
    9. 

  9.     <div data-me-name='松涛'>Hello World!</div>
    10. 

    

  1.     <script>
    2. 

  2.         let li=document.querySelectorAll('li');
    3. 

  3.         for(let i=0;i<li.length;i++){
    4. 

  4.             // 获取方式1：去掉data-,直接通过元素.dataset.属性。例如：li设置的自定义属性为data-type='pc',则获取时通过li.dataset.type
    5. 

  5.             li[i].onclick=()=>console.log(li[i].dataset.types);
    6. 

  6.         }
    7. 

  7.         // 获取方式2：如果定义成这种形式：data-me-name,也是先去掉data-,然后将me-name转为小驼峰写法：meName
    8. 

  8.         let div=document.querySelector('div');
    9. 

  9.         console.log(div.dataset.meName);
    10. 

  10.         // dataset是可读写属性，即可改变元素的自定义属性值
    11. 

  11.         div.dataset.meName='小明';
    12. 

  12.     </script>
    13.

七、获取元素的计算样式

    

  1. <style>
    2. 

  2.     .box{ width: 10em;height: 10em;}
    3. 

  3. </style>
    4. 

  4. <body>
    5. 

  5.     <div class="box" style="color: rgb(22, 22, 21);background-color: lightblue;">Hello World!</div>
    6. 

  6. </body>
    7. 

    

  1.     // 获取元素样式分两种情况：1.元素行内样式，即定义在元素标签内的。如：<div style='color:red'>Hello</div>
    2. 

  2.                          //  2.文档内定义在<style></style>标签中的样式以及外部引入的CSS样式，这些都属性计算样式。
    3. 

  3.     // 获取第1种情况的方法：利用元素的style属性获取 **行内样式** 的值
    4. 

  4.     // 此方式只能获取元素行内样式定义的属性值，不能获取<style></style>标签中定义的以及外部引入的CSS样式。
    5. 

  5.     let div=document.querySelector('div');
    6. 

  6.     console.log(div.style.color);
    7. 

  7.     console.log(div.style.backgroundColor);
    8. 

  8.     // 获取第2种情况的方法：需要通过window对象的计算样式属性来获取：window.getComputedStyle(元素).属性
    9. 

  9.     // 此方式获取到的宽高度等有数值的属性是带单位的，如高度值表现为200px,如果只想要数值不想要单位，可以通过parseInt转换一下。
    10. 

  10.     let width=window.getComputedStyle(div).width;
    11. 

  11.     console.log(width); // 打印 160px
    12. 

  12.     console.log(parseInt(width)); // 打印 160
    13.

八、classList 对象常用方法

    

  1. <style>
    2. 

  2.     .blue { color: blue;}
    3. 

  3.     .red { color: red;}
    4. 

  4.     .green { color: green;}
    5. 

  5. </style>
    6. 

  6. <body>
    7. 

  7.     <!-- 操作元素的class属性 -->
    8. 

  8.     <p>PHP中文网</p>
    9. 

  9.     <script>
    10. 

  10.         // 通过元素的classList对象来操作class
    11. 

  11.         let p=document.querySelector("p");
    12. 

  12.         console.log(typeof p.classList); // 打印object
    13. 

  13.         // 1.add添加样式,可以叠加
    14. 

  14.         p.classList.add('blue');
    15. 

  15.         p.classList.add('red');
    16. 

  16.         // 2.contains 判断某个样式是否存在，返回值：true/false 
    17. 

  17.         console.log(p.classList.contains('blue')); // 返回true
    18. 

  18.         // 3.replace(旧样式，新样式)替换样式 
    19. 

  19.         p.classList.replace('red','green'); // 返回值为true/false 即替换成功与否，重复替换返回false
    20. 

  20.         // 4.remove(样式)删除样式
    21. 

  21.         p.classList.remove('green'); //无返回值（undefined）
    22. 

  22.         // 5.toggle切换样式
    23. 

  23.         p.classList.toggle('red');
    24. 

  24.     </script>
    25. 

  25. </body>
    26.

九、事件的添加与派发

    

  1. <body>
    2. 

  2.     <button>按钮一</button>
    3. 

  3.     <button>按钮二</button>
    4. 

  4.     <button>按钮三</button>
    5. 

  5.     <script>
    6. 

  6.         // 事件的添加方式一：先获取元素，然后通过元素.onclick(){}进行添加
    7. 

  7.         let btn1=document.querySelector('button');
    8. 

  8.         btn1.onclick=()=>console.log(btn1.textContent);
    9. 

  9.         // 删除事件：null
    10. 

  10.         btn1.onclick=null;
    11. 

    12. 

  12.         // 方式二：事件监听器 addEventListener('事件click等',函数名)
    13. 

  13.         // 第二个参数：函数，可以直接写回调，但不能移除；想要移除，必需得是命名函数且在外部声明
    14. 

  14.         // 注：函数名不用加（），也不用加'',否则报错。
    15. 

  15.         let btn2=document.querySelector('button:nth-of-type(2)');
    16. 

  16.         btn2.addEventListener('click',getName);
    17. 

  17.         function getName(){
    18. 

  18.             console.log(1234);
    19. 

  19.         }
    20. 

  20.         // 移除事件
    21. 

  21.         btn2.removeEventListener('click',getName); // 参数与添加一致
    22. 

    23. 

  23.         // 事件派发：让事件自动执行点击等事件操作，无需干预。
    24. 

  24.             // 以按钮自动执行点击操作为例
    25. 

  25.             let btn3=document.querySelector('button:nth-of-type(3)');
    26. 

  26.             // 1.给按钮添加点击事件
    27. 

  27.             let money=0;
    28. 

  28.             btn3.addEventListener('click',()=>{
    29. 

  29.                 console.log(money);
    30. 

  30.                 money+=1.2;
    31. 

  31.             })
    32. 

  32.             // 2.创建一个自定义事件:用new Event构造函数生成自定义事件，对标按钮的点击事件click
    33. 

  33.             // console.log(typeof new Event('click')); // 返回一个对象类型 object
    34. 

  34.             let getMoney=new Event('click');
    35. 

  35.             // 3.实施事件派发 dispatchEvent(自定义事件名)
    36. 

  36.             btn3.dispatchEvent(getMoney);
    37. 

  37.             // 4.通过setTimeout可以延时执行；通过setInterval可以定时执行
    38. 

  38.             setTimeout(()=>btn3.dispatchEvent(getMoney),1000); //延时派发
    39. 

  39.             setInterval(()=>btn3.dispatchEvent(getMoney),1000); //定时派发
    40. 

  40.     </script>
    41. 

  41. </body>
    42.

上一篇： 基于Docker的可持续交付问题

下一篇： PHP函数header发放HTTP头信息

推荐阅读