DOM

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

错误的六种信息

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

es5的严格模式

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

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

1. arguments.callee，caller,
2. 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');

3. 局部this必须被赋值，赋值的是什么就是什么
4. 拒绝重复的属性和参数

DOM

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

选择器

一、 查：

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

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

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

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

节点类型

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

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

1. parentElement: 返回元素父节点，
2. children: 元素子节点
3. node.childElementCount:子节点个数，完全等同于children.length
4. firstElementChild:第一个元素子节点
5. lastElementChild:最后一个元素子节点
6. nextElementSibling:下一个元素子节点
7. 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树

1. getElementsByName() 方法定义在HTMLDocument.prototype上
2. getElementsByTagName() 方法定义在Document.prototype和Element.prototype上
3. getElementsById() 方法定义在Document.prototype，在Element结点上能使用
4. document.documentElement 代表了html文档
5. 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);//取行间属性的值

基本操作

一、滚动条

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

二、视口

1. IE9以上：
2. window.innerWidth ,widow.innerHeight

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

三、元素

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

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

举个栗子：

2.查看元素尺寸

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

四、让滚动条滚动

1. scroll(x,y) 和 scrollTo(x,y): x,横向；y,纵向；滚动到某个位置

scroll(0,10); //让滚动条滚动到10的位置，页面会向下

2.scrollBy(x,y); x,横向；y,纵向； 滚动累加，只要执行就可以动

scroll(0,10); //滚动到10的位置
scorll(0.10); //滚动到20的位置