8_js try...catch及错误类型、dom操作

try…catch

    try{
      console.log('a');
      console.log(b);// error
      console.log('c');
    }catch(e) {// error error.message error.name --> 系统会封装到error对象中，然后传到这个变量e来供我们使用
      console.log(e.name + " : " + e.message);
    }
    console.log('d');

报错之后的行数不再执行，直接执行完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

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

DOM基本操作

1.对节点的增删改查

• 查

  • 查看元素节点
    • document代表整个文档
    • document. getElementByld()// 元素id在ie8以下的浏览器,不区分id大小写,而且也返回匹配name属性的元素
    • getElementsByTagName()// 标签名
    • getElementsByName()// 需注意,只有部分标签name可生效(表单,表单元素,img, iframe)
    • getElementsByClassName()// 类名->ie8和ie8以下的ie版本中没有,可以多个class一起
    • querySelector()// css选择器 在ie7和ie7以下的版本中没有
    • querySelectorAll()//css选择器 在ie7和ie7以下的版本中没有
      querySelector一般不用，因为它有个致命的问题就是选出来的不实时

• 遍历节点树:

  • parentNode->父节点(最顶端的 parentNode为 #document;
  • childNodes->子节点们
  • firstChild->第一个子节点
  • lastChild->最后一个子节点
  • nextSibling>后一个兄弟节点 previousSibling->前一个兄弟节点

• 基于元素节点树的遍历

  • parentElement->返回当前元素的父元素节点（ie9及以下不兼容）
  • children->只返回当前元素的元素子节点（ie4.5有兼容问题）
  • node.childElementCount === node.children.length当前元素节点（ie9及以下不兼容）
  • firstElementChild->返回的是第一个元素节点（ie9及以下不兼容）
  • lastElementChild->返回的是最后一个元素节点（ie9及以下不兼容）
  • nextElementSibling/ previousElementSibling->返回后一个/前一个兄弟元素（ie9及以下不兼容）

DOM基本操作

节点的类型（nodeType）

• 元素节点 ---- 1
• 属性节点 ---- 2
• 文本节点 ---- 3
• 注释节点 ---- 8
• document ---- 9
• DocumentFragment ---- 11 这是一个DOM元素占位符，用于将其子元素插入HTML文档树

节点的四个属性

• nodename
  • 元素的标签名,以大写形式表示只读
• nodeValue
  • Text节点或 Comment节点的文本内容,可读写
• nodeType
  • 该节点的类型,只读(返回节点类型后面的数值)
• attributes
  • Element节点的属性集合

节点的一个方法 Node.hasChildNodes();

DOM结构树

Node{
　　　　Document{
　　　　　　HTMLDocument
　　　　　　XMLDocument
　　　　}
　　　　CharacterData{
　　　　　　Text
　　　　　　Comment
　　　　}
　　　　Element{
　　　　　　HTMLElement{
　　　　　　　　HTMLHeadElement
　　　　　　　　HTMLBodyElement
　　　　　　　　HTMLTitleElement
　　　　　　　　HTMLParagraphElement
　　　　　　　　HTMLInputElement
　　　　　　　　HTMLTableElement
　　　　　　　　etc.
　　　　　　}
　　　　　　XMLElement
　　　　}
　　　　Attr
　　}

DOM结构树注意点

1. getElementById方法定义在Document.prototype上，即Element节点上不能使用
2. getElementsByName方法定义在HTMLDocument.prototype上，即非html中的document以外不能使用（XMLDocument，XHLElement）
3. getElementsByTagName方法定义在Document.prototype和Element.prototype上，即既可以通过document.getElementsByTagName查找也可以通过div.getElementsByTagName查找
4. HTMLDocument.prototype定义了一些常用的属性，document.body、document.head分别指代HTML文档中的标签
5. Document.prototype上定义了documentElement属性，指代文档的根元素，在HTML文档中，它总是指代元素
6. getElementsByClassName和querySelector、querySelectorAll在Document.prototype和Element.prototype上均有定义

增加节点

• document.createElement() // 创建元素节点
• document.createTextNode() // 创建文本节点
• document.createComment()
• document.createDocumentFragment()

插入节点

• PARENTNODE.appendChild() // 把页面中的一个元素节点添加到另一个地方相当于剪切操作
• PARENTNODE.insertBefore(a, b) // 在PARENTNODE里面insert a before b

实现一个insertAfter功能

        Element.prototype.insertAfter = function (targetNode, afterNode) {
            var beforeNode = afterNode.nextElementSibling;
            if(beforeNode == null) {
                this.appendChild(targetNode);// 如果下一个节点为null，那么就直接插入
            }else{
                this.insertBefore(targetNode, beforeNode);// 找到下一个节点，用beforeNode即可
            }
        }
        var div = document.getElementsByClassName('div')[0];
        var b = document.getElementsByTagName('b')[0];
        var span = document.getElementsByTagName('span')[0];
        var p = document.createElement('p');// 控制台上用insertAfter操作这些变量来检测是否有用

删除节点

• PARENTNODE.removeChild() // 返回被remove的节点 (相当于谋杀)
• SELFNODE.remove() // 返回被remove的节点（相当于自尽）

替换节点

• PARENTNODE.replaceChild(new, origin)

Element节点的一些属性

• innerHTML
• innerText(老版本火狐不兼容)/ textContent(老版本IE不好使)

Element节点的一些方法

• ele.setAttribute(‘属性名’，‘属性值’) // 设置属性
• ele.getattribute(属性名) // 查看属性值

    <div></div>
    <script>
        // dom 对象
        var div = document.getElementsByTagName('div')[0];
        div.style.width = "100px";
        div.style.height = "100px";
        div.style.backgroundColor = "red";

        var count = 0;
        div.onclick = function () {
            count ++;
            if(count % 2 == 1) {
                this.style.backgroundColor = 'yellow';
                this.style.width = "200px";
                this.style.height = "50px"
                this.style.borderRadius = "50%";
            } else {
                this.style.width = "100px";
                this.style.height = "100px";
                this.style.backgroundColor = "red";
            }
        }
    </script>

简单的选项卡功能

<!doctype html>
<html lang="cn">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .content{
            display: none;
            width:200px;
            height:200px;
            border:2px solid red;
        }
        .active{
            background-color: yellow;
        }
    </style>
</head>
<body>
    <div class="wrapper">
        <button class="active">111</button>
        <button>222</button>
        <button>333</button>
        <div class="content" style="display:block">1111</div>
        <div class="content">2222</div>
        <div class="content">3333</div>
    </div>
    <script>
        var btn = document.getElementsByTagName('button');
        var div = document.getElementsByClassName('content');
        for(var i = 0; i < btn.length; i++) {
            (function (n) {
                btn[i].onclick = function () {
                    for(var j = 0; j < btn.length; j++) {
                        btn[j].className = "";
                        div[j].style.display = "none";
                    }
                    this.className = "active";
                    div[n].style.display = "block";
                }
            }(i))
        }
    </script>
</body>
</html>

加速运动

    <script>
        var div = document.createElement('div');
        document.body.appendChild(div);
        div.style.width = "100px";
        div.style.height = "100px";
        div.style.backgroundColor = "red";
        div.style.position = "absolute";
        div.style.left = "0";
        div.style.top = "0";

        var speed = 1;
        var timer = setInterval(function () {
            speed += speed/20;// 加速运动
            div.style.left = parseInt(div.style.left) + speed + 'px';
            div.style.top = parseInt(div.style.top) + speed + 'px';
            if(parseInt(div.style.top) > 300 && parseInt(div.style.left) > 300) {
                clearInterval(timer);
            }
        }, 20);
    </script>

控制方块

        var div = document.createElement('div');
        document.body.appendChild(div);
        div.style.width = "100px";
        div.style.height = "100px";
        div.style.backgroundColor = "red";
        div.style.position = "absolute";
        div.style.left = "0";
        div.style.top = "0";

        document.onkeydown = function (e) {
            switch(e.which) {
                case 38:
                    div.style.top = parseInt(div.style.top) - 5 + "px";
                    break;
                case 40:
                    div.style.top = parseInt(div.style.top) + 5 + "px";
                    break;
                case 37:
                    div.style.left = parseInt(div.style.left) - 5 + "px";
                    break;
                case 39:
                    div.style.left = parseInt(div.style.left) + 5 + "px";
                    break;
            }
        }