一、任意数求和

任意数求和（执行函数的时候，传递 N 个值实现求和）

  1. /*
  2.  * 任意数求和
  3.  *    1.传递实参的个数不定
  4.  *    2.传递的值是否为有效数字不定
  5.  *    3.把传递的有效数字进行相加求和
  6.  * 
  7.  * arguments：函数内置的实参集合
  8.  *    1.类数组集合，集合中存储着所有函数执行时，传递的实参信息
  9.  *    2.不论是否设置形参，arguments 都存在
  10.  *    3.不论是否传递实参，arguments 也都存在
  11.  * arguments.callee：存储的是当前函数本身（一般不用的，JS 严格模式下禁止使用这些属性）
  12.  */
  13. function sum() {
  14.     let total = null;
  15.     for (let i = 0; i < arguments.length; i++) {
  16.         // 获取的每一项的结果都要先转换为数字（数学运算）
  17.         let item = Number(arguments[i]);
  18.         // 非有效数字不加
  19.         if (isNaN(item)) {
  20.             continue;
  21.         }
  22.         total += item;
  23.     }
  24.     return total;
  25. };
  26. let total = sum(10, 20, 30, 40);

二、动态操作dom

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>操作DOM</title>
  6.     <style>
  7.         .RED {
  8.             color: red;
  9.             background: lightblue;
  10.         }
  11.         .box {
  12.             margin-top: 10px;
  13.             width: 100px;
  14.             height: 100px;
  15.             background-color: lightblue;
  16.         }
  17.         .box span {
  18.             color: red;
  19.             font-size: 18px;
  20.         }
  21.     </style>
  22. </head>
  23. <body>
  24.     <!-- <div id="haha">哈哈</div> -->
  25.     <div class="box">
  26.         <span>珠峰1</span>
  27.     </div>
  28.     <script>
  29.         let box1 = document.querySelector('.box');
  30.         // 克隆第一份（深克隆）
  31.         let box2 = box1.cloneNode(true);
  32.         box2.querySelector('span').innerText = '珠峰2';
  33.         // 克隆第二份（浅克隆）
  34.         let box3 = box1.cloneNode(false);
  35.         box3.innerHTML = "<span>珠峰3</span>";
  37.         document.body.appendChild(box2);
  38.         document.body.appendChild(box3);
  40.         //===========
  41.         // 容器.removeChild(元素)
  42.         document.body.removeChild(box2);
  43.     </script>
  45.     <script>
  46.         // 动态创建一个DIV元素对象，把其赋给BOX
  47.         let box = document.createElement('div');
  48.         box.id = 'boxActive';
  49.         box.style.width = '200px';
  50.         box.style.height = '200px';
  51.         box.className = 'RED';
  53.         // 动态创建一个文本
  54.         let text = document.createTextNode('珠峰');
  56.         // 添加：容器.appendChild(元素)
  57.         box.appendChild(text);
  58.         // document.body.appendChild(box);
  60.         // 放到指定元素前：容器.insertBefore([新增元素],[指定元素])
  61.         let haha = document.getElementById('haha');
  62.         // haha.parentNode.insertBefore(...)
  63.         document.body.insertBefore(box, haha); 
  64.     </script>
  65. </body>
  66. </html>

三、DOM对象及其基础操作

DOM：document object model 文档对象模型，提供一些属性和方法供我们操作页面中的元素

获取DOM元素的方法

  • document.getElementById() 指定在文档中，基于元素的 ID 或者这个元素对象

  • [context].getElementsByTagName() 在指定上下文(容器)中，通过标签名获取一组元素集合

  • [context].getElementsByClassName() 在指定上下文中，通过样式类名获取一组元素集合 （不兼容IE6~8）

  • document.getElementsByName() 在整个文档中，通过标签的 NAME 属性值获取一组节点集合 （在 IE 中只有表单元素的 NAME 才能识别，所以我们一般只应用于表单元素的处理）

  • document.head / document.body / document.documentElement 获取页面中的 HEAD / BODY / HTML 三个元素

  • [context].querySelector([selector]) 在指定上下文中，通过选择器获取到指定的元素对象

  • [context].querySelectorAll([selector]) 在指定上下文中，通过选择器获取到指定的元素集合

  1. // querySelector / querySelectorAll 不兼容 IE6~8
  2. let box = document.querySelector('#box');
  3. let links = box.querySelectorAll('a');
  4. // links=document.querySelectorAll('#box a');
  5. let aas=document.querySelectorAll('.aa');

四、节点

JS中的节点和描述节点之间关系的属性

节点 ： Node （页面中所有的东西都是节点） 节点集合：NodeList （getElementsByName / querySelectorAll 获取的都是节点集合）

  • 元素节点 （元素标签）
    • nodeType：1
    • nodeName : 大写的标签名
    • nodeValue ：null
  • 文本节点
    • nodeType：3
    • nodeName : ‘#text’
    • nodeValue ：文本内容
  • 注释节点
    • nodeType：8
    • nodeName : ‘#commen’
    • nodeValue ：注释内容
  • 文档节点 document
    • nodeType：9
    • nodeName : ‘#document’
    • nodeValue ：null
  • ……

描述这些节点之家关系的属性

  • childNodes ：获取所有的子节点
  • children：获取所有的元素子节点（子元素标签集合）
  • parent：获取父亲节点
  • firstChild：获取第一个子节点
  • lastChild：获取最后一个子节点
  • firstElementChild / lastElementChild ：获取第一个和最后一个元素子节点 （不兼容IE6~8）
  • previousSibling：获取上一个哥哥节点
  • nextSibling：获取下一个弟弟节点
  • previousElementSibling / nextElementSibling ：获取哥哥和弟弟元素节点（不兼容IE6~8）
  • ……

五、变量名和属性名的区别

  1. var name = 10;
  2. var obj = {
  3.     name:'sufy',
  4.     0:100
  5. };
  • 获取 OBJ 这个对象的 NAME 属性对应的值
  • 一个对象的属性名只有两种格式：数字或者字符串（等基本类型值）
  • 对象.属性名 / 对象 [‘key’]

属性名：属性值（放的是变量也是把变量存储的值拿来做属性值）

ES6新语法：name:name ,当属性名和属性值一样时可以用 name, 简写 当数字作为属性名的时候不能直接点

  1. // for in 循环：用来循环遍历对象中的键值对的（continue 和 break 同样适用）
  2. var obj = {
  3.    name: '春亮',
  4.    age: 52,
  5.    friends: '王鹏,志刚',
  6.    3: 140,
  7.    1: 20,
  8.    2: 149,
  10. };
  11. // for(var 变量(key) in 对象)
  12. // 对象中有多少组键值对，循环就执行几次（除非 break 结束）
  13. for (var key in obj) {
  14.    // 每一次循环 key 变量存储的值：当前对象的属性名
  15.    // 获取属性值：obj[属性名] => obj[key]   obj.key/obj['key']
  16.    console.log('属性名：' + key + ' 属性值：' + obj[key]);
  17. }
  18. // for in 在遍历的时候，优先循环数字属性名（从小到大）