BOM、DOM、事件监听

BOM

概念：Browser Object Model

　　浏览器对象模型，允许JavaScript与浏览器对话，JavaScript将浏览器的各个组成部分封装为对象

组成：

　　Window：浏览器窗口对象

　　Navigator ：浏览器对象

　　Screen：屏幕对象

　　History：历史记录对象

　　Location：地址栏对象

Window：浏览器窗口对象

获取：直接使用window，其中window可省略

　　eg: window.alert("Hello"); --> alert("Hello");

属性：

　　history：对History对象的只读引用

　　location：用于窗口或框架的Location对象

　　navigator：对Navigator对象的只读引用

方法：

　　alert();　　　显示带有一段消息和一个确认按钮的警告框

　　confirm(); 显示带有一段消息以及确认按钮和取消按钮的对话框

　　　　返回值 true/false

　　setInterval(); 按照指定的周期（以毫秒计）来调用函数或计算表达式

　　setTimeout(); 在指定的毫秒数后调用函数或计算表达式

例：

延迟___后执行
    setTimeout(function(){
            alert("JS");
    },3000);
            (3000ms -->3s后执行且仅一次)
简写：
    setTime(()=>{
            执行代码块；
},毫秒数);

周期性调用
var i = 1;
    setInterval(function(){
        console.log("定时器执行了" + i + "次");
        i++;}, 2000);
                (2000ms -->2s执行一次
简写：
setInterval(()=>{
        执行代码块；
    },毫秒数);


注：在具体实践中发现：上面的setTimeout执行可打断下面setInterval周期性调用
  （上面alert警告框弹出后，不点击按钮，则下面setInterval不会继续执行）

Location

介绍：地址栏对象

获取：使用window.location获取，其中window可省略

　　　　window.location.属性； == location.属性;

属性：

　　href：设置或返回完整的url

　　　　location.href = "https://www. ……”；（跳转到指定地址页面）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src = "../JS/vue.js"></script>
</head>
<body>
    <div id = "app">

        <a v-bind:href="url">链接1</a>                        //属性值绑定
        <a :href="url">链接2</a>

        <input type="text" v-model = "url">                  //双向绑定
    </div>
</body>
<script>
    new Vue({
        el:"#app",  //vue接管区域，双向数据绑定
        data:{
            url:"https://www.cnblogs.com/liushuosbkd2003/"            //url在数据模型中的定义
        }
    })
</script>
</html>

以上代码执行后界面显示两个按钮，两个按钮指向同一网址。

具体vue请看下节

DOM　　W3C的标准，定义了访问HTML和XML文档的标准

概念：Document Object Model，文档对象模型

　　将标记语言的各个组成部分封装为对应的对象

1、Core-DOM-所有文档类型的标准模型

Document：整个文档对象

Element：元素对象（标签）

Attribute：属性对象

Text:　　文本对象

Comment：注释对象

JavaScript通过DOM，就能够对HTML进行操作：

　　改变HTML元素的内容

　　改变HTML元素的样式

　　对HTML DOM 事件作出反应

　　添加和删除HTML元素（动态）

每一个标签都会被封装为一个element对象

HTML中的Element对象可以通过Document对象获取，而Document对象是通过window对象获取的

Document对象中提供了以下获取Element元素对象的函数

1、根据id属性获取，返回单个Element对象
    var h1 = document.getElementById('h1');
2、根据标签名获取返，返回Element对象数组
    var divs = document.getElementByTagName('div');
3、根据name属性值获取，返回Element对象数组
    var hobbys = document.getEElementByName('hobby');
4、根据class属性值获取，返回Element对象数组
    var clss = document.getElementByClassName('cls');
        element.InnerHTML                   设置/返回元素的内容
        element.checked = true;            复选框选定

2、XML DOM-XML文档的标准模型

3、HTML DOM-HTML文档的标准模型

　　Image ：<img>

　　Button：<input type = 'button'>

JS事件监听

事件：HTML事件是发生在HTML元素上的“事情”

如：按钮被点击、鼠标的移入移出、键盘按键按下等

事件监听：JavaScript可以在事件被侦测到时执行代码

事件绑定

方式一：通过HTML标签中的事件属性进行绑定

<input  type = "button" onclick = "on()"  value = "按钮1">

<script>

    function  on(){
        alert("我被点击了");
    }
</script>

方式二：通过DOM元素属性绑定
<input  type = "button"  id = "btn"  value = "按钮2">
<script>
    document.getElementById('btn').onclick = function(){
        alert("我被点击了");
    }
</script>

常见事件：

事件名	说明
onclick	鼠标单机事件
onblur	元素失去焦点
onfocus	元素获得焦点
onload	某个界面或图像被完成加载
onsubmit	当表单提交时触发该事件
onkeydown	某个键盘的按键被按下
onmouseover	鼠标被移动到某元素上
onmouseout	鼠标从某元素移开

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src  ="../JS/vue.js"></script>
</head>
<body>
    <div id = "app">
        <input type="button" value = "按钮" v-on:click = "hand()">
        <input type="button" value = "按钮" @click = "hand()">
    </div>
</body>
<script>

    //点击
    new new Vue({
        el:"#app",
        data:{

        },
        methods:{
            hand : function(){
                alert("我被点了一下")
            }
        }
    })
</script>
</html>

以上代码执行后，按钮被点击后，即刻弹出警告框并输出内容

posted @ 2023-10-23 23:24 suN(小硕) 阅读(10) 评论(0) 编辑收藏举报

会员力量，点亮园子希望

刷新页面返回顶部

liushuosbkd2003

BOM、DOM、事件监听

公告