奔跑吧，我的JavaScript(3)

时间：2015-08-27 15:24:13 阅读：182 评论：0 收藏：0 [点我收藏+]

标签：信息处理对象 dom 文档

JavaScript异常捕获

1.异常：执行过程中，发生了错误，导致程序停止运行

2.异常抛出：将异常生成一个错误信息

3.异常捕获

try{

发生异常的代码块

}catch(err){

错误信息处理

}

举一个例子：

try{
str = function demo(){
}
}catch(err){
alert(err);
}
demo();

其中，我们str未定义，demo()函数没有函数体，这样我们捕获到的错误会是什么？

当然我们也可以用throw语句，自己自定义一个错误。

DOM

1.简介：DOM(文档对象模型)，针对HTML和XML文档的一个API

2.DOM将任何HTML文档描绘成一个有多层节点构成的结构，节点之间构成层次，形成一个树形结构。

3.文档节点是每个文档的根节点

4.文档元素是文档最外层元素，文档中其他元素都包含在文档元素中，只有一个文档元素。在HTML页面中，<html>始终为文档元素。

5.Node我们称为类数组对象，保存一组有序的节点。可用[index]和item(index)两种方法访问具体的数值

1.同一级的节点，会指向相同的父节点

2.相邻之间的两个节点，可以使用nextsibling()和previoussibing()相互引出

3.所有的节点都有一个相同的属性，ownerdouments(),可以指向文档节点

DOM操作HTML

1.当页面被加载时，浏览器会创建页面的文档对象模型

2.寻找元素：寻找id；寻找标签名Tag name

3.改变内容，innerHTML

4.改变属性

1.改变HTML输出流

注：不能在文档加载完成后再使用douments.write，这样会覆盖该文档

<body>
<button id="btn" onclick="demo()">按钮</button>
<p id="pid">Hello</p>
<script>
    function demo(){
        var btn1 = document.getElementById("btn");
        pid.innerHTML = "World";
    }
</script>

</body>

DOM操作CSS

1.改变CSS样式

<style>
    #div{
        width: 100px;
        height: 100px;
        background-color: red;
    }
</style>
<body>
<div id="div">
    hello world
</div>
<script>
    function demo(){
        document.getElementById("div").style.backgroundColor = "blue";
    }

</script>
<button onclick="demo()">abc</button>

</body>

DOM事件

1.DOMEventListener

句柄可以将统一方法抽象为事件

句柄之间不会相互覆盖

齐总包含两个句柄：addEventListener(向指定元素添加事件句柄)，removeEventListener(移除所添加的句柄)

JavaScript事件流

描述的是在页面中，接受事件的顺序

1.事件冒泡

有具体元素接收，然后逐级向上传播至最不具体的元素的节点(从内到外，逐级传播)

2.事件捕获

最不具体的节点先接受事件，而最具体的节点应该最后接收事件(从外到内，逐级传播)

3.事件处理

HTML事件处理：直接添加到HTML结构中

DOM0级事件处理：把一个函数赋值给一个事件处理程序属性，但会覆盖上级事件，通过ID调用

DOM2级事件处理：addEventListener(事件名，事件处理函数，布尔值)（Ps.true：事件捕获，false：事件冒泡）

IE事件处理程序：attachEvent/detachEvent

<body>
<!--HTML事件处理-->
<div>
    <button id="btn1" onclick="demo()">按钮</button>
    <script>
        function demo(){
            alert("HTML事件处理");
        }
    </script>
</div>
<!--DOM0级事件处理-->
<div>
    <button id="btn1">按钮</button>
    <script>
        var btn = document.getElementById("btn1");
        function demo(){
            alert("DOM0事件处理");
        }
        btn.onclick = demo;
    </script>
</div>
<!--DOM2级事件处理-->
<div>
    <button id="btn1">按钮</button>
    <script>
        var btn = document.getElementById("btn1").addEventListener("click",demo);
        function demo(){
            alert("DOM2级事件处理");
        }
    </script>
</div>
</body>

IE事件处理这里就不再过多说明了。

奔跑吧，我的JavaScript(3)

标签：信息处理对象 dom 文档

原文地址：http://blog.csdn.net/u011318165/article/details/48024849

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)

周排行