1.给数组去重的方法

  • 利用对象相同属性值会被覆盖的特点来去重

    1. let ary = [100, 200, 400, 200, 200];
    2.       // 去除重复项
    4.       function unique(ary) {
    5.           // 1、创建一个新的对象，然后循环数组，把数组的每一项既当做属性名又当做属性值给对象新增键值对
    6.           // 2、创建一个新的数组，然后用for in去遍历对象，把每一个键值对的属性值放到这个新数组中
    7.           let obj = {};
    8.           for (var i = 0; i < ary.length; i++) {
    9.               ary[i] // 代表数组的每一项
    10.               obj[ary[i]] = ary[i]; // 给object新增键值对
    11.               // obj[100] = 100
    12.               // obj[200] = 200
    13.           }
    14.           ary = [];
    15.           for (var key in obj) {
    16.               ary.push(obj[key])
    17.           }
    18.           return ary;
    19.       }
    20.       console.log(unique(ary));

    2.获取DOM元素的方法

  • 通过ID名来获取:document.getElementbyId(‘id’);-获得的是一个元素对象

  • 通过类名来获取:document.getElementsByClassName(‘a’);获得的是一个元素集合

  • 通过标签名来获取:ocument.getElementbyTagName(‘li’); -获得的是一个元素集合 ```javascript // 获取dom元素的方法

    1.   // document.getElementById('id名'):通过id名去获取元素，获取的是一个元素对象，如果获取不到就是null
    3.   // context.getElementsByTagName('标签名')：通过标签名去获取元素，获取的是一个元素集合(类数组)，如果获取不到就是空元素集合 []
    5.   // context.getElementsByClassName('类名')：通过类名去获取元素，获取的是一个元素集合(类数组)，如果获取不到就是空元素集合 []
  1.     // let box = document.getElementById('box');
  2.     // console.log(box);
  4.     // let ul = document.getElementById('ul');
  6.     // let list = ul.getElementsByTagName('span');
  7.     // console.log(ul);
  9.     // 我想用byTagName获取id名为box的元素
  10.     // let box = document.getElementsByTagName('div')[0]; // 获取id名为box的元素
  11.     // console.log(box);
  13.     let list = document.getElementsByClassName('a')
  14.     console.log(list);
  2. - context.querySelector,在指定上下文中通过选择器来获得元素,如果获取不到就是null
  3. - context.querySelectorAll,在指定上下文中通过选择器来获得元素集合,如果获取不到就是空元素集合 []
  4. - document.body:获取body
  5. - document.documentElement:获取html
  6. - document.head:获取头部
  7. <a name="crwgI"></a>
  8. ## 3.节点与节点之间的关系属性
  10. - 元素对象
  11. - 整个页面都是节点组成的
  12. - 目前咱们用的最多的元素其实是节点的一种，叫做元素节点
  13. - 整个页面就是节点组成的，然而节点都是对象数据类型的
  14. ```javascript
  15.   let box = document.querySelector('#box');
  16.         console.log(box.childNodes);
  18.         // 节点名称                            nodeType    nodeName    nodeValue
  20.         // 元素节点   标签                       1        大写大标签名   null
  21.         // 文本节点   内容 空格 回车(换行)        3          '#text'     内容
  22.         // 注释节点   注释节点                   8          '#comment'   内容
  23.         // 文档节点   document                  9          '#document'  null
  • chilNodes:获取元素下的所有子节点(IE8以下不兼容)
  • children:获取元素下所有的元素子节点

  • 获得单个节点的时候获取不到是则是null，获取多个时,获取不到时得到的是[]

    1. // 节点之间的关系属性
    2.       // 1、childNodes：获取所有的子节点
    3.       // 2、children：获取所有的元素子节点 (IE8及不兼容)【会把注释节点当做元素节点来识别】
    4.       // 3、firstChild：获取第一个子节点
    5.       // 4、lastChild：获取最后一个子节点
    6.       // 5、firstElementChild：获取第一个元素子节点(IE8及不兼容)
    8.       // console.log(ul.childNodes);
    9.       // console.log(ul.children.length);
    10.       // console.log(ul.firstChild);
    11.       // console.log(ul.lastChild);
    12.       console.log(ul.firstElementChild);

  • firstChild：获取第一个子节点

  • lastChild：获取最后一个子节点
  • firstElementChild：获取第一个元素子节点(IE8及不兼容)
  • lastElementChild：获取最后一个元素子节点(IE8及不兼容)
  • previousSibling:获取上一个哥哥节点
  • nextSibling:获取下一个兄弟节点
  • previousElementSibling:获取上一个哥哥元素节点(IE8及不兼容)
  • nextElementSibling:获取下一个兄弟元素节点(IE8及不兼容)

  • parentNode:获取父亲节点

    1. let a = document.getElementById('a');
    2.       // console.log(ul.childNodes);
    3.       // console.log(ul.children.length);
    4.       // console.log(ul.firstChild);
    5.       // console.log(ul.lastChild);
    6.       // console.log(ul.firstElementChild);
    7.       // console.log(a.previousSibling);
    8.       // console.log(a.previousElementSibling);
    9.       console.log(a.parentNode.parentNode.parentNode.parentNode.parentNode);
    10.       // body-->html-->docuemnt-->null

    4.节点的添加与删除

  • document.createElement(‘标签名’)：在js中动态创建元素节点

  • document.createTextNode(‘内容’): 在js中动态创建文本节点

  • 父节点.appendChild(节点)：把指定的节点插入到父节点的末尾

    1. let div = document.createElement('div');
    2.       // div.innerHTML = '111';
    3.       // console.log(div);
    4.       let text = document.createTextNode('123456');
    5.       // console.log(text);
    7.       div.appendChild(text)
    8.           // 我想把div放到body的末尾
    9.       document.body.appendChild(div);