简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Home > List of blog posts > 类数组以及dom操作中类数组的使用,表单元素的获取详解
Blogger Information
Blog 25
fans 1
comment 0
visits 12884
Special Recommendation
More>
Related recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
类数组以及dom操作中类数组的使用,表单元素的获取详解
xueblog9的进阶之旅
Original
440 people have browsed it
  1. 浏览器中的js

  2. js使用场景:传统:浏览器使用,扩展:服务器(node.js,不涉及DOM操作)

  3. 常识:
    3.1 浏览器是用来显示页面的
    3.2 页面使用’html’写的
    3.3 凡是出现在html中的元素,必须用’标签’来描述
    3.4 js用在html中,必须用标签

  4. 属性
    4.1 预定义属性:id,class,style
    4.2 自定义属性:data-text = ‘’,data-前缀,值都是
    4.3 预定义事件属性:on+事件名称,事件属性的值都是js代码;
    4.3.1 写到事件属性中的js代码,仅限于对当前的目标优先,这叫:内联/行内脚本
    4.3.1 写到script标签内部的脚本,文档脚本或内部脚本,仅在当前html中生效
    4.4.1 在</body>前引入外部js,引入标签<script src = ''></script>

  5. 类数组:
    5.1 定义:就是一个键从0开始的正整数对象,但是length属性需要定义在最后
    5.2 访问方式与真数组一样,必须在最后定义length属性，否则不可用length属性选择对象内容

  6. 类数组常用在dom(document object model)操作中,获取对象
    6.1 querySelectorAll():获取一组
    6.2 querySelector():获取一个
    6.3 获取格式:const 常量名 = document(html标签区域,也可以用body等等).querySelectorAll(‘css选择器即可’)
    6.4 childNodes:获取所有类型子节点,该属性是获得所有节点,文本也算是一个节点
    6.5 nodeType:节点类型.可以判断筛选元素节点,1(element),3(文本节点)，9（document节点）
    6.6 children:直接获取元素类型的节点;
    6.7 Array.form(类数组):类数组转换为真数组,也可以利用…rest属性转化为真数组
    6.8 firstElementChild:第一个子元素
    6.9 nextElementSibling:下一个兄弟元素
    6.10 previousElementSibling:上一个兄弟元素
    6.11 parentElement:父元素

  7. 表单元素的获取
    7.1 querySelectorAll(),querySelector()这两个api也可以获取
    7.2 根据id或者name去获取表单的参数
    7.3 定义字面量时,需要先用与name或者id相同的变量名获取值,字面量中才可以省去值的书写

  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>test</title>
  8. </head>
  9. <body>
  10.     <style>
  11.         table,
  12.         tbody,
  13.         th,
  14.         tr,
  15.         td {
  16.             border: 1px solid black;
  17.             border-collapse: collapse;
  18.         }
  19.     </style>
  20.     <table class="tab">
  21.         <caption>课程表</caption>
  22.         <thead>
  23.             <th>时间</th>
  24.             <th>星期一</th>
  25.             <th>星期二</th>
  26.             <th>星期三</th>
  27.             <th>星期四</th>
  28.             <th>星期五</th>
  29.         </thead>
  30.         <tbody>
  31.             <tr>
  32.                 <td>语文课</td>
  33.                 <td>数学课</td>
  34.                 <td>英语课</td>
  35.                 <td>体育课</td>
  36.                 <td>音乐课</td>
  37.                 <td>生物课</td>
  38.             </tr>
  39.         </tbody>
  40.     </table>
  41.     <form action="" method="post" id="login">
  42.         <fieldset>
  43.             <legend>用户登陆</legend>
  44.             <label for="tel">手机号:</label>
  45.             <input type="tel" name="tel" value="12345678998" autofocus />
  46.             <label for="">密码:</label>
  47.             <input type="password" id="password" value="123456" />
  48.             <button>提交</button>
  49.         </fieldset>
  50.     </form>
  51.     <script src="./zuoye.js"></script>
  52. </body>
  53. </html>
  1.         // 类数组：其实是一个键从0开始的正整数的对象，并且同样具有length属性
  2.         // (必须在最后定义length属性，否则不可用length属性选择对象内容)
  3.         // 访问方式与真数组一样；
  4.         const arraylei = {
  5.             0: '数据1',
  6.             1: '数据2',
  7.             2: '数据3',
  8.             3: '数据4',
  9.             length: 4
  10.         };
  11.         // length: 4
  12.         console.log(arraylei);
  13.         console.log(arraylei[0]);
  14.         console.log(arraylei[arraylei.length - 1])
  16.         // 类数组常用在dom操作中，获取对象
  17.         // querySelectorAll():获取一组
  18.         // querySelector():获取一个
  19.         // 对象命名建议与提取标签名一致，便于开发时一目了然，这边命名不一至是个人所为
  20.         const tabarr = document.querySelectorAll('table thead th'); // 获取所有th在tabarr对象内作为类数组
  21.         const tabarr2 = document.querySelectorAll('table thead th:nth-of-type(2)')
  22.         tabarr.forEach(x => (x.style.backgroundColor = 'yellow')); // 使用forEach遍历tabarr对象内的类数组
  23.         console.log(tabarr);
  24.         console.log(tabarr[4]);
  25.         console.log(tabarr2);
  26.         tabarr[4].style.backgroundColor = 'blue'; // 指定某个元素的css样式设置
  27.         const tabper = document.querySelector('table thead'); // 获取thead标签节点作为tabper元素组成的数组
  28.         const tabper2 = tabper.querySelector('th'); // 获取第一个th标签做为tabper2对象内的一个元素组成的数组
  29.         console.log(tabper);
  30.         console.log(tabper.textContent); // textContent只取tabper对象内的文本内容
  31.         console.log(tabper2);
  33.         // 遍历dom树
  34.         console.log('-----------遍历dom树--------------')
  35.         const tr = document.querySelector('table tbody tr'); // 获取tr元素作为对象
  36.         console.log(tr.childNodes); // childNodes：获取所有类型子节点
  37.         tr.childNodes.forEach(y => { // childNodes获取之后需要通过nodeType去判断获取元素类型的节点
  38.             if (y.nodeType == 1) { // nodeType:1(element),3(文本节点)，9（document节点）
  39.                 console.log(y);
  40.             }
  41.         });
  42.         console.log(tr.children); // children：直接获取元素类型的节点；
  43.         // const trarry = Array.from(tr.children); // 类数组转换为真数组
  44.         const trarry = ([...tr.children]); // 利用...rest属性转换为真数组，更加的优雅
  45.         console.log(trarry);
  46.         tr.firstElementChild.style.color = 'green'; // 选择tr下面的第一个子元素
  47.         tr.firstElementChild.nextElementSibling.style.color = 'red'; // 选择tr下面的第一个的第二个子元素
  48.         tr.lastElementChild.style.color = 'yellow'; // 选择tr下面的最后一个子元素
  49.         tr.lastElementChild.previousElementSibling.style.color = 'yellow'; // 选择tr下面最后一个的前一个子元素
  50.         tr.lastElementChild.parentElement.style.background = '#555'; // 选择tr下面最后个子元素的父级元素,就是tr本身
  52.         // 表单元素的获取
  53.         // querySelectorAll(),querySelector()这两个api也可以获取,不在举例
  54.         let x = (document.forms.login); // 根据id属性获取,与name效果相同
  55.         let y = (document.forms.login.tel); // 根据name属性获取,与id效果相同
  56.         let tel = (document.forms.login.tel.value); // 根绝value属性获取
  57.         let password = (document.forms.login.password.value);
  58.         let k = {
  59.             tel, // 根据上面与name或者id相同的变量名获取值,字面量中即可省去值的书写
  60.             password
  61.         }; // 对象字面量
  62.         let m = JSON.stringify(k); // JSON.stringify()将对象转化为字符串
  63.         console.log(y);
  64.         console.log(tel);
  65.         console.log(x);
  66.         console.log(m);

效果

Correcting teacher：PHPzPHPz

Correction status：qualified

Teacher's comments：
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post
About us Disclaimer Sitemap
php.cn：Public welfare online PHP training，Help PHP learners grow quickly！