DOM

mac2025-12-18 8

try catch

在try 里面的代码发生错误，不会执行错误后的try里面的代码，但是会执行try外面的代码如果try 里面没有错误，不会执行catch中的代码 try{ console.log('a'); console.log(b);//出现错误，之后的代码都不执行 console.log('c');//不执行 }catch(e){ console.log(e.name + ":" + e.message);//当try中有错误代码时，执行这条语句 } console.log('d');//会执行 catch 是捕捉错误信息的，e.name e.message

错误的六种信息

EvalError : eval() 的使用与定义不一致RangeError : 数值越界ReferenceError : 非法或不能识别的引用数值SyntaxError : 发生语法解析错误TypeError : 操作数类型错误URIError : URI处理函数使用不当

es5的严格模式

最页面最前面加上“use strict”，启动es5严格模式

es5 不在兼容es3的一些不规则语法，不能使用

arguments.callee，caller,with (){} : 可以改变作用域链，括号中的对象会成为作用域链的最顶端，但是会降低运行效率 var obj = { name : "obj" } var name = "window"; function test() { var age = 23; var name = "scope", with(obj){ //该变了作用域链，此时obj位于最顶端 console.log(name);// obj console.log(age);// 23 } } test(); with 还可以简化代码 with(document){ write('a'); } //此时代码等同于 document.write('a'); 局部this必须被赋值，赋值的是什么就是什么拒绝重复的属性和参数

DOM

用来操作HTML和 xml 功能的一类对象的集合

选择器

一、查：

以下都是document下的方法取出的都是一组。如果要取一个需要加下标

getElementById(),获取元素idgetElementsByTagName():获取标签名getElementsByClassName(): 通过类名获取getElementsByName():通过name获取,input,img,iframe可以使用这个方法不经常用，选择的不是实时的，选择之后再更改没有作用querySelector():可以写css 选择器，选出的是一个，不是一组querySelectorAll():选出的是一组

遍历节点树(所有类型的结点都会遍历)

parentNode :父节点，最高的是document childNodes : 所有子节点 firstChild :第一个子节点 lastChild :最后一个子节点 nextsibling : 下一个兄弟节点 previousSibling : 前一个兄弟节点

节点类型

元素结点 — 1 属性结点 — 2 文本结点 — 3 注释结点 — 8 document — 9 后面的数字代表的是该类型返回的 nodeType

基于元素节点树的遍历(只会遍历元素结点) IE9以下不兼容

parentElement: 返回元素父节点，children: 元素子节点node.childElementCount:子节点个数，完全等同于children.lengthfirstElementChild:第一个元素子节点lastElementChild:最后一个元素子节点nextElementSibling:下一个元素子节点previousElementSibling:前一个元素子节点

结点的四个属性

nodeName: 元素的标签名，以大写形式表现，只读 nodeValue: 只有文本结点text和注释结点comment有，可读写，取得其内容 nodeType: 可以获取节点类型，只读 attributes: 该节点的属性节点的集合 Node.hasChildNodes(); 判断有没有子节点

<div id="abc" class="sss"> </div> //div.attributes[0].value //"abc" //div.attributes[0].name // id //此方法后期会有优化

dom树

getElementsByName() 方法定义在HTMLDocument.prototype上getElementsByTagName() 方法定义在Document.prototype和Element.prototype上getElementsById() 方法定义在Document.prototype，在Element结点上能使用document.documentElement 代表了html文档document.body 代表是body标签 <div> <span></span> </div> <span></span> //想要获取div下的span <script> var div = document.getElementByTagName('div'); var span = div.getElementByTagName('span'); //通过获取div下的标签获取span </script>

二、增

document.creatElement(); //创建元素结点(标签)，在js手中，不在页面中 document.creatTextNode();//创建文本结点 document.creatComment(); //创建注释结点 document.creatDocumentFragment(); //创建文本碎片结点

三、插

PARENTNODE.appendChild(); //类似于push方法，把新子节点添加到指定节点，也可是剪切操作（document.body是插入到页面中） PARENTNODE.insertBefore(a,b);//a插入在b之前

四、删

parent.removeChild(); //父节点移除子节点 child.remove(); //自己移除自己

五、替换

parentNode.replaceChild(new,old);//用新的替换老的

属性

Element结点的一些属性

innerHTML :改变内容，覆盖；可以写新标签；也可以获取内容 innerText :会覆盖结构；如果只有文本，可以使用

Element结点上的一些方法

ele.setAttribute(name, value); ele.getAttribute(name);//取行间属性的值

基本操作

一、滚动条

滚动条滚动距离： window.pageXOffset (水平距离))/ window.pageYOffset(垂直距离)IE8以下横向距离：document.body.scrollLeft +document.documentElement.scrollLeft（纵向的改为Top）

二、视口

IE9以上：window.innerWidth ,widow.innerHeight

1.标准模式： document.documentElement.clineHeight (Width) 2.怪异模式：document.body.clineWidth

三、元素

查看元素几何尺寸：**domEle.getBoundingClientRect() **：不常用

可以获取几何图形全部信息返回一个对象，包括left,top,right,bottom，height，width等，但是height和width在老版本IE中不能实现返回结果不是实时的

举个栗子：

2.查看元素尺寸

dom.offsetWidth 和 dom.offsetHeight：获取视觉上的尺寸，不包括marign dom.offestLeft 和 dom.offsetTop：对于无定位父级的元素，返回相对文档的坐标。对于有定位父级的元素，返回相对于最近的有定位的父级的坐标。 dom.offestParent：返回最近有定位的父级，没有返回null

DOM