JavaScript基础回顾

Document对象

HTMLCollection 是 HTML 元素的集合,NodeList 是一个文档节点的集合。

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];

1. document.getElemntById("div").classList.add("class");    //增加类
2. document.getElemntById("div").classList.contains("class"); // 是否存在指定类
3. document.getElemntById("div").classList.remove("cla1",,); // 移除指定类 多个类以逗号分开
4. 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 事件

鼠标事件

函数方法中存在event事件变量，包含鼠标点击信息

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);
      };
})();