首先回顾一下以前内容

1.通过JS控制表单

2.innerText innerHTML

1. 节点控制

2. 控制样式属性

3. 改变盒子大小

4 . 川剧变脸

5. 开关效果

6. 关闭广告

7. 隔行变色

什么是节点？什么是元素？

页面上的都可以称之为一个节点，包括纯文字、换行等。元素指的是标签；

为什么要用节点控制？

因为getElementsByTagName()没有层级，会把满足标签名的所有元素全部获得

节点控制的关键点是：节点之间的关系

子节点 父节点 兄弟节点

节点是包含元素的

2.1节点类型

node.nodeType = 1; //元素节点

根据值不同，表示不同的节点类型：

1表示元素节点 2表示属性节点 3表示文本节点… 8 注释节点

nodeValue:节点的值

nodeName:节点的名称

注意：元素节点的nodeValue值返回的是null,以后可以用这个进行一些判断

2.2节点层次: 子节点 父节点 兄弟节点

childNodes:子节点 凡是在html中出现的都称为节点；

children:子元素：虽然不是早期DOM标准中的方法，但是所有浏览器都支持

nextSibling:下一个兄弟节点

nextElementSibling:下一个兄弟元素 有兼容性问题

previousSibling:上一个兄弟节点

previousElementSibling:上一个兄弟元素 有兼容性问题

JQuery 不存在兼容问题

firstChild :第一个节点

firstElementChild:第一个子元素 有兼容性问题

lastChild:最后一个子节点

lastElementChild:最后一个子元素 有兼容性问题

parentNode :父节点

style属性是对象，style对象的属性是字符串

style只能获取和设置行内样式

DOM对象中style的属性和标签中style内的值几乎一样

因为在style里面的background-color这样的命名方式在JS是不允许的，所有一般就变成了驼峰命名法 ——就是第二个单词的首字母大写 backgroundColor

只是带有 - 的属性名较为特殊（如background-color变成了backgroundColor），因为在JS中 - 不能作为标识符

3.1 设置和获取样式

通过对象的style属性只能设置和获取行内样式

获取样式的时候 如果行内没有该样式 输出空字符串

设置样式的时候 赋的值是一个字符串 如果这个属性有单位 一定要节点加单位

3.2 什么情况通过class控制样式 什么情况通过style控制样式

哪种方式最便捷采用哪种方式；

但是如果是属性的值会参与一些运算，必须采用控制行内样式的方式

值的运算最多的是 ；字符串拼接 把要替换的 " 替换内容 "

var node = cloneNode(true/false);

true :深层复制，把内部节点一起克隆

false:浅层复制，只复制当前元素

obj.appendChild(要追加的元素);

1.在元素中的最后追加子元素；

2.如果是克隆出来的节点，不会影响原来节点；

3.直接追加，原来节点就会被删除后再追加；

obj.insertBefore(要插入的元素,插到这个元素的前面);

1.在元素中的子元素前面插入子元素；

2.如果是克隆出来的节点，不会影响原来节点；

3.直接追加，原来节点就会被删除后再追加；

obj.removeChild(要移除的子元素);

从元素中移除子元素；

document.write(“内容”)

直接在文档中书写

innerHTML=”内容”

改变元素对象内部的HTML

createElement()

cloneNode()

创建节点并追加

通过这两种方法创建出来的元素只是保存在内存中，必须放到页面上才行!

武汉大牛哥教育是一家真正的育人为本的公司，学习技术到武汉大牛哥教育

1.节点控制

2.动态创建元素

1.函数的定义方式与执行方式

2.预解析

3.变量的作用域

4.作用域链

5.内置对象

6.BOM

2.变量声明提升，只提升声明，不提升赋值；

3.函数声明提升，函数的声明提升到当前作用域的前面；

1.变量类型：全局变量 局部变量

2.全局变量：可以作用域所有区域使用

3.局部变量：在函数内部声明的变量，称为局部变量。只能在函数内部使用

4.隐式全局变量：在函数内部不加var的称也是全部变量

5.块级作用域：在其他语言中，{}内部的称为块级作用域，在里面定义的变量，外部是访问不到的。而在Javascript里面是没有块级作用域的，只有函数作用域。

1.执行过程

var a = 1;

function fn(){

var a = 2;

}

fn();

console.log(a);

执行过程：1.先找全局范围的var和function;预解析，提升变量声明与函数声明； var a undefined fn{}

2.变量赋值与函数执行 var a = 1; fn()，如果能找到,执行fn(){}

3.fn()函数局部执行： var a undefined

4.函数内部赋值 var a = 2; 函数内部作用域

5.输出全局变量 1

2.多个函数嵌套，内部函数可以访问到外部函数作用域的变量。

var a = 1;

function fn(){

a = 2;

}

fn();

console.log(a);

执行过程：

1.先找全局范围的var 与function预解析，提升变量声明与函数声明； var a undefined fn{}

2.变量赋值与函数执行 var a = 1;

3.fn()函数内部执行 a没有声明会继续往上找；

4.a = 2;

5.输出：2

1. 预解析的过程；1.1 先提升 var 和 function的声明 1.2执行：赋值与fn调用

2.函数作用域：一旦执行函数

3. 全局与局部之间的关系；

局部里面 预解析

变量没有声明时候，这个时候跳出局部继续往上找直到找到为止！

1.Window对象 .onload 文档加载