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

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

蓝魔
蓝魔原创
2022年01月07日 18:53:03420浏览
  1. 实例演示如何正确优雅的获取表单元素 2. 实例演示dom树的遍历与常用属性 3. 实例演示dom元素的增删改操作 4. js操作元素内容的几个常用方法,并分析异同 5. 将留言板的实战案例进行仿写,加上一些样式 6. 实例演示 dataset对象 7. 实例演示如何获取元素的计算样式 8. 实例演示 classList 对象常用方法 9. 实例演示事件的添加与派发

一、优雅的获取表单元素

  • 获取表单 - 通过form表单的ID获取
    1. // 通过form表单的id获取整个表单
    2. // document.forms可获取页面所有表单,加上索引[0]或.id可获取指定的表单
    3. console.log(document.forms[0]);
    4. console.log(document.forms.frm);
    5. // 获取表单内的元素,可通过元素的name值来获取:forms.表单id.元素name
    6. console.log(document.forms.frm.username);
    7. // 获取元素的值:forms.表单id.元素name.value,获取其他属性值也一样,如:username.name;username.type
    8. console.log(document.forms.frm.username.value);

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

  1. // dom树的遍历与常用属性
  2. // 1.获取整个list元素
  3. let div=document.querySelector('.list');
  4. console.log(div);
  5. // 2.获取所有子节点元素:children,获取到的结果是一个元素集合。
  6. let child=div.children;
  7. console.log(child);
  8. // 3.将元素集合转成数组 Array.from(集合) 或者 ...集合
  9. const arr=Array.from(child);
  10. console.log(arr);
  11. const arr2=[...child];
  12. console.log(arr2);
  13. // 常用属性
  14. // 1.元素集合.firstElementChild可获取集合中的第一个元素。
  15. console.log(child);
  16. div.firstElementChild.style.backgroundColor='#f60';
  17. // 2.获取最后一个
  18. div.lastElementChild.style.backgroundColor='yellow';
  19. // 获取下一个兄弟元素
  20. div.firstElementChild.nextElementSibling.style.backgroundColor='green';
  21. // 获取上一个兄弟元素
  22. div.lastElementChild.previousElementSibling.style.backgroundColor='red';
  23. // 获取父节点 parentElement或parentNode
  24. div.lastElementChild.parentElement.style.border='5px solid #ccc';

三、dom元素的增删改操作

  1. // 创建元素 document.createElement
  2. ul=document.createElement('ul');
  3. document.body.append (ul);
  4. // 创建子元素li
  5. for(let i=0;i<5;i++){
  6. let li=document.createElement('li');
  7. li.textContent='item'+(i+1);
  8. ul.append(li);
  9. }
  10. // 查看元素
  11. // 1.outerHtml获取元素的html字符串
  12. console.log(ul.outerHTML);
  13. // 在节点之前插入元素before()
  14. let newLi=document.createElement('li');
  15. newLi.textContent='New-Item';
  16. newLi.style.color='#f60';
  17. // 例:在第4个元素前面插入新建的元素
  18. // 1.先获取第4个元素
  19. let four=document.querySelector('li:nth-of-type(4)');
  20. // 2.插入
  21. four.before(newLi);
  22. // 在节点之后插入after()
  23. // 插入节点时必需新建或克隆节点,不能用之前创建的,否则就只是把之前创建的元素剪切移动到此处,之前插入的位置变为空了。
  24. // 例:在第4个节点之后插入新节点
  25. // 1.先创建或克隆新元素:克隆方法:元素.cloneNode(true),参数true如果不写只克隆节点不克隆文本。
  26. let fourAfter=newLi.cloneNode(true);
  27. // 2.插入
  28. four.after(fourAfter);
  29. // 在父节点插入元素insertAdjacentElement('插入位置',元素):有4个位置,节点开始位置之前beforeBegin、开始位置之后afterBegin、节点结束位置之前beforeEnd、结束位置之后afterEnd
  30. // 例:在UL前面插入一个h3
  31. // 1.先创建h3元素
  32. let H3=document.createElement('h3');
  33. H3.textContent='好好学习,天天向上!';
  34. console.log(H3);
  35. ul.insertAdjacentElement('beforeBegin',H3);
  36. // 替换元素replaceChild
  37. // 1.创建一个新元素
  38. let a=document.createElement('a');
  39. a.href='https://baidu.com';
  40. a.textContent='百度';
  41. // 2.执行替换最后一个元素
  42. let last=ul.lastElementChild;
  43. ul.replaceChild(a,last);
  44. // 删除元素remove(节点)
  45. ul.lastElementChild.remove(last);

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

  1. // textContent:返回当前元素及所有后代元素 标签内的文本内容(不含html标签本身),包括隐藏内容(display:none
  2. let box=document.querySelector('.box');
  3. console.log(box.textContent);
  4. // innerText:仅返回可见的文本
  5. console.log(box.innerText);
  6. // innerHTML:返回所有内容,包括html标签、style、文本(包括隐藏的)等全部内容
  7. console.log(box.innerHTML);
  8. // outerHTML:返回元素本身所有的html字符串
  9. console.log(box.outerHTML);

五、留言板

  1. <head>
  2. <meta charset="UTF-8">
  3. <meta http-equiv="X-UA-Compatible" content="IE=edge">
  4. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  5. <title>Document</title>
  6. <style>
  7. *{padding: 0;margin: 0;box-sizing: border-box;}
  8. .lycontent {
  9. width: 25em;
  10. height: 3em;
  11. border: 1px solid rgb(3, 165, 138);
  12. padding: 0 10px;
  13. border-radius: 5px;
  14. }
  15. ul{ list-style: none;background-color: bisque;width: 20.8em;margin: -1em 0 0 8.4em;}
  16. li{ height: 2em;line-height: 2em;border-bottom: 1px dashed #ccc;padding-left:0.5em;}
  17. input{margin: 2em 10em;}
  18. </style>
  19. </head>
  20. <body>
  21. <input type="text" placeholder="请输入留言内容" class="lycontent" onkeydown="addmsg(this);">
  22. <ul class="lylist"></ul>
  23. <script>
  24. function addmsg(obj){
  25. // 判断按键,如果是回车键则执行添加留言
  26. if(event.keyCode==13){
  27. // 获取文本框元素
  28. let input=document.querySelector('.lycontent');
  29. // 获取文本框输入内容
  30. let con=input.value;
  31. // 判断输入内容是否为空
  32. if(con==''){
  33. alert('总得说点啥吧!');
  34. return false;
  35. }
  36. // 获取ul元素,作为父级插入使用
  37. let ul=document.querySelector('ul');
  38. // 新建li元素,并赋值输入的内容
  39. let li=document.createElement('li');
  40. li.textContent=con;
  41. // 根据留言规则,最新的一条显示在最上面,故应将li元素插入父节点开始位置的下方
  42. ul.insertAdjacentElement('afterBegin',li);
  43. // 清空文本框并获取焦点
  44. input.value='';
  45. input.focus();
  46. }
  47. }
  48. </script>
  49. </body>

六、dataset对象

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

自定义属性:以data- 开头

  1. <ul>
  2. <!-- data-开头的为自定义属性,用dataset.加上data-后面的自定义内容即可 -->
  3. <li class="item" data-types="电脑">item1</li>
  4. <li class="item" data-types="手机">item2</li>
  5. <li class="item" data-types="平板">item3</li>
  6. <li class="item" data-types="MP3">item4</li>
  7. <li class="item" data-types="电视">item5</li>
  8. </ul>
  9. <div data-me-name='松涛'>Hello World!</div>
  1. <script>
  2. let li=document.querySelectorAll('li');
  3. for(let i=0;i<li.length;i++){
  4. // 获取方式1:去掉data-,直接通过元素.dataset.属性。例如:li设置的自定义属性为data-type='pc',则获取时通过li.dataset.type
  5. li[i].onclick=()=>console.log(li[i].dataset.types);
  6. }
  7. // 获取方式2:如果定义成这种形式:data-me-name,也是先去掉data-,然后将me-name转为小驼峰写法:meName
  8. let div=document.querySelector('div');
  9. console.log(div.dataset.meName);
  10. // dataset是可读写属性,即可改变元素的自定义属性值
  11. div.dataset.meName='小明';
  12. </script>

七、获取元素的计算样式

  1. <style>
  2. .box{ width: 10em;height: 10em;}
  3. </style>
  4. <body>
  5. <div class="box" style="color: rgb(22, 22, 21);background-color: lightblue;">Hello World!</div>
  6. </body>
  1. // 获取元素样式分两种情况:1.元素行内样式,即定义在元素标签内的。如:<div style='color:red'>Hello</div>
  2. // 2.文档内定义在<style></style>标签中的样式以及外部引入的CSS样式,这些都属性计算样式。
  3. // 获取第1种情况的方法:利用元素的style属性获取 **行内样式** 的值
  4. // 此方式只能获取元素行内样式定义的属性值,不能获取<style></style>标签中定义的以及外部引入的CSS样式。
  5. let div=document.querySelector('div');
  6. console.log(div.style.color);
  7. console.log(div.style.backgroundColor);
  8. // 获取第2种情况的方法:需要通过window对象的计算样式属性来获取:window.getComputedStyle(元素).属性
  9. // 此方式获取到的宽高度等有数值的属性是带单位的,如高度值表现为200px,如果只想要数值不想要单位,可以通过parseInt转换一下。
  10. let width=window.getComputedStyle(div).width;
  11. console.log(width); // 打印 160px
  12. console.log(parseInt(width)); // 打印 160

八、classList 对象常用方法

  1. <style>
  2. .blue { color: blue;}
  3. .red { color: red;}
  4. .green { color: green;}
  5. </style>
  6. <body>
  7. <!-- 操作元素的class属性 -->
  8. <p>PHP中文网</p>
  9. <script>
  10. // 通过元素的classList对象来操作class
  11. let p=document.querySelector("p");
  12. console.log(typeof p.classList); // 打印object
  13. // 1.add添加样式,可以叠加
  14. p.classList.add('blue');
  15. p.classList.add('red');
  16. // 2.contains 判断某个样式是否存在,返回值:true/false
  17. console.log(p.classList.contains('blue')); // 返回true
  18. // 3.replace(旧样式,新样式)替换样式
  19. p.classList.replace('red','green'); // 返回值为true/false 即替换成功与否,重复替换返回false
  20. // 4.remove(样式)删除样式
  21. p.classList.remove('green'); //无返回值(undefined)
  22. // 5.toggle切换样式
  23. p.classList.toggle('red');
  24. </script>
  25. </body>

九、事件的添加与派发

  1. <body>
  2. <button>按钮一</button>
  3. <button>按钮二</button>
  4. <button>按钮三</button>
  5. <script>
  6. // 事件的添加方式一:先获取元素,然后通过元素.onclick(){}进行添加
  7. let btn1=document.querySelector('button');
  8. btn1.onclick=()=>console.log(btn1.textContent);
  9. // 删除事件:null
  10. btn1.onclick=null;
  11. // 方式二:事件监听器 addEventListener('事件click等',函数名)
  12. // 第二个参数:函数,可以直接写回调,但不能移除;想要移除,必需得是命名函数且在外部声明
  13. // 注:函数名不用加(),也不用加'',否则报错。
  14. let btn2=document.querySelector('button:nth-of-type(2)');
  15. btn2.addEventListener('click',getName);
  16. function getName(){
  17. console.log(1234);
  18. }
  19. // 移除事件
  20. btn2.removeEventListener('click',getName); // 参数与添加一致
  21. // 事件派发:让事件自动执行点击等事件操作,无需干预。
  22. // 以按钮自动执行点击操作为例
  23. let btn3=document.querySelector('button:nth-of-type(3)');
  24. // 1.给按钮添加点击事件
  25. let money=0;
  26. btn3.addEventListener('click',()=>{
  27. console.log(money);
  28. money+=1.2;
  29. })
  30. // 2.创建一个自定义事件:用new Event构造函数生成自定义事件,对标按钮的点击事件click
  31. // console.log(typeof new Event('click')); // 返回一个对象类型 object
  32. let getMoney=new Event('click');
  33. // 3.实施事件派发 dispatchEvent(自定义事件名)
  34. btn3.dispatchEvent(getMoney);
  35. // 4.通过setTimeout可以延时执行;通过setInterval可以定时执行
  36. setTimeout(()=>btn3.dispatchEvent(getMoney),1000); //延时派发
  37. setInterval(()=>btn3.dispatchEvent(getMoney),1000); //定时派发
  38. </script>
  39. </body>
声明:本文内容转载自脚本之家,由网友自发贡献,版权归原作者所有,如您发现涉嫌抄袭侵权,请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言,请遵守新闻评论服务协议