专栏首页JAVA人生/面试技巧DOM和事件和BOM的学习

DOM和事件和BOM的学习

#DOM的简单学习文档对象模型(Document Object Model,简称DOM) 功能:控制html文档的内容 *代码:获取页面标签(元素)对象,Element *Document.getElementByid("id值"):通过元素的id获得元素对象 *操作Element对象: 1.设置属性值: 1.1明确获取的对象是哪一个, 1.2查看API文档,找其中有哪些属性可以设置 2.修改标签体内容: *属性:innerHTML

 
```
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<img id="light" src="img/off.jpg"/></body>
<h1 id="title">悔创阿里杰克马</h1>
<script>
    //通过id获取元素对象,如果放在前面先加载就会报null,需要放在img标签后面
   /* var light=document.getElementById("light");
    alert("我要开灯了。。。");
    light.src="img/on.jpg";*/
    //1.获取h1标签对象
    var title=document.getElementById("tltle");
    alert("我要换内容了。。。");
    title.innerHTML="不识妻妹刘强东";
</script>
</html>
```
 
**事件的简单学习**
    *概念:某些组件被执行了某些操作后,处罚某些代码的执行
        *例如:我方水晶被吹毁我就骂队友,
              敌方水晶被吹毁我就夸奖自己
    *如何绑定事件
        1.直接在html标签上,指定事件的属性,属性值就是js代码
        2.通过js获取元素对象,指定事件属性,设置一个函数
 
```
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>事件绑定</title>
</head>
<body>
<!--点击这个图片会弹出'我被点击了。。。'-->
<!--
<img id="light" src="img/off.jpg" onclick="alert('我被点击了')"/>
-->
<!--缺点:耦合度高不利于维护-->
<img id="light" src="img/off.jpg" onclick="fun()" /></body>
<img id="light2" src="img/off.jpg"/></body>
<script>
    function fun() {
        alert('我被点击了');
        alert('我又被点击了');
    }
    function fun2() {
        alert('咋又点击我了');
    }
    //1.获取light2对象
    var light2=document.getElementById("light2");
    //2.绑定事件,指定函数对象名字
    light2.onclick=fun2;
</script>
</html>
```

案例:开灯关灯

```
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>电灯开关</title>
</head>
<body>
<img src="img/off.jpg"/></body>
<script>
    /*
    * 分析:
    *   1.获取图片对象
    *   2.绑定单击事件
    *   3.每次点击切换图片
    *       规则:
    *       如果开的on,切换为off
    *       如果灯是关的,off,切换图片为on
    *       使用标记flag来完成
    * */
    //1.获取图片对象
    var ligjt=document.getElementById("light");
    var flag=false;//代表灯是灭的
    //2.绑定单击事件
    light.onclick=function () {
        if (flag){//判断灯是开的,则灭掉
            light.src="img/off.jpg";
            flag=false;
        } else{//判断灯是关的,则开开
            light.src="img/on.jpg";
            flag=true;
        }
    }
</script>
</html>
```

BOM的学习 1.概念:Browser object Model 浏览器对象模型 *将浏览器的各个组成部分封装成对象

2.组成: Window:窗口对象 Navigator:浏览器对象 Screen:显示器屏幕对象 History:历史记录对象 Location:地址栏对象

Window:窗口对象 1.创建 2.方法 1.与弹出框有关的方法: alert()显示带有一段消息和一个确认按钮的警告框 confirm()显示带有一段消息以及确认按钮和取消按钮的对话框。 2.与开发关闭有关的方法: open()打开一个新的浏览器窗口 close()关闭浏览器窗口 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引用可以省略。方法名(); 4.Location:地址栏对象 1.创建(获取): 1.window.location 2.location 2.方法: reload() 重新加载当前文档。刷新 3.属性 href 设置或返回完整的URL. *HTML DOM 1.标签体的设置和获取:innerHTML 2.使用html元素的对象 3.控制元素样式 3.1.使用元素的style属性来设置 如: //修改元素的style属性来设置 div.style.border="1px solid red"; div.style.width="200px"; //font-size-->fontSize div.style.fontSize="20px"; //提前定义好类选择器的样式,通过元素的ClassName属性来设置其classs属性值。 .d2{ border:1px solid blue; width:200px; height:200px; } <div id="div2">div</div> var div2=document.getElementById("div2"); div2.onclick=function(){ div2.className="d1"; } }

##事件监听机制: *概念:某些组件被执行了某些操作后,触发某些代码的执行。 *事件:某些操作,如:单击,双击,键盘按下了,鼠标移动了。 *事件源:组。如:按钮 文本输入框。。。 *监听器:代码。 *注册监听:将事件,事件源,监听器结合在一起。当事件源发生了某个事件,则触发执行某个监听器代码。 *常见的事件: 1.点击事件: 1.onclick:单击事件 2.onblclick:双击事件 2.焦点事件 1.onblur:失去焦点 2.onfocus:元素获得焦点。 3.加载事件 1.onload:一张页面或一幅图像完成加载。 4.鼠标事件 onmousedown 鼠标按钮被按下 onmouseout 鼠标从某元素移开 onmouseover 鼠标移到某元素之上 onmouseup 鼠标按键被松开 onmousemove 鼠标被移动 5.键盘事件 1.onkeydown 某个键盘按键被按下 2.onkeyup 某个键盘按钮被松开 3.onkeypress 某个键盘按键被按下松开。 6.选择和改变 1.onchange 域的内容被改变 2.onselect 文本被选中 7.表单事件: 1.onsubmit确认按钮被点击 2.onreset重置按钮被点击

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • JavaSE笔记

    (2)一个.java源文件中可以声明多个类,但是只能有一个public修饰的类,文件名要和public修饰的类名保持一致;

    阮键
  • JAVA基础复习(重点)

    (2)一个.java源文件中可以声明多个类,但是只能有一个public修饰的类,文件名要和public修饰的类名保持一致;

    阮键
  • 十大经典排序算法JAVA,大公司必问

    选择排序(Selection-sort)是一种简单直观的排序算法。它的工作原理:首先在未排序序列中找到最小(大)元素,交换第一个数和最小值的内容,

    阮键
  • 前端基础-JavaScript(二)

    版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明...

    cwl_java
  • JDK1.9-MySQL基础

    版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。

    cwl_java
  • 编写可维护的JavaScript

    • 在方法中的局部变量(local variable)和第一条语句之间

    硬核项目经理
  • Python带你做个愉快的"动森"玩家! (超简单代码)

    最近Switch上的《动物森友会》可谓是炙手可热,它几乎算是任天堂版的《模拟人生》了,它的最新游戏《集合啦!动物森友会》(以下称“动森”)在发售后,取得了不错的...

    用户7466307
  • tensorflow:embedding_lookup

    embedding_lookup import tensorflow as tf embedding = tf.get_variable("embedding...

    ke1th
  • 烧脑:谷歌微软等巨头107道数据科学面试题,你能答出多少?

    来自 Glassdoor 的最新数据可以告诉我们各大科技公司最近在招聘面试时最喜欢向候选人提什么问题。首先有一个令人惋惜的结论:根据统计,几乎所有的公司都有着自...

    华章科技
  • 用机器学习的方法鉴别红楼梦作者

    在学界一般认为,《红楼梦》后 40 回并非曹雪芹所著。本文尝试应用机器学习的方法来分析原著文本中作者的用词习惯,从技术角度去说明《红楼梦》前 80 回和后 40...

    CDA数据分析师

扫码关注云+社区

领取腾讯云代金券