简体中文（ZH-CN）English（EN）繁体中文（ZH-TW）日本語（JA）한국어（KO）Melayu（MS）Français（FR）Deutsch（DE）
Home
Article
Q&A
Course
Topic
Download
Game
Dictionary
Recent Updates

博客列表 >1. 自定义类数组,并说出与纯数组的区别与联系,哪些地方会用到类数组 2. 获取dom元素的API有几个,他们的使用场景是什么? 3. 如何优雅的获取form表单元素与控件的值? 4. dom元素的遍历与常用API有哪些, 实例演示

1. 自定义类数组,并说出与纯数组的区别与联系,哪些地方会用到类数组 2. 获取dom元素的API有几个,他们的使用场景是什么? 3. 如何优雅的获取form表单元素与控件的值? 4. dom元素的遍历与常用API有哪些, 实例演示

P粉314265155
P粉314265155原创
2022年07月27日 07:56:01311浏览

浏览器的js属性

  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  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>浏览器的js属性</title>
  8. </head>
  9. <body>
  10.     <!-- 1、预定义属性 id \class、style -->
  11. <button id="1" class="2" style="color: red;">按钮1</button>
  13. <!-- 2、z自定义属性  data-xxx-->
  14. <button id="3" class="4"  data-text="自定义">自定义按钮</button>
  16. <!-- 3、预定义事件   on+事件名称  事件属性为JS代码 -->
  17. <button onclick="document.body.style.background='blue'">预定义事件按键</button>
  18. <!-- 写到事件属性的js 仅限对当前目标有效   内联脚本、行内脚本  js作用域 -->
  20. <!-- 如果想点击变色，再次点击还原 -->
  22. <button onclick="set(this)">背景变色</button>
  23. <!-- js 代码可以自动合并 -->
  24. <script>  
  25.     // 开关
  26.     let status = false;
  27.     function set (a) {    
  28.             status = !status;
  29.         let  bg = status?'yellow' :null;
  30.         let text =status ?'还原背景' : '设置背景';
  31.         document.body.style.backgroundColor =bg;
  32.         a.textContent = text;
  33. }
  34. </script>
  37. <button onclick="set(this)">背景变色</button>
  38. <!-- js 外部引入 ，主语js代码要放到后面，不要放到前面 -->
  39. <script src="../0725/js/zuoye.js"></script>
  40. </body>
  41. </html>
  1. <!-- 外部引入js  -->
  2.  // 开关
  3.  let status = false;
  4.  function set (a) {    
  5.          status = !status;
  6.      let  bg = status?'yellow' :null;
  7.      let text =status ?'还原背景' : '设置背景';
  8.      document.body.style.backgroundColor =bg;
  9.      a.textContent = text;
  10. }
  11. ·
效果

自定义数组

  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  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>类数组</title>
  8. </head>
  9. <body>
  10.     <script>
  11.    const name = ['小红','小黑','小明'];
  12.    console.log(name);
  13.    console.log(name[0]);
  15.    console.log('------------------');
  16. // 类数组  类似数组
  17. const animals = {
  18.  0 : 'dog',
  19.  1:'cat',
  20.  3:'pig',
  21. };
  22. // 访问方式
  23. // 方法一    0是非法标识符   用【】
  24. console.log(animals[0],animals[1],animals[2]);
  25. // 数组特征
  26. // 1、数组就是一个对象，属性从 0开始递增 有 length属性
  27. // 2、类数组跟 数组类似
  28.     </script>
  29. </body>
  30. </html>
效果

dom元素获取

  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  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>dom元素获取</title>
  8. </head>
  9. <body>
  10.  <ul class="list">
  11.     <li class="item">item1</li>
  12.     <li class="item">item2</li>
  13.     <li class="item">item3</li>
  14.     <li class="item">item4</li>
  15.     <li class="item">item5</li>
  16.     <li class="item">item6</li>
  17.  </ul>
  18.     <script>
  19.             // 获取模型/模式两种
  20.             // 1、获取一组  querySelectorAll()
  21.             // 2、获取一个querySelector()
  22. // 一、一次性获取一组
  23. // 获取ul list  注意   .lits 跟.item之间要有空格
  24. const items = document.querySelectorAll('.list .item');
  26. // douquerySelectorAll()
  27. console.log(items);
  28. // 获取数组接口  注意要keys 复数  节点列表对象
  29. console.log(items.keys());
  30. // 数组采用 for of遍历  获取 键
  31. for (let k of items.keys()  )
  32.  console.log(k);
  33.  // 数组采用 for of遍历  获取 值
  34.  for (let v of items.values()  )
  35.  console.log(v);
  36.  // 数组采用 for of遍历  获取  entries   键值对   数组化
  37.  for (let kv of items.entries()  )
  38.  console.log(kv);
  39.  console.log('----------------');
  40. // 简化版   forEach(callback)     callback  是指回调函数  两个值  第二值 是可选的
  41. // function (当前正在遍历的值，当前值的索引){   }   注意变量跟forEach位置及括弧  
  42. items.forEach(function(v,k){
  43.     console.log(k,v);
  44. });
  45. console.log('----------------');
  46. items.forEach(function(v){
  47.     console.log(v);
  48.     // 修改颜色  
  49.     v.style.backgroundColor = 'red';
  50. });
  51. console.log('----------------');
  52. // 进一步简化  胖箭头
  53. items.forEach(v  =>  console.log(v));
  54.     // 修改颜色  
  55.     items.forEach(v  =>  v.style.backgroundColor = 'blue');
  57. // 二、一次性获取一个  返回的是数组集合的第一个
  58. // document.querySelectorAll()中括弧里面可以使用伪类获取某一个  类似id
  59. // const eles = document.querySelectorAll('.list .item:first-of-type');
  60. //       console.log(eles);
  61. const  fi  = document.querySelectorAll('.list .item:first-of-type');
  62. // 获取第一个
  63. console.log(fi);
  64. // 获取第一个  
  65. console.log(fi[0]);
  66. // 给第一个加背景色
  67. fi[0].style.backgroundColor = 'red';
  69. // 优化简版获取
  70. const first = document.querySelector('.list .item');
  71. console.log(first);
  72. // 给第一个 字体换上白色
  73. first.style.color = 'white';
  74. console.log('----------------');
  75. //   querySelector/querySelectorAll: 可以在任何元素上调用,不是只用在document
  76. // 获取一组元素 ul  另一 方法
  77. const  one = document.querySelector('.list');
  78. console.log(one);
  79. console.log('----------------');
  80. // const ones   =   list.querySelectorAll('.item');
  82. // const ones = list.querySelectorAll('.item');
  83. // ones.forEach(li => (li.style.backgroundColor = 'violet'));
  84. // 注意词汇 one 已经在上面定义获取为 .list  了
  85. const ones = one.querySelectorAll('.item');
  86. ones.forEach(li => (li.style.backgroundColor = 'violet'));
  88. // 3、快捷方式
  89.  console.log(document.querySelector('body'));
  90.  console.log(document.body);
  94.     </script>
  95. </body>
  96. </html>
效果

表单元素

  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  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>form表单元素</title>
  8. </head>
  9. <body>
  10.     <form aaction="login.php" method="post" id="login">
  11.         <!-- fieldset是控件组标签，该标签内容的周围将绘制边框 -->
  12.         <fieldset class="login">
  13.             <!-- legend 元素为 fieldset 元素定义标题 -->
  14.             <legend>用户登录</legend>
  15.             <label for="zhanghu">账户：</label>
  16.           <input type="zhanghu" name="zhanghu" id="zhanghu" value="18963300001" autofocus> 
  17.           <br>
  18.           <label for="password">密码：</label>
  19.           <input type="password" name="password" id="password" value="123456" autofocus> 
  20.           <br><button>提交</button>
  21.         </fieldset>
  22. <script>
  23.     // 作业3的方式
  24.   const  form =  document.querySelector('#login');
  25.   console.log(form);
  26.   console.log(document.querySelector('#zhanghu').value);
  27.   console.log('-----------');
  28. // 简洁化  forms.   三种方式
  29. console.log(document.forms[0]);
  30. console.log('-----------');
  31.         console.log(document.forms['login']);
  32.         console.log('-----------');
  33.         console.log(document.forms.login);
  34.         console.log('-----------');
  36. // id 相当于name  反过来一样
  37. // 可以跟css 一样 一层一层一点点获取
  38. console.log(document.forms.login .zhanghu.value);
  39.       // 前后端分离, 前端发送json到服务器
  40.       // json: js对象的序列化,字符串
  41.     //   第一步先获取值
  42.       let  zhanghu = document.forms.login .zhanghu.value;
  43.       let  password = document.forms.login .password.value;
  44.   //   第二 步 开始组装数组
  45.     let user = { zhanghu,password};
  46.         //   第三步 开始组装js
  47.     let json = JSON.stringify(user);
  48.     console.log(json);
  49. </script>
  52.     </form>
  53. </body>
  54. </html>
效果

dom树

  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  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>遍历dom树</title>
  8. </head>
  9. <body>
  10.     <ul class="list">
  11.         <li class="item">item1</li>
  12.         <li class="item">item2</li>
  13.         <li class="item">item3</li>
  14.         <li class="item">item4</li>
  15.         <li class="item">item5</li>
  16.         <li class="item">item6</li>
  17.     </ul>
  18.     <script>
  19.         // 1、节点类型
  20.         // 2、Windows 全局对象
  21.         // 2、document 文档对象
  22.         // 3、element  元素对象
  23.         // 4、textcontent  文本对象 
  24.         let ul = document.querySelector ('.list');
  25.         console.log(ul);
  26.         console.log(ul.children);
  27.         // ul节点对象，包含回车  
  28.         console.log(ul.childNodes);
  29.         ul.childNodes.forEach(node => {
  30.             // 如果节点类型 是1 标识约束节点
  31.             if (node.nodeType  ==1){
  32.                 console.log(node);
  33.             }
  34.         });
  35.     //  只返回元素类型的节点，我们需要关注。类数组形式
  36.         console.log(ul.children);
  37. // 给所有元素变颜色
  38. // 第一步，类数组变为真数组  不建议
  39. console.log(Array.from(ul.children));
  40. // 简化版   类数组变为真数组   ...rest
  41. console.log(...ul.children);
  42. // 手动放到数组内  并使用foreach遍历
  43. [...ul.children].forEach(li =>(li.style.color = 'blue'));
  45. // 遍历
  46. // 获取第一个
  47. console.log([...ul.children][0]);
  48. // 给第一个加背景色
  49. [...ul.children][0].style.backgroundColor = 'red';
  50. // 优雅简答
  51. // 获取第一个
  52. ul.firstElementChild.style.backgroundColor = 'red';
  53.     // 获取下一个
  54.     ul.firstElementChild.nextElementSibling.style.backgroundColor = 'red';
  55.         // 获取最后一个
  56.         [...ul.children][ul.children.length - 1].style.backgroundColor = 'red';
  57.     // 获取最后一个再次简化
  58.     ul.lastElementChild.style.backgroundColor = 'blue';
  59. //    获取最后一个的前一个
  60. ul.lastElementChild.previousElementSibling.style.backgroundColor = 'blue';
  63. // 获取父节点  父节点一定是元素 或文档节点
  65. ul.lastElementChild.parentElement.style.border = '5px solid red'
  67.   </script>
  68. </body>
  69. </html>

上一条：自定义类数组与纯数组的区别 dom元素的API使用场景 获取form表单元素与控件 dom元素的遍历与常用API下一条：类数组、获取DOM元素、表单元素的获取、遍历DOM树
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多