insertbefore

学纲

一、作用域【深入理解】1.概念

Scope指的是变量函数的一个作用域，它指定了变量和函数被移除和使用的位置，JS不会报错。

明白；理解

强调思考

num1 =？？？；222

num2 =？？？；报告错误

众所周知，全局变量不是用var声明的，而是隐式声明的。

原理:在局部范围内声明全局变量时，他会先在局部范围内寻找一个变量。如果没有，他将查找全球范围。当他找到变量时，他会重新赋值。如果没有，他会申报。

注意:您必须调用函数。

2.作用域的类型

全球范围

局部范围

3.作用域链 说明

在定义局部作用域时，声明了多个作用域，它是一个包含关系的集合，调用函数称为作用域链。

 图解 练习1

运行结果:111

运行结果:222

 练习2

上图说明了结果:

i:4J:5<script>var num = 111;function fn1() { var num = 222; function fn2(){ num = 333; function fn3(){ num = 444; } fn3(); } console.log(num); fn2(); console.log(num);}fn1();console.log(num);</script>4.变量访问的优先级

<script>var str='字符串1';function fun(str){ var str='字符串2'; function str(){ str = '字符串3' } console.log(str);}fun();</script>

结论:局部变量>；本地函数>；形式参数>全局变量

5.总结 作用域概念：规定变量和函数的作用范围，在那个区域调用不会出现JS错误 类型

局部范围

全球范围

 作用域链

函数的集合

在调用时，如果局部范围声明了一个全局变量，那么它将一直查找，直到找到为止。如果它找到了重复的，如果没有找到，它将被声明。如果你发现一个局部变量[var]，停止查找。

 变量访问的优先级别

局部作用域中的全局变量>；函数>；函数的参数>；全局变量

注意:

全局变量

全球范围

局部变量

局部范围

BOM 浏览器对象1.BOM简介

浏览器对象模型【BOM】浏览器对象模型

2.BOM作用

我们JS有操作浏览器的能力。

3.BOM的分类

窗口浏览器操作对象，对象的顶层是思想。

位置地址栏操作对象

历史操作对象

文档网页操作对象

屏幕浏览器屏幕操作对象

二、Window对象1.属性和方法

声明的全局变量都放在窗口对象中。

 属性：

InnerWidth获取网页的宽度。

document . document element . client width与较低版本的浏览器兼容。

InnerHeight获取网页的高度。

document . document element . client height与较低版本的浏览器兼容。

注意:高度和宽度受状态栏的影响。

兼容性问题:

IE 6/7/8浏览器

高级浏览器

IE9或以上

兼容性浏览器

谷歌、火狐、苹果浏览器

 方法：

警报

提示

确认

打开(要打开的网页地址、窗口名称、窗口外观设置参数)

关闭()

打印()

2.延时器 设置延时器

描述:

当加载一个网页时，你需要让程序等待一段时间来执行[仅仅一次]

语法:

setTimeout(‘fun ‘，s)；

描述:

Fun:要被调用的fun函数“fun()”

秒:毫秒

返回值:当前计时器的表示形式。

 清楚延时器

语法:

clear time out(t)；

功能:

了解延时装置定义的操作方法，终止其操作。

参数:

t:定义延迟器返回的参数。

 实例

& lt！DOCTYPE html PUBLIC & # 34-//W3C//DTD XHTML 1.0过渡版//EN & # 34；"http://www . w3 . org/TR/XHTML 1/DTD/XHTML 1-transitional . DTD & # 34；& gt& lthtml xmlns = & # 34http://www.w3.org/1999/xhtml" XML:lang = & # 34；恩& # 34；& gt& lthead & gt& ltmeta http-equiv = & # 34；内容类型& # 34；内容= & # 34；文本/html；charset = UTF-8 & # 34；& gt& lttitle & gt文档& lt/title & gt；& lt/head & gt；& ltbody & gt& lt输入onclick = & # 34fun()；"type = & # 34按钮& # 34；value = & # 34单击以显示& # 34；& gt& lt/body & gt；& lt脚本& gtfun(){ //设置一个delayer settimeout(function(){ alert(& # 39；弹出& # 39；);},5000);} & lt/script & gt；& lt/html & gt；

3.定时器setInterval 设置定时器

描述:

访问网页时，定期执行一段代码【多次】。

语法:

setInterval(‘fun ‘，s)；

描述:

同上

 清楚定时器

描述:

清除计时器以防止代码继续执行。

语法:

间隙(t)；

 案例：

点击发送倒计时效果

1.点击按钮如何点击事件？

2.修改按钮[value= “重新获取验证码(事件)”]中的内容

3.使按钮无法再次点击[禁用按钮的一个属性]。

4.增加倒计时效果

4.setTimeout和setInterval的区别

SetTimeout执行一次。

SetInterval执行了多次。

三、screen屏幕对象

操作属性:

获取屏幕的宽度。

获取屏幕的高度。

Screen.ailWidth不包含任务栏。

Screen.ailHeight不包含任务栏。

四、nigator对象

描述:浏览器的信息对象

AppName:浏览器发布的版本

AppVersion:用户浏览器的版本信息。

UserAgent:关于用户使用的浏览器的信息。

用法:UserAgent可以获取用户的详细访问信息，将用户的错误以邮件的形式发送到邮件的中间区域，这样我们就可以快速定位问题。

五、location 对象

属性

Location.href浏览器地址的重定向

方法:

location . reload()；刷新当前页面，lo action . href = location . href；

六、history 对象

用于记录用户访问了哪些网页。

属性

Length length:记录浏览次数。

方法:

History.go(-1)正数表示URL向前，负数表示URL向后。

history . back()；逐步回归

history . forward()；向前-& gt；

DOM文档对象模型1.DOM简介

文档对象模型文档对象模型

2.DOM作用

让JS具备操作HTML的能力。

3.DOM的分类 核心 DOM

对所有DOM对象执行节点操作。

添加节点和查找节点。

 HTML DOM

搜索HTML下的节点，快速定位。添加节点等。。。

 CSS DOM

节点具有CSS属性style=’ style ‘

也有直接操作样式的属性和方法。

的。风格。节点对象的样式属性的值为JS transformation = attribute。

 事件 DOM

节点中的Onclick /onchange….

JS直接操作的事件对象和方法

三、核心DOM（1）1.DOM的分层结构 / 树形结构（节点树） 概念

在HTML中，使用类似倒置的树结构。

 图解2、节点关系 （概念）

根节点HTML一个页面只能有一个追随者节点。

节点下的节点。

父节点是子节点的父节点。

同级节点并置中的两个节点

空白色节点:空网格，换行符

3、节点操作公共的属性（语法）

1)获取子节点

节点对象。firstChild获取节点的第一个子节点。

节点对象。lastChild获取节点的最后一个子节点。

节点对象。子节点采集节点下的所有子节点都不包含空白节点。

节点对象。childNodes获取该节点下的所有子节点都包含空白色节点。

2)获取兄弟节点

对象。获取节点的下一个同级节点。

物体。previousSibling获取该节点的上一个同级节点。

3)获取父节点

对象。parentNode获取下一个更高级别的节点。

4)获取文本节点的值

对象。nodeName获取选定节点的名称。

对象。nodeValue获取所选节点的值。

思考:用什么来获取表单的值？

情况

获取红色小文本节点并弹出值。

& ltdiv & gt& ltul & gt& lt李& gt老王</李& gt& lt李& gt小红</李& gt& lt李& gt隔壁的老王

案例:

四、HTML DOM【★】1.获取元素节点的四种方法

1)语法

文档。getelementbyid(“id属性的值”)；

功能:根据节点中ID的属性获取节点对象。

文档。getelementyclassname(“类名”)

功能:根据节点中类的属性获取节点对象。

文档。getelementytagname(‘标记名’)

功能:根据标签名称获取要操作的标签对象。

文档。getelementyname(“属性名”)；

功能:根据标签的属性获取要操作的标签对象。

2)练习

<div id="first">床前明月光</div><div class="second">地上鞋两双</div><p class="second" name='nameValue'>自己去想象</p>2.对节点的属性操作

1)语法

对象。set attribute()；//向节点对象添加属性

对象。remove attribute()；//删除节点属性

对象。getAttribute(“属性名”)；//获取节点属性的值

2)练习

思考:通过获取网页上指定节点返回的对象来获取属性名和getAttribute有什么区别？

使用对象。属性名只能得到预定义的属性，但是使用getAttribute可以得到自定义的属性。

3.获取元素内容属性。

1)描述

对象。innerhtml //获取包含html标记的内容。

对象。innerText //获取文本内容并过滤标签。

2)练习

自觉完成

五、核心DOM（2）【★】1.节点创建

对象。createelement(“标记名”)；//创建一个节点对象

对象。createtextnode(“标记内的内容”)；//向节点对象添加内容

2.节点追加

对象。Appendchild(‘追加的内容’)；在末尾添加节点

对象。insertBefore(新节点对象，旧点对象)//追加到节点的前面。

3.节点删除

对象。remove child()；删除子节点

 课堂案例

下面的诗加标题“春晓”，后面加最后一首诗。

& ltul & gt

& lt李& gt这个春天的早晨，我轻松地醒来。

& lt李& gt蚊子到处叮咬

& lt李& gt点燃蚊香后</李& gt

& ltul & gt

& lt脚本& gtob jul = document . getelementytagname(& # 39；ul & # 39);//获取具体操作节点ul1 = ob jul[0]；//创建节点tmpoj = document。createelement(& # 39；李& # 39；);//添加内容tmp2obj = document。create text node(& # 34；所有死梁& # 34；);//将Appendchild (tmp2obj)添加到内容中；//添加一个新的li节点UL1。appendchild(tmpoj)；//创建头标记tmpoj = document。createelement(& # 39；李& # 39；);//头内容tmp 2 obj = document . create text node(& # 39；& lt肖春> & # 39；);//将内容添加到对象的中间区域tmpbobj。appendchild(tmp 2 obj)；console . log(ul1)；console . log(ul1 . children)；//将创建的节点写入ul 1.insertbefore (tmpoj，ul1 . children[0])；console . log(objUl)；& lt/script & gt；6.CSS DOM1。该函数使用JS内置的操作样式属性来改变DOM的样式。

2.语法

节点对象的样式属性。风格。JS = ‘样式的值’；

CSS定义:Font-Size:14px；

JS定义:fontSize = 14px

3.CSS属性转换JS规则

如果CSS样式中没有“–”，那么我们可以直接使用。

如果CSS样式中有“–”，我们可以简单地删除“–”，并将后面单词的第一个字母大写。

七、事件(event) DOM1、什么是事件

用户在一个网页上的所有操作都称为事件。

2、事件类别

1)鼠标事件

2)键盘事件

3)表单事件

4)焦点事件

5)用户界面事件

使用Onload的说明:用户打开一个网页，进入网页的加载过程。如果使用onload，它将在加载完页面中的所有HTML结构后运行。

设置事件

& lta event = ” function(value)” > & lt；/a & gt；//标记中的事件绑定

& lt脚本& gt对象。event = function(){ } </script & gt；//设置事件

& lt脚本& gt对象。事件=空

1)设置(取消)DOM1级别事件。

再学一招onclick= “function (this)”

2)设置(取消)DOM2级别事件。

语法

ie6、7、8

添加DOM2级别:attachEvent(事件名，事件流)；

取消DOM2级别:Decachevent(‘ event name ‘)；

主流浏览器

添加DOM2级别:addEventListener(“事件名称”，事件流)；

取消DOM2级别:removeEventListener(“事件名称”)；

小心脚下:

如果在主流浏览器中使用时不添加click。

要在较低版本的浏览器中使用onclick，请添加。

3)添加相同类型的事件

仅通过DOM1级别添加相同类型的事件

第一级事件将被覆盖，最后定义的事件将覆盖前一个事件。

通过DOM2级别添加的同类型事件，

4、DOM2级事件好处

每个定义的事件将被执行一次。

1、什么是事件流

多个事件的集合，统称为时间流。

情况

2.事件流深入理解

1)事件流类型

泡沫事件:事件是由内而外的。

捕捉类型:事件由外而内。

2)描述

在主浏览器中使用addEventListener(事件类型，处理程序，true)；将有一个捕获类型。

版本的浏览器中没有捕获类型，只有气泡类型。

DOM1级为冒泡型。

3)验证

Dom1级别是冒泡事件，无法更改。

Dom2级别事件是IE9以下的统一气泡事件，不可更改。

Dom2级事件IE9及以上，默认气泡事件；您可以通过更改第三个参数来动态设置事件流:true表示捕获类型，false表示冒泡类型。