JavaScript页面操作和变量声明

1.获取页面元素（DOM对象）

dom1：支持ie678的页面元素获取方式

var lis = document.getElementsByTagName('li');
//括号内为页面标签的字符串
//获取结果为伪数组，使用时需要用lis[下标]取出
var btn = document.getElementById('btn');
//括号内为元素id的字符串，可以直接使用

dom2：不支持ie678页面元素获取方式

var boxs = document.getElementsByClassName('box');
//获取元素类名，
var aLi = document.querySelectorAll('.list li');
//括号内写上css选择器字符串，返回结果为伪数组，使用时需要用
//ali[下标]取出使用
var oBtn = document.querySelector('#btn');
//传css选择器，返回单个元素;

2.事件

// 主动获得焦点/失去焦点
ipt.focus();
ipt.blur();
//焦点
ipt.onfocus = function (){//获得焦点
      console.log(1111);
}
ipt.onblur = function (){//失去焦点
     console.log(2222);
}

//输入事件
ipt.oninput = function (){
//表单输入事件，输入一个触发一次。删除也会触发
    console.log('oninput。。。');
}
ipt.onchange = function (){
//表单改变事件，失去焦点是检查内容，内容改变触发
    console.log('onchange。。。');
}
//键盘事件
document.onkeydown = function (){
	//键盘按下触发
    console.log('onkeydown。。。');
}
document.onkeypress = function (){
	//键盘某个键按下并松开 数字字母键触发，ctrl，箭头，f1不能触发
    console.log('onkeypress。。。');
}
document.onkeyup = function (){
//键盘某个键鼠松开
    console.log('onkeyup。。。');
}
//鼠标移入事件
推荐使用这两个
parent.onmouseenter = function (){
//鼠标移入触发
    console.log('鼠标进入');
}
parent.onmouseleave = function (){
//鼠标移出触发
    console.log('鼠标移出');
}
//会重复触发，从父元素到子元素会触发，从子元素到父元素也会触发！
parent.onmouseover = function (){
	//鼠标进入触发
    console.log('鼠标进入');
}
parent.onmouseout = function (){
	//鼠标移出触发
    console.log('鼠标移出');
}

//表单提交事件
// 点击submit按钮时触发，可以用来验证表单元素，但不常用
fm.onsubmit = function (){
    if (ipt.value !== 'xiaocuo') {
        console.log('账号错误');
        return false;// 阻止表单提交
    }
    console.log('表单提交。。。');
}

3.onload事件。

onload为window事件，整个页面所有资源加载完成时触发，html css js 图片等、、、、

window.onload = function (){
    var btn = document.querySelector('.btn');
    btn.onclick = function (){
    	//页面完全加载完才能点击
        console.log('按钮被点击。。。');
    }
}

4.对页面元素的操作

a.处理元素样式

语法：元素.style.样式或cssText；
设置元素的行内样式；

//设置单个元素
	box.style.width = '200px';
    box.style.height = '200px';
    box.style.backgroundColor = 'blue';
//设置多个样式，但是后面设置的cssText会覆盖前面的，而不是补充覆盖
    box.style.cssText = 'width:200px;background-color:red;';

b.处理元素属性

获取：元素.属性
设置：元素.属性 = 属性值

//元素自带属性可以直接获取或直接赋值
    console.log(btn.id);// 'btn'
    console.log(btn.title);
    //特殊:获取类名时用className
    //类名设置会覆盖原有类名
    console.log(btn.class);// undefined
    console.log(btn.className);
    console.log(img.src);
    box.className = 'box red';// 设置属性值

元素的自定义属性的设置和获取将在后面继续介绍

c.处理元素值

获取表单元素值：元素.value；设置时直接赋值；
获取非表单元素值：

• 元素.innerText；获取元素内部的所有文本值，赋值的所有内容会被转换成文本
• 元素.innerHTML;获取元素内部所有内容，包括标签和文本；赋值的内容如果有标签，会以标签形式显示

总结：两者都会后面的覆盖前面的，后面输入的内容会覆盖元素原来的内容

5.作用域

在不考虑ES6的情况下，js只有两种作用域，全局作用域和局部作用域；局部作用域都是由函数产生的，又称函数作用域。
全局作用域

• js运行时有一个最大的对象—window；全局作用域下的变量和函数全部挂在window对象下。
• 访问window下的属性或方法时，window可以省略；
• window下有个特殊属性name，无论给它赋值什么数据类型，都会转换成字符串。

局部作用域

• 函数内部声明的变量不会影响外部，但可以对全局变量重新赋值
• 函数内部使用的变量遵循就近原则，局部作用域存在这个变量便不会向全局查找

变量的生命周期

全局变量：进入页面产生，关闭页面销毁
局部变量：函数执行时产生，函数执行完毕销毁
所以尽量减少全局变量的使用，防止污染全局环境和增加性能
注：
显式声明var a = 1
隐式声明 a = 1 不建议，无论在哪儿，只能声明全局变量，前提是全局没有声明这个变量，不然会是重新赋值；

6.this的简单了解

this是js的一个关键字，它代表函数运行时，自动生成的一个内部对象，只能在函数内部使用。
this的指向在函数运行时才进行绑定，函数的内部的this指向 ，取决于函数是如何被调用的，this所在的函数被谁调用，this就指向谁。
举几个简单例子：

function show(){
    console.log(this);
}
show();//毫无疑问，是在全局被window调用的
// window.show();//window

btn.onclick = function (){
    console.log(this);//btn
    // show();
 //虽然在事件函数内，却是被事件触发，这个函数直接调用者却是window
    window.show();//window
}

// 事件处理函数中的this指向：this指向事件的调用对象
// btn.onclick = show;//this -> <button id="btn">按钮</button>
btn.onclick = function show(){
//this这这里指向元素触发者button
    console.log(this);//this -> <button id="btn">按钮</button>
};

7.声明提升机制

声明提升，变量声明或函数声明会提升到当前作用域的顶部
JS解析器：
浏览器中有一套专门解析JS代码的程序，这个程序称为js的解析器。
浏览器运行整个页面文档时，遇到script标签时JS解析器开始解析JS代码。
预解析的工作步骤：
1解析阶段：

• 找一些关键字，例如var 、function、参数等存放在仓库（内存）里， 变量提升后的初始值为undefined，
• 函数的初始值是代码块
• 当变量和函数重名时，函数是一等公民，函数优先；不管顺序谁先谁后，都只留下函数的值；但这个变量名允许二阶段按照顺序决定是赋值

2执行阶段：

• 预解析完成后，就开始逐行执行的代码，仓库中变量的值随时都可能会发生变化，执行到赋值等操作会改变值 执行到函数，函数内部再次发生预解析
• 预解析时后面变量赋值不会覆盖同名函数的值，但是执行时会覆盖，并改变仓库内的变量值。

实例：

alert(a);
//函数优先，且后面的会覆盖前面的
// function a(){alert(3);}
var a=1;
alert(a);// 1
//执行阶段时，这个变量名会被重新赋值为1
function a(){alert(2);}
alert(a);// 1
//仓库内的a的值依旧是1
var a=3;
alert(a);// 3
function a(){alert(3);}
alert(a);// 3

8.自执行函数

匿名函数如何调用？预解析不会解析自执行函数，小括号是运算符，在二阶段才会执行，直接跳过预解析阶段进入第二阶段，所以不会报错。可以得出，只要让函数定义时就参与计算就可以跳过一阶段的解析，直接进入二阶段的执行

(function (){
    独立的作用域
})();

!function (){
    console.log(123);
}();

-function (){
    console.log(123);
}();

小括号能把我们的表达式组合分块，并且每一块都有一个返回值，这个返回值实际上就是小括号中表达式的返回值。

自执行函数的好处：独立的作用域，不会污染全局环境！

9.回调函数

把函数作为参数传递给另一个函数，我们把该函数(作为参数的函数)称为回调函数。
通常当特定的事件或条件发生的时候，我们调用回调函数对事件进行处理。
只有当调用函数时候，才会传入回调函数作为参数

function f1(cb){
    console.log('f1做了很多事情');
    var n = 2;
    if (n >= 2) {
        cb(f3);//回调函数，传入f3作为参数
    }
}
function f2(cb){
    console.log('任务2完成');
    cb();//f3
}
function f3(){
    console.log('任务3完成');
}
f1(f2);//传入f2作为参数

10.递归函数

如果一个函数内调用函数本身，这个函数就是递归函数。
递归函数的本质：函数循环调用。

一般来说，递归需要有边界条件、递归前进段和递归返回段。
当边界条件不满足时，递归前进；当边界条件满足时，递归返回。
举例：斐波那契数列

function getFb(n){
    if (n <= 2) {//终止条件
    //必须有终止条件，也叫递归出口，不然无限调用会导致内存溢出
        return 1;
    }
    return getFb(n-1)+getFb(n-2);//
}

11.构造函数

js没有类的含义，构造函数相当于其他语言的类
构造函数：用于创建对象的函数，默认使用首字母大写

// 
// var Cat = function (){}
function Cat(){
    
}
var cat1 = new Cat();//使用关键字 new调用，作为构造函数调用
var cat2 = Cat();//构造函数也可以按普通函数方式调用

内置的构造函数
Array Object Boolean Number String …

var str1 = 'abc123';
var str2 = new String('ddd888');

// 数据类型不一样
 console.log(str1);//'abc123'
 console.log(str2);// String {'ddd888'}

// 使用时，在页面中的效果是一样的
 box.innerText = str1;
 box.innerText = str2;