JavaScript基础回顾

Document对象

• document.activeElement:返回当前获取焦点元素

  document.activeElement;

• document.addEventListener():向文档添加句柄

  document.addEventListener('click', function () {
    ...
  });

• document.createAttribute():创建一个属性节点

  let attr = document.createAttribute('data-value');
  attr.value = 'true';
  document.getElementById("p").setAttributeNode(attr);

• document.createComment():创建注释节点

  let common = document.createComment('ddd');
  document.getElementById('content').appendChild(common);

• document.createElement():创建元素节点

  let p = document.createElement('p');
  p.innerText = 2 ;

• document.createTextNode():创建文本节点

  let p = document.createElement('p');
  let text = document.createTextNode('文本');
  p.appendChild(text);

• document.images:返回对文档中所有 Image 对象引用

  document.images;   // HTMLCollection

• document.querySelector():返回文档中匹配指定的CSS选择器的第一元素

  document.querySelector(".pp"); // 第一个节点

• document.querySelectorAll():返回文档中匹配的CSS选择器的所有元素节点列表

  document.querySelector(".pp"); //所有节点

• document.write():向文档写HTML表达式或JavaScript代码

  document.write("<h1>Hello World!</h1><p>Have a nice day!</p>");

  Dom元素对象

  
  document.addEventListener(event, function, useCapture)函数中，useCapture指定事件是否 在捕获或冒泡阶段执行,默认false 关闭冒泡。
  

• element.addEventListener():向指定元素添加事件句柄

  document.getElementById("a").addEventListener('click',function(){
     ...
   })

• element.removeEventListener(): 移除添加的句柄事件

• element.appendChild():为元素添加一个新的子元素

    let ele = document.getElementById('div');
    let newEle = document.createElement('p');
    let attr = document.createAttribute('name');
    attr.value = 'age';
    newEle.setAttribute('data-value', 'true');
    newEle.setAttributeNode(attr);
    ele.appendChild(newEle);

• element.attributes:返回一个元素的属性数组

  let newEle = document.createElement('p');
  let attr = document.createAttribute('name');
  attr.value = 'age';
  newEle.setAttribute('data-value', 'true');
  newEle.setAttributeNode(attr);
  console.log(newEle.attributes);    

• element.children:返回元素的子元素的集合(HTMLCollection)

  // HTMLCollection集合转为数组格式
  Array.from(document.getElemntById("div").children);
  [...document.getElemntById("div").children];

• element.classList:返回元素的类名，作为 DOMTokenList 对象(DOMTokenList)

  [...document.getElemntById("div").classList];

• document.getElemntById("div").classList.add("class"); //增加类
• document.getElemntById("div").classList.contains("class"); // 是否存在指定类
• document.getElemntById("div").classList.remove("cla1",,); // 移除指定类 多个类以逗号分开

• document.getElemntById("div").classList.toggle("cla1",true/false); // 在元素中切换类名

• element.className:设置或返回元素的class属性

  document.getElemntById("div").className.cinludes("cls");

• element.cloneNode():克隆某个元素(同JQ中clone()函数)

  document.getElemntById("div").cloneNode(); // 复制Dom

• element.contentEditable:设置或返回元素的内容是否可编辑(contenteditable属性)

  let p = document.getElementById('p');
  p.contentEditable = true; // 设置可编辑属性为true
  console.log(p.getAttribute('contenteditable')); // 输出可编辑属性为true
  p.setAttribute('contenteditable', false); //关闭可编辑属性
  let att = document.createAttribute('contenteditable'); // 创建可编辑属性
  att.value = true;
  p.setAttributeNode(att); // 重新设置可编辑为true
  let text = document.createTextNode('1234'); // 创建文本节点
  p.appendChild(text); //文本节点内容追加于原文本之后
  let common = document.createComment('注解内容');
  p.appendChild(common);
  let span = document.createElement('span'); //创建span标签
  span.innerHTML = '<strong>世界 你好！</strong>';
  p.appendChild(span);
  p.removeAttribute('contenteditable');

• element.firstChild：返回元素的第一个子节点

  document.getElementsByClassName("pp").firstChild;

• element.hasAttribute()：如果元素中存在指定的属性返回 true，否则返回false

  document.getElementsByClassName("pp").hasAttribute("name");

• element.hasFocus()：返回布尔值，检测文档或元素是否获取焦点

  document.getElementsById("div").hasFocus();

• element.lastChild：返回最后一个子节点

  document.getElementsByClassName("pp").lastChild();

• element.nodeName：返回元素的标记名（大写）

  document.getElemntById("div").nodeNmae; // DIV

• element.removeAttribute()：从元素中删除指定的属性

  document.getElementById("div").removeAttribute("name");

  DOM 事件

  鼠标事件

• oncontextmenu ：在用户点击鼠标右键打开上下文菜单时触发
• onmousedown ：鼠标按钮被按下
• onmouseup : 鼠标按键被松开
• onmouseover ：鼠标移到某元素之上(支持冒泡)
• onmouseout : 鼠标从某元素移开(支持冒泡)
• onmouseenter : 当鼠标指针移动到元素上时触发(不支持冒泡)
• onmouseleave : 当鼠标指针移出元素时触发(不支持冒泡)
• onmousemove : 鼠标移动触发
• onwheel：该事件在鼠标滚轮在元素上下滚动时触发

键盘事件

• onkeypress:某个键盘按键被按下并松开
• onkeydown:某个键盘按键被按下(监听事件使用)
• onkeyup:某个键盘按键被松开

表单事件

• onfocus:聚焦时间(不支持冒泡)
• onblur:失焦事件(不支持冒泡)
• onfocusin:元素即将获取焦点时触发(支持冒泡)

• onfocusout:元素即将失去焦点时触发(支持冒泡)

    // #form form表单
  // 1. 不支持冒泡
  document.getElementById('form').onfocus = function () {
  console.log('不冒泡');
  };
  // 2. 不支持冒泡
  document.getElementById('form').addEventListener('focus', function () {
  console.log('不支持冒泡2');
  });
  
  // 3. 支持冒泡
  document.getElementById('form').addEventListener('focusin', function () {
  console.log('支持冒泡2');
  });
  
  // 4. 支持冒泡
  document.getElementById('form').addEventListener(
  'focus',
  function () {
    console.log('支持冒泡3');
  },
  true
  );

• oninput: 元素获取用户输入时触发

• onselect:用户选择文本(input,textarea)

  剪贴板事件

• oncopy:该事件在用户拷贝元素内容时触发
• oncut:该事件在用户剪切元素内容时触发
• onpaste:该事件在用户粘贴元素内容时触发

事件属性

• bubbles ：返回布尔值 事件是否起泡类型
• target ： 触发事件的元素
• type ： 当前对象事件名称

事件方法

• event.stopPropagation()：阻止事件冒泡
• event.preventDefault()： 阻止默认事件

Console对象

• console.group()：在控制台创建一个信息分组。以 console.group() 开始，console.groupEnd() 结束
• cosnole.trace(): 显示当前执行的代码在堆栈中的调用路径

• console.table(tabledata,tablecolumns): 输出表格信息.第一个参数必须，数组或对象格式

  var site1 = { name : "Runoob", site : "www.runoob.com" }
  var site2 = { name : "Google", site : "www.google.com" }
  var site3 = { name : "Taobao", site : "www.taobao.com" }
   
  console.table([site1, site2, site3]);

• console.time(): 计时器，开始计时间，与 timeEnd() 联合使用，用于算出一个操作所花费的准确时间

  console.time('Runoob');
  for (i = 0; i < 100000; i++) {
      // 代码部分
  }
  console.timeEnd('Runoob');

JavaScript 闭包

let add = (function () {
      let co = 1;
      console.log(1);
      return function () {
        return (co += 1);
      };
})();