JavaScript高级(2)
目录
一、回顾与加强
1、JavaScript错误类型及特点
1、编译类型的错误
编译错误就是语法错误。
2、执行错误
语法上没有错误,结合上下午出现的错误,比如调用了一个不存在的变量或函数等。
2、事件
1、事件驱动式
事件驱动式由:用户的行为+JavaScript引擎捕获用户的行为+调用处理函数。实际上就是一个事件的组成。
2、事件处理函数的绑定与执行
①、行内绑定
在HTML标签内指定事件并写处理程序。
②、行内绑定—动态绑定
如果事件的处理程序又大段的js代码,那么直接写到行内,肯定是不合理的,解决的办法是将大段的js代码封装成函数,然后触发事件的时候,调用这个函数。
③、动态绑定
通过获取元素(标签、节点)的dom对象,然后给dom对象绑定事件的方式来实现事件的绑定。
3、在事件处理程序中,this分别表示什么
①、行内绑定
②、行内绑定—动态执行
③、动态绑定
二、闭包
1、概念
闭包,指的是词法表示包括不被计算的变量的函数,也就是说,函数可以使用函数之外定义的变量。
2、特点(作用)
1、和作用域的特定一致
可以在函数内部使用函数外部的变量。
2、使用闭包,内存不会释放
3、案例
1、点击页面中的三个li标签,能够正常输出li的下标
上面案例的另一种写法:
2、页面刷新后,每隔1秒分别输出1/2/3/4/5
三、DOM
1、什么是DOM
DOM全称是Document Object Model(文档对象模型),它是JS将HTML按文档结构和内容层次抽象出的模型,使得JS有了访问HTML的能力,能够实现对HTML中内容的操作。DOM存在广泛,PHP以及其他语言也有各自的DOM模型。
DOM模型呈现树状结构,因此也叫“树模型”,树中的内容(标签、属性、文本)称为“节点”,包含有元素节点(标签)、属性节点、文本节点。每个节点,都是一个dom节点对象。
2、节点与DOM模型
根据 W3C 的 HTML DOM 标准,HTML 文档中的所有内容都是节点:
整个文档是一个文档节点,用document对象表示
每个 HTML 元素是元素节点,比如html、head、body、a、h1
HTML 元素内的文本是文本节点
每个 HTML 属性是属性节点,比如href
注释是注释节点
3、节点之间的关系
4、元素节点查询操作
1、基于文档(document)查询
document.getElementById(元素id); //得到一个dom对象
document.getElementsByTagName(标签名); //得到的是一个数组,数组的每个单元是一个dom对象
前面这两种方法推荐使用,因为兼容性好。
document.getElementsByClassName(类名); //IE8+支持,就是从IE9支持 得到的是一个数组,数组的每个单元是一个dom对象
document.getElementsByName(元素的name属性); //得到的是一个数组
//h5中提供的方法
document.querySelector(css选择器); //IE7+支持 得到的是一个dom对象
document.querySelectorAll(css选择器); //IE7+支持 得到的是一个数组
测试的html:
js代码及效果:
2、相互关系查询
①、根据父节点查找子节点
②、根据子节点查父节点
③、查询兄弟节点
3、遗留DOM
早期DOM访问形式,在一些特定元素的获取上比较方便。被保留下来使用,W3C标准化之后 称为“0级DOM”。
document.body 访问body节点
document.forms 访问所有的表单 返回集合
document.formName[index].name 访问表单项
document.anchors 访问所有的锚点 返回集合
document.links 访问所有的链接 返回集合
document.images 访问所有的图片 返回集合
document.all 访问所有的元素
5、元素节点增删改操作
1、增加元素节点/创建节点
方法一:父节点.appendChild(子节点)
方法二:父节点.insertBefore(新节点, 参照的节点);
2、修改节点
方法:父节点.replaceChild(新节点, 待替换的节点);
3、删除节点
方法:父节点.removeChild(子节点);
6、属性节点操作
1、获取元素的属性
elementNode.attributes 获取元素的所有属性
elementNode.getAttribute() 读取一个属性值
elementNode.属性名 获取元素的属性
2、添加/修改元素的属性
elementNode.setAttribute() 设置(修改/添加)一个属性值
elementNode.属性名 = 值 设置元素的属性
3、删除元素的属性
elementNode.removeAttribute() 删除一个属性
4、判断元素是否有哪个属性
elementNode.hasAttribute() 检测是否有某个属性,有返回true,没有返回false
5、案例—全选,反选,取消
代码见19全选反选取消.html
7、操作css样式
1、设置css样式:
语法: node.style.css样式 = 值
不带中横线的css:node.style.样式 = 值。比如有color,border,width
带中横线的,样式要去掉中横线,后面的首字母大写,backgroundColor、fontSize、lineHeight
2、获取css样式
使用node.style.样式的方式只能获取行内样式和js已经设置过的样式。
在IE8及更低版本浏览器中支持node.currentStyle.样式
高版本浏览器支持getComputedStyle(node).样式
兼容的性的写法:
8、DOM属性
DOM有四个属性,分别是:
innerHTML
获取/设置元素里的html内容
nodeName
nodeName 是只读的
元素节点的 nodeName 与标签名相同
属性节点的 nodeName 与属性名相同
文本节点的 nodeName 始终是 #text
文档节点的 nodeName 始终是 #document
nodeValue
元素节点的 nodeValue 是 undefined 或 null
文本节点的 nodeValue 是文本本身
属性节点的 nodeValue 是属性值
nodeType
表示节点的类型
元素 1
属性 2
文本 3
注释 8
文档 9
案例:完成兼容性的查找子节点的方法,及查找上一个兄弟的方法,及查找下一个兄弟的方法
获取子元素的兼容性写法:
获取上一个兄弟的兼容性写法:
获取下一个兄弟的兼容性写法:
9、获取元素的位置
offsetLeft 元素在网页中水平坐标值 ele.offsetLeft
offsetTop 元素在网页中垂直坐标值 ele.offsetTop
offsetWidth 元素在页面中占据的宽度 ele.offsetWidth
offsetHeight 元素在页面中占据的高度 ele. offsetHeight
HTML+css:
js及输出结果:
scrollLeft 滚动条在容器中水平滚动的距离 ele.scrollLeft
scrollTop 滚动条在容器中垂直滚动的距离 ele.scrollTop
测试的时候,先将页面设置的大一点,能看到滚动条:
当滚动条滚动的时候,输出滚动的距离: