JavaScript——原生

console.log(ul[0].childNodes);

2. childElementCount：获取并返回 该节点的 子元素节点数量

console.log(ul[0].childElementCount);

3. children：获取到所有的子元素节点

console.log(ul[0].children);

4. firstElementChild：获取第一个子元素节点

console.log(ul[0].firstElementChild);

5. firstChild：获取第一个子节点

console.log(ul[0].firstChild);

6. firstElementChild：获取第一个子元素节点

console.log(ul[0].firstElementChild);

7. lastChild：获取最后一个子节点

console.log(ul[0].lastChild);

8. lastElementChild：获取最后子元素节点

console.log(ul[0].lastElementChild);

---

兄弟节点的获取方法：

1. nextElementSibling：获取该节点的下一个兄弟元素节点

console.log(ul[0].nextElementSibling);

2. nextSibling：获取该节点的下一个兄弟节点

console.log(ul[0].nextSibling);

3. previousElementSibling：获取该节点的 上一个兄弟元素节点

console.log(ul[0].previousElementSibling);

4. previousSibling：获取该节点的 上一个兄弟节点

console.log(ul[0].previousSibling);

---

创建节点：

语法：

var li_new = document.createElement("li");

备注： 元素创建完成后，并不在DOM树中，需要我们手动添加

添加节点：

1. appendChild： 添加到目标里的最后一位

目标.appendChild(内容)

ul[0].appendChild(li_new);

2. insertBefore：将新节点，添加到已有的节点之前

父节点.insertBefore(新的节点，已有的节点)

ul[0].insertBefore(li_new,ul_li[0]);

备注： 添加到的目标，一定是在页面中已经存在的

删除节点：

1. removeChild

指定目标的父元素.removeChild(指定目标)

ul[0].removeChild(ul_li[0]);

2. remove

指定目标.remove()

ul_li[0].remove();

替换节点：

替换目标的父元素.replaceChild(新的元素,被替换的元素); 

ul[0].replaceChild(meng,ul_li[0]);

克隆节点：

// 需要克隆的目标.cloneNode() ，该方法会将克隆体返回

var meng_two = meng.cloneNode();

nodeName： 返回节点名称

nodeValue： 返回节点属性

nodeType： 返回节点类型

闭包

============================================================

闭包的本质： 它就是个函数

概念： 能够访问其他函数内部变量的 函数

条件：

1. 在函数中嵌套定义另外一个函数

2. 被嵌套的函数(在里面的那个),一定要访问外部函数的变量

3. 被嵌套的函数要返回

原理： 通过作用域链

作用： 能持久化 局部变量, 手动 控制局部变量的回收时间

弊端： 不能够大批量的使用，会造成程序加载过慢. 极容易造成内存泄露

返回的方式：

function big(){

				var c = 10;

				

				//返回的方式1：

//				return function small(){

//					console.log(c);

//				}



//				返回的方式2：

//				return function (){

//					console.log(c);

//				}



				//返回的方式3：

				function small(){

					console.log(c);

				}



				return small;  

				// 函数带着(), 是执行。   不带(), 只是定义

			}

			

			var test =  big();

		    test();

作用域链

==============================================================

作用域链：

先在当前作用域的上下文中查找，找到即执行

如果没有，继续向 上 一层查找，找到即执行。

如查找到全局中，依然没有，报错，阻断程序运行

变量提升：

如果使用了未声明的变量，正常情况会因为找不到而报错

但在使用的下方，出现了它的声明。 会默认将它提升到使用之前。不包括值

先使用，后声明。 该变量的 因变量提升， 可以找到，但值为undefind;

存在的意义： 保证后续任务继续执行，只是失去了 当前功能的值

匿名函数

==============================================================

实质： 没有名字的函数 实质还是一个函数

和普通函数的区别：

1. 普通函数是有函数名的， 函数调用需要使用函数名

2. 匿名函数没有函数名， 无法通过函数名来调用

匿名的作用：

1. 匿名函数可以有效的保证在页面写入js时，不会造成全局变量的污染，就是可以有效的隔离作用域

2. 通常我们希望这个函数，只执行一次，就结束时。使用匿名函数的自调用(也叫立即执行函数)

匿名函数调用的两种方式：

1. 绑定给一个变量 或者一个事件， 通过他们来调用

2. 自调用

    小括号1 ：  里面存放函数的定义

    小括号2 ：  代表着调用函数，里面存放实参	

   // 自调用 写法一 : 官方推荐 的写法

    (function (b) {

        console.log(b+1);

    }(20));



    //写法二 ：

    // (function(a){

    //     console.log(a+10);

    // })(10);



    //写法三：

    // !function () {

    //    console.log("我是自调用的函数");

    // }



    //写法四：

    // [function () {

    //

    // }()]



    //写法五：

    // ~function () {

    //

    // }();

事件对象

==============================================================

this指针的指向问题：

1. 在普通函数外部调用的时候

var a = 20;//   相当于   window.a  = 20

// alert(this); //  指向window

// alert(this.a); // 输出20,  指向 window.a

2. 在普通内部调用的时候

		function text(){

            var a = 10;

            // alert(a);

            // alert(this.a);  // 相当于   window.a

            this.a = 50;

            this.b = function() {

                console.log(this);

            }

        }

        // text(); // text()   相当于  window.text()

3. 和new 构造器结合使用

		var obj1 = new text();

        var obj2 = new text();

        var c = obj1.b;

        console.log(obj2.a);

        console.log(c());

4 对于自执行匿名函数 而言 this的指向 window

备注： 当不希望this指向发生改变的时候，可以定义变量来保存this(例如：拖拽中使用)

event对象补充

===================================================================

如何产生： 在事件发生时，负责处理事件的函数，会接受到一个event对象

备注： 浏览器负责处理事件， js负责告诉浏览器 如何处理

作用： 用来存储 事件源的信息 例如： 鼠标的位置 键盘的编码。

将这些信息提供给开发者， 便于开发者进行编码

event对象的属性：

1. ev.target : 返回 事件源

2. ev.button：　返回鼠标被按下的那个键

3. ev.offsetX : 鼠标在元素上 X轴的位置

4. ev.clientX: 鼠标 在浏览器可视区域 x轴上的位置(左边距)

5. ev.clientY: 鼠标 在浏览器可视区域 y轴上的位置(上边距)

6. ev.keyCode : 返回键盘的编码，以此来确定是哪个键位

事件冒泡与捕获

=================================================================

事件监听：

添加事件监听： addEventListener()

参数1 ： 事件类型

参数2 ： 触发事件后执行的函数

参数3 ： 布尔值 默认值是 false 事件冒泡 ； true 事件捕获

删除事件监听： removeEventListener()

注意：

1. 相同元素调用

文末

如果30岁以前，可以还不知道自己想去做什么的话，那30岁之后，真的觉得时间非常的宝贵，不能再浪费时间在一些碎片化的事情上，比如说看综艺，电视剧。一个人的黄金时间也就二，三十年，不能过得浑浑噩噩。所以花了基本上休息的时间，去不断的完善自己的知识体系，希望可以成为一个领域内的TOP。

同样是干到30岁，普通人写业务代码划水，榜样们深度学习拓宽视野晋升管理。

这也是为什么大家都说30岁是程序员的门槛，很多人迈不过去，其实各行各业都是这样都会有个坎，公司永远都缺的高级人才，只用这样才能在大风大浪过后，依然闪耀不被公司淘汰不被社会淘汰。

269页《前端大厂面试宝典》

包含了腾讯、字节跳动、小米、阿里、滴滴、美团、58、拼多多、360、新浪、搜狐等一线互联网公司面试被问到的题目，涵盖了初中级前端技术点。

前端面试题汇总

JavaScript