JOM理解


try…catch

try{}catch(e) {}finally{}
Error.name的六种值对应的信息:
1. EvalError:eval()的使用与定义不一致
2. RangeError:数值越界
3. ReferenceError:非法或不能识别的引用数值
4. SyntaxError:发生语法解析错误
5. TypeError:操作数类型错误
6. URIError:URI处理函数使用不当

es5严格模式

“use strict”
不再兼容es3的一些不规则语法。使用全新的es5规范。
两种用法:
全局严格模式
局部函数内严格模式(推荐)
就是一行字符串,不会对不兼容严格模式的浏览器产生影响。
不支持with,arguments.callee,func.caller,变量赋值前必须声
明,局部this必须被赋值
(Person.call(null/undefined) 赋值什么就是什么),拒绝重复属性和参数

DOM

什么是DOM

1.DOM — > Document Object Model
2.DOM定义了表示和修改文档所需的方法。DOM对象即为宿主对象,
由浏览器厂商定义,用来操作html和xml功能的一类对象的集合。
也有人称DOM是对HTML以及XML的标准编程接口。

DOM基本操作

1.对节点的增删改查
查看元素节点
document代表整个文档
document.getElementById() //元素id 在Ie8以下的浏览器,
不区分id大小写,而且也返回匹配name属性的元素
.getElementsByTagName() // 标签名
getElementsByName(); //,需注意,只有部分标签name可生效(表单,表单元素,img,iframe)
.getElementsByClassName() // 类名 -> ie8和ie8以下的ie版本中没有,可以多个class一起
.querySelector() // css选择器   在ie7和ie7以下的版本中没有,非实时
.querySelectorAll() // css选择器 在ie7和ie7以下的版本中没有,非实时

DOM基本操作

遍历节点树:
parentNode -> 父节点  (最顶端的parentNode为#document);
childNodes -> 子节点们
firstChild -> 第一个子节点
lastChild -> 最后一个子节点
nextSibling->后一个兄弟节点 previousSibling->前一个兄弟节点
基于元素节点树的遍历
parentElement -> 返回当前元素的父元素节点 (IE不兼容) (以下IE不兼容指的是 9 以下)
children -> 只返回当前元素的元素子节点
node.childElementCount  === node.children.length当前元素节点的子元素节点个数(IE不兼容)
firstElementChild -> 返回的是第一个元素节点(IE不兼容)
lastElementChild -> 返回的是最后一个元素节点(IE不兼容)
nextElementSibling / previousElementSibling ->返回后一个/前一个兄弟元素节点(IE不兼容)

 DOM的基本运用

 查看元素的几何尺寸

    domEle.getBoundingClientRect();//兼容性很好
    该方法返回一个对象,对象里面有left,top,right,bottom等属性。
    left和top代表该元素左上角的X和Y坐标,right和bottom代表元素右下角的X和Y坐标
    height和width属性老版本IE并未实现
    返回的结果并不是“实时的”

查看元素的尺寸

    dom.offsetWidth,dom.offsetHeight

查看元素的位置

    dom.offsetLeft, dom.offsetTop
    对于无定位父级的元素,返回相对文档的坐标。
    对于有定位父级的元素,返回相对于最近的有定位的父级的坐标。
    dom.offsetParent
    返回最近的有定位的父级,如无,返回body, body.offsetParent 返回null
    eg:求元素相对于文档的坐标 getElementPosition

让滚动条滚动

    让滚动条滚动在window上有三个方法:
    scroll(),scrollTo()       scrollBy();
    三个方法功能类似,用法都是将x,y坐标传入。即实现让滚动轮滚动到当前位置。
    区别:scrollBy()会在之前的数据基础之上做累加。
    eg:利用scrollBy() 快速阅读的功能

脚本化CSS

读写元素css属性

    dom.style.prop
    可读写行间样式,没有兼容性问题,碰到float这样的保留字属性,前面应加css
    eg:float — > cssFloat
    复合属性必须拆解,组合单词变成小驼峰式写法
    写入的值必须是字符串格式

查询计算样式

    window.getComputedStyle(ele,null);
    计算样式只读
    返回的计算样式的值都是绝对值,没有相对单位
    IE8 及 IE8以下不兼容

查询样式

    ele.currentStyle
    计算样式只读
    返回的计算样式的值不是经过转换的绝对值
    IE独有的属性
    封装兼容性方法getStyle(elem,prop);

脚本化样式表

    查找,操作样式表
    document.styleSheets
    该属性存储了一个html文档里面的所有css样式表的集合

如何绑定事件处理函数

    1.ele.onxxx = function (event) {}
    兼容性很好,但是一个元素的同一个事件上只能绑定一个处理程序
    基本等同于写在HTML行间上
    2.obj.addEventListener(type, fn, false);
    IE9以下不兼容,可以为一个事件绑定多个处理程序
    3.obj.attachEvent(‘on’ + type, fn);
    IE独有,一个事件同样可以绑定多个处理程序

全部评论

相关推荐

点赞 评论 收藏
分享
评论
点赞
收藏
分享

创作者周榜

更多
牛客网
牛客网在线编程
牛客网题解
牛客企业服务