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）
在这里插入图片描述

1.1，BOM可实现功能

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

二，Window对象的常用属性

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

在这里插入图片描述
这里面有Window所有对象我这截图不全，里面带f的是函数，不带的是属性

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

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

在这里插入图片描述
返回这个点击直接跳转百度页面

screen.width 返回浏览器屏幕的宽度，单位为像素;
在这里插入图片描述

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

在这里插入图片描述

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

窗口特征的一些属性

属性名称	说明
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()	用新的文档替换当前文档

在这里插入图片描述

五，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

最后

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