JavaScript基础(Dom操作)

目录

  • 一,BOM模型
    • 1.1,BOM可实现功能
  • 二,Window对象的常用属性
    • 2.1,Window对象的常用方法
      • 2.1-1,open()和close()方法
  • 三,History对象
  • 四,Location对象
  • 五,Document对象的常用方法
  • 六,定时函数
    • 6.1,清除函数
  • 七,写了一个小游戏 (模拟小球移动)
  • 最后

一,BOM模型

BOM提供了独立于内容的、可与浏览器窗口进行互动的对象结构
BOM:浏览器对象模型(Browser Object Model)
JavaScript基础(Dom操作)_第1张图片

1.1,BOM可实现功能

弹出新的浏览器窗口
移动、关闭浏览器窗口以及调整窗口的大小
页面的前进、后退

二,Window对象的常用属性

表示浏览器中打开的窗口
常用的属性

JavaScript基础(Dom操作)_第2张图片
这里面有Window所有对象我这截图不全,里面带f的是函数,不带的是属性

属性名称 说 明
history 有关客户访问过的URL的信息
location 有关当前 URL 的信息
screen 只读属性,包含客户端显示屏幕的信息

语法:
window.属性名= "属性值";

JavaScript基础(Dom操作)_第3张图片
返回这个点击直接跳转百度页面

screen.width 返回浏览器屏幕的宽度,单位为像素;
JavaScript基础(Dom操作)_第4张图片

2.1,Window对象的常用方法

常用的方法

方法名称 说 明
prompt( ) 显示可提示用户输入的对话框
alert( ) 显示带有一个提示信息和一个确定按钮的警示框
confirm( ) 显示一个带有提示信息、确定和取消按钮的对话框
close( ) 关闭浏览器窗口
open( ) 打开一个新的浏览器窗口,加载给定 URL 所指定的文档
setTimeout( ) 在指定的毫秒数后调用函数或计算表达式
setInterval( ) 按照指定的周期(以毫秒计)来调用函数或表达式
clearTimeout( ) 用于停止执行setTimeout( )方法的函数代码
clearInterval( ) 用于停止 setInterval( ) 方法执行的函数代码

2.1-1,open()和close()方法

<body>
    <div>
        <input type="button" value="打开窗口" onclick="openwin()"></input>
        <input type="button" value="关闭窗口" onclick="closewin()">
    </div>

</body>
<script>
    function openwin(){
        window.open("https://www.baidu.com.cn","win1")
    }
    function closewin(){
        window.close()
    }
</script>

Video_20230822152329

JavaScript基础(Dom操作)_第5张图片

第一个按钮可以打开窗口,第二个按钮可以关闭窗口

窗口特征的一些属性

属性名称 说 明
height、width 窗口文档显示区的高度、宽度,以像素计
left、top 窗口的x坐标、y坐标,以像素计
toolbar=yes ,no, 1 , 0 是否显示浏览器的工具栏,黙认是yes
scrollbars=yes,no,1,0 是否显示滚动条,黙认是yes
location=yes,no,1,0 是否显示地址地段,黙认是yes
status=yes,no,1,0 是否添加状态栏,黙认是yes
menubar=yes,no,1,0 是否显示菜单栏,黙认是yes
resizable=yes,no,1,0 窗口是否可调节尺寸,黙认是yes
titlebar=yes,no,1,0 是否显示标题栏,黙认是yes
fullscreen=yes,no,1,0 是否使用全屏模式显示浏览器,黙认是no。处于全屏模式的窗口必须同时处于剧院模式

三,History对象

保存用户上网的历史记录,可通过window.history属性访问

常用属性和方法

类别 名称 说明
属性 length 返回历史记录列表中的网址数
方法 back() 加载 History 对象列表中的前一个URL
方法 forward() 加载 History 对象列表中的下一个URL
方法 go() 加载 History 对象列表中的某个具体URL

在这里插入图片描述

<body>
    <div>
        <input type="button" value="跳转窗口" onclick="gotodemo01()">
    </div>

</body>
<script>
    function gotodemo01(){
        window.location.href="demo01.html"
    }
</script>

Video_20230822152033

<body>
    <div>
        <input type="button" value="打开窗口" onclick="openwin()"></input>
        <input type="button" value="关闭窗口" onclick="closewin()">
        <input type="button" value="跳转窗口" onclick="gotodemo01()">
        <input type="button" value="前进" onclick="qinajin()">
    </div>

</body>
<script>
    function openwin(){
        window.open("https://www.baidu.com.cn","win1")
    }
    function closewin(){
        window.close()
    }
    function gotodemo01(){
        window.location.href="demo01.html"
    }
    function qinajin(){
        window.history.forward();
    }
</script>
<body>
    passerby
    <div>
        <input type="button" value="后退" onclick="goblock()">
    </div>
</body>
<script>
    function goblock(){
        window.history.back();
    }
</script>

Video_20230822152919

四,Location对象

包含有关当前URL的信息,可通过window.location属性访问

常用属性

名称 说 明
host 设置或返回主机名和当前URL的端口号
hostname 设置或返回当前URL的主机名
href 设置或返回完整的URL

常用方法

名称 说 明
reload() 重新加载当前文档
replace() 用新的文档替换当前文档

JavaScript基础(Dom操作)_第6张图片

五,Document对象的常用方法

Document对象代表整个HTML文档
Document对象的常用方法

名 称 说 明 唯一
getElementById() 返回对拥有指定id的第一个对象的引用 对象的id唯一
getElementsByName() 返回带有指定名称的对象的集合 相同name属性
getElementsByTagName() 返回带有指定标签名的对象的集合 相同的元素
write() 向文档写文本、HTML表达式或JavaScript代码

写了一个小例子:

<!DOCTYPE html>
<html>

<head lang="en">
    <meta charset="UTF-8">
    <title>使用document对象操作页面</title>
    <style type="text/css">
        body,
        input,
        div,
        p{
            margin: 0;
            padding: 0;
        }

        body {
            font-size: 14px;
            font-family: "微软雅黑";
            line-height: 25px;
        }

        .content {
            width: 600px;
            margin: 30px auto;
        }

        .content img {
            float: left;
            width: 180px;
        }

        .r {
            float: right;
            width: 400px;
        }

        input[name="changephone"] {
            width: 100px;
            height: 28px;
            line-height: 28px;
            text-align: center;
            font-size: 14px;
            font-family: "微软雅黑";
            margin: 10px 0 10px 0;
        }

        input[name="size"] {
            width: 50px;
            text-align: center;
        }
        #replace {
            border: 1px solid rgb(179, 179, 179);
            height: 60px;
        }
    </style>
</head>

<body>
    <div class="content">
        <img src="images/pro4.jpg" alt="1+8Plus" />
        <div class="r">
            产品名称:<span id="phone123">1+8 Plus</span> <br>
            <input name="changephone" value="更换产品名称" type="button" onclick="changeName();" /><br>
           规格选择:
            <input name="size" type="text" value="64G" />
            <input name="size" type="text" value="128G" />
            <input name="size" type="text" value="256G" />
            <input name="size" type="text" value="512G" /><br>
            <input name="b2" type="button" value="input内容" onclick="all_input()" />
            <input name="b3" type="button" value="所有规格" onclick="s_input()" />
            <input name="b4" type="button" value="清空页面内容" onclick="clearAll()" />
            <p id="replace"></p>
        </div>
    </div>
    <script type="text/javascript">
        function changeName(){
            document.getElementById("phone123").innerHTML="ABC"
        }
        function all_input(){
            var inputArray = document.getElementsByTagName("input");
            var inputHtml = "";
            for(var i=0; i<inputArray.length; i++){
                var myinput = inputArray[i];
                inputHtml = inputHtml + myinput.value + "";
            }
            document.getElementById("replace").innerHTML=inputHtml;
        }

        function s_input(){
            var inputArray = document.getElementsByName("size");
            var inputHtml = "";
            for(var i=0; i<inputArray.length; i++){
                var myinput = inputArray[i];
                inputHtml = inputHtml + myinput.value + "";
            }
            document.getElementById("replace").innerHTML=inputHtml;
        }
        function clearAll(){
            document.getElementById("replace").innerHTML="";
        }
    </script>
</body>

</html>

Video_20230822170835

六,定时函数

超时调用:setTimeout()

window.setTimeout("调用的函数", 等待的毫秒数);

间歇调用:setInterval()

window.setInterval("调用的函数", 间隔的毫秒数);

示例

<!-- 加载完执行的事件 -->
<body onload="init()">
    

</body>
<script>
    function init(){
        setTimeout("fun1()",3000);
        // 3秒(3000毫秒)后执行fun1()函数一次
        setInterval("fun2()",2000)
        // 每隔2秒(2000毫秒)执行一次fun2()函数
    }

    


    function fun1(){
        console.log(1);
    }

    function fun2(){
        console.log(2);
    }
</script>

Video_20230822172316

6.1,清除函数

clearTimeout()

clearTimeout(setTimeOut()返回的ID)

clearInterval()

clearInterval(setInterval()返回的ID)

示例

<!-- 加载完执行的事件 -->
<body onload="init()">
    <input type="button" value="停止" onclick="stopInterval()">

    <input type="button" value="开始" onclick="startInterval()">

</body>
<script>

    var intervalIndex;

    function init(){
        setTimeout("fun1()",3000);
        // 3秒(3000毫秒)后执行fun1()函数一次
        intervalIndex = setInterval("fun2()",2000)
        // 每隔2秒(2000毫秒)执行一次fun2()函数
    }
    function fun1(){
        console.log(1);
    }

    function fun2(){
        console.log(2);
    }

    function stopInterval(){
        clearInterval(intervalIndex)
    }
    function startInterval(){
        intervalIndex = setInterval("fun2()",2000)
        // 每隔2秒(2000毫秒)执行一次fun2()函数
    }
</script>

Video_20230822173613

七,写了一个小游戏 (模拟小球移动)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    #box{
        border: 1px sandybrown solid;
        height: 100px;
        width: 100px;
        text-align: center;
        line-height: 100px;
        border-radius: 50px;
        position: absolute;
        left: 100px;
    }
</style>
<body> 
    <div id="box">点击开始</div>
</body>
<script>

//    绑定点击事件

    /**
     * 1.画静态页面
     * 2.绑定点击事件
     * 3.点击一次移动导固定位置(点一次移动一次)
     * 4.点击一次在原有的基础上移动固定位置(点一次移动一次)
     * 5.点击一次持续移动
     * 6.点击后,能判断出是要停止还是移动
     * 7.在停止的对应的代码上,停止循环
     * **/
    var boxDom = document.getElementById("box");
        // 创建一个绑定事件
    boxDom.addEventListener("click",isMove);
    var intervalIndex; 

    function isMove(){
        
        var boxHtml = boxDom.innerHTML // Div文字内容
        if(boxHtml=='点击停止'){
            // 停止循环
            clearInterval(intervalIndex);
            boxDom.innerHTML="点击开始"
        }else{
            // 开始循环
            intervalIndex = setInterval("Move()",10)
        }
        
    }
    // 方法调用一次移动1px
    function Move(){
        console.log(1);
        var leftVal = window.getComputedStyle(boxDom).left;
        console.log(leftVal);
        leftVal = parseInt(leftVal);
        leftVal =  leftVal+1;
        boxDom.style.left = leftVal+"px"
        boxDom.innerHTML="点击停止"
    }
</script>
</html>

Video_20230822175824

最后

送大家一句话:变好的过程都不太舒服,试试在努力点

你可能感兴趣的:(javascript,开发语言,ecmascript)