05 javascript知识点---BOM和DOM

1.DOM简单学习(为了满足案例要求)

功能：控制html文档的内容
获取页面标签(元素)对象：Element
　　document.getElementById("id值"):通过元素的id获取元素对象

操作Element对象：
　　1. 修改属性值：
　　　　1. 明确获取的对象是哪一个？
　　　　2. 查看API文档，找其中有哪些属性可以设置
　　2. 修改标签体内容：
　　　　* 属性：innerHTML
　　　　1. 获取元素对象
　　　　2. 使用innerHTML属性修改标签体内容

2.事件简单学习
功能：某些组件被执行了某些操作后，触发某些代码的执行。
如何绑定事件

　　1. 直接在html标签上，指定事件的属性(操作)，属性值就是js代码
　　　　1. 事件：onclick--- 单击事件

　　2. 通过js获取元素对象，指定事件属性，设置一个函数(掌握)

案例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>电灯开关</title>
</head>
<body>
    <img src="img/off.gif" id="light">
    <script>
        var light=document.getElementById("light");
        var flag=false;
        light.onclick=fun;
        function fun() {
            if(!flag){
                light.src="img/on.gif";
                flag=true;
            }else {
                light.src="img/off.gif";
                flag=false;
            }

        }


    </script>
</body>
</html>

3.BOM:
(1)概念：Browser Object Model 浏览器对象模型
* 将浏览器的各个组成部分封装成对象。

(2)组成：
　　* Window：窗口对象
　　* Navigator：浏览器对象(基本不用)
　　* Screen：显示器屏幕对象(基本不用)
　　* History：历史记录对象
　　* Location：地址栏对象

(3)Window：窗口对象
　　1. 创建
　　2. 方法
　　　　1. 与弹出框有关的方法：
　　　　　　<1>alert() 显示带有一段消息和一个确认按钮的警告框。
　　　　　　<2>confirm() 显示带有一段消息以及确认按钮和取消按钮的对话框。
　　　　　　　　* 如果用户点击确定按钮，则方法返回true
　　　　　　　　* 如果用户点击取消按钮，则方法返回false
　　　　2. 与打开关闭有关的方法：
　　　　　　close() 关闭浏览器窗口。
　　　　　　谁调用我，我关谁
　　　　　　open() 打开一个新的浏览器窗口
　　　　　　* 返回新的Window对象
　　　　3. 与定时器有关的方式
　　　　　　setTimeout() 在指定的毫秒数后调用函数或计算表达式。
　　　　　　* 参数：
　　　　　　1. js代码或者方法对象
　　　　　　2. 毫秒值
　　　　　　* 返回值：唯一标识，用于取消定时器
　　　　　　clearTimeout() 取消由 setTimeout() 方法设置的 timeout。

　　　　　　setInterval() 按照指定的周期（以毫秒计）来调用函数或计算表达式。
　　　　　　clearInterval() 取消由 setInterval() 设置的 timeout。

　　3. 属性：
　　　　1. 获取其他BOM对象：
　　　　　　history
　　　　　　location
　　　　　　Navigator
　　　　　　Screen:
　　　　2. 获取DOM对象
　　　　　　document
　　 4. 特点
　　　　* Window对象不需要创建可以直接使用 window使用。 window.方法名();
　　　　* window引用可以省略。方法名();

4. Location：地址栏对象
1. 创建(获取)：
1. window.location
2. location

2. 方法：
* reload() 重新加载当前文档。刷新
3. 属性
* href 设置或返回完整的 URL。

5. History：历史记录对象
1. 创建(获取)：
1. window.history
2. history

2. 方法：
* back() 加载 history 列表中的前一个 URL。
* forward() 加载 history 列表中的下一个 URL。
* go(参数) 加载 history 列表中的某个具体页面。
* 参数：
* 正数：前进几个历史记录
* 负数：后退几个历史记录
3. 属性：
* length 返回当前窗口历史列表中的 URL 数量。

05 javascript知识点---BOM和DOM

猜你喜欢