ThankNeko's Blog
Hoshinozora
2022-06-21
目录

BOM和DOM

# BOM操作

# BOM介绍

BOM即浏览器对象模型，它提供API使JS代码能够操作浏览器。

# window对象

window对象指的就是浏览器窗口。

**弹出新浏览器子窗口：window.open("URL","窗口名","窗口参数")

会打开一个新窗口，并跳转到指定URL。

函数参数：

  • URL：可为本地文件、相对URL、绝对URL

  • 窗口名：弹出窗口的名字，非必须可为空。

  • 窗口参数：，以字符串的形式传入，多个参数用逗号隔开，非必须可为空。

    • height=100 窗口高度
    • width=400 窗口宽度
    • top=0 窗口距离屏幕上方的像素值
    • left=0 窗口距离屏幕左侧的像素值

    例如："height=值px, width=值px"

    如果指定了长宽，则会弹出一个指定大小的窗口，并在此子窗口打开指定的URL网址。

用于父子窗口通信：window.opner()

关闭浏览器窗口：window.close()

获取浏览器userAgent信息：window.navigator.userAgent

例如：'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/95.0.4638.69 Safari/537.36'

# history对象

浏览器当前页面回退到上一页：window.history.back()

浏览器当前页面前进到下一页：window.history.forward()

# location对象

当前页面的URL链接：window.location.href

修改该对象的值为其他URL：window.location.href = "url"

页面会跳转到指定URL。

刷新当前页面：window.location.reload()

# 弹出框

警告框：alert("提示信息")

弹出警告信息提示用户。

确认框：confirm("确认提示信息")

弹出确认框供用户选择确定或取消。

用户如果点击确定，会返回true。

用户如果点击取消，会返回false。

提示框：prompt("提示信息")

弹出输入文本框供用户输入信息。

用户如果输入内容并点击确定，会返回其"内容"。

用户如果未输入但点击了确定，会返回""。

用户如果点击取消，会返回null。

# 定时器

等待定时器：setTimeout(函数对象, 毫秒, 参数...)

等待指定毫秒之后，执行一次指定的函数。

清除等待定时器：clearTimeout(定时任务名)

必须在定义定时任务时，给其指定一个名称，然后才能清除该任务。

例如：

let waitAlert = setTimeout(alertOn,3000);

clearTimeout(waitAlert)

间隔循环定时器：setInterval(函数对象, 毫秒, 参数...)

每隔指定的毫秒时间，就执行一次指定的函数。

清除间隔定时器：clearInterval(定时任务名)

必须在定义定时任务时，给其指定一个名称，然后才能清除该任务。

例如：

  • let waitAlert = setInterval(alertOn,3000);
  • clearInterval(waitAlert)

# DOM操作

# DOM介绍

DOM即文档对象模型，它提供API使JS代码能够操作标签。

JavaScript可以通过DOM创建动态的HTML页面，能改变页面中的所有元素、属性、CSS等，且能对页面中的所有事件作出反应。

# 节点介绍

文档中的每一个部分都是节点，包括元素、属性、文本、注释等。

image-20251021165947033

Document。

Element - 元素。

Attr - 属性。

Text - 文本。

Comment - 注释。

# 标签查找

DOM操作都需要以document关键字开始，如：document.xxx(xxx)

# 标签对象变量名规范

以Ele结尾，例如：let divEle = document.getElementsByTagName("div")

# 直接查找

id查找：document.getElementById("标签ID")

会直接返回找到的标签对象，因为标签的ID是唯一的。

类查找：document.getElementsByClass("类名")

会返回一个数组存放找到的标签对象，因为通过类找到的标签可能会有多个。

标签查找：document.getElementsByTagName("标签类型")

会返回一个数组存放找到的标签对象，因为通过标签类型找到的标签可能会有多个。

# 间接相对查找

通过已有的标签对象，查找该标签的父标签、子标签、兄弟标签等。

查找标签对象的父标签：[标签对象].aprentElement

还可以链式查找：[标签对象].aprentElement.aprentElement...

查找标签对象的所有子标签：[标签对象].children

查找标签对象的下个兄弟标签：[标签对象].nextElementSibling

查找标签对象的上个兄弟标签：[标签对象].previousElementSibling

# 节点操作

通过DOM操作动态的创建标签，并给标签添加属性，最后将标签添加到内容中。

# 创建新标签对象

let 标签对象名 = document.createElement("标签类型")

# 标签对象设置属性

[标签对象].setAttribute("属性名", "值")

可设置自定义属性和默认属性。

[标签对象].[默认属性] = "值"

只能设置默认属性。

# 标签对象设置文本

[标签对象].innerText = "文本内容"

# 标签对象内部的尾部追加新标签

[标签对象].appendChild(新标签的对象)

需要先找到指定标签对象 ，然后才能在指定标签对象内部的尾部追加新标签。

例如：divEle.appendChild(imgEle)

# 标签对象内部的指定标签上面追加新标签

[标签对象].insertBefore(新标签的对象, 指定标签的对象)

会在标签对象内部的指定标签的上面，插入新标签。

# 操作标签class属性

查看标签class属性：[标签对象].classList

标签移除class属性：[标签对象].classList.remove("类名")

标签添加class属性：[标签对象].classList.add("类名")

标签切换class属性：[标签对象].classList.toggle("类名")

方法指定的class属性有则移除、无则添加。

判断标签是否有某class属性：[标签对象].classList.contains("类名")

# 操作标签css属性

[标签对象].style.[样式属性] = [属性值]

此处的样式属性名需要使用驼峰体，所有的_去掉，_后面的首字母变成大写。

# 获取表单内嵌标签的值

[标签对象].value

获取标签当前value属性的值，比如获取输入框标签对象当前输入的值。

# 获取上传的文件的数据

[文件标签对象].files[0]

获取文件标签上传的文件数据。

# 事件

# 事件介绍

事件是指事先设定的某个条件，当条件达成时将自动触发某个动作。

比如：按下三次按钮，则指定一段JavaScript代码。

# 事件属性

原生js绑定事件时前面都会有一个on。

# button元素

onclick属性：<button onclick="function()">按钮名</button>

onclick="function()" 表示单击事件，在按钮被单击时触发function函数。

()内可以传入任意参数，和在外面调用函数的传参方式一样。

# input元素

onclick属性：<input onfocus="function()">

onfocus="function()" 表示取得焦点事件，在输入框取得焦点时触发function函数。

onblur属性：<input onblur="function()">

onblur="function()" 表示失去焦点事件，在输入框失去焦点时触发function函数。

# select元素

onchange属性：<select onchange="function()">

onchange="function()" 表示文本域改变事件，下拉框选项改变时触发function函数。

# 实现方法

<button id='b1'>按钮名</button>
<script>
// 查找标签，然后绑定对应事件。
let btnEle = document.getElementById('b1');
btnEle.onclick = function () {
alert(xxx)
}
</script>
1
2
3
4
5
6
7
8

# 事件绑定案例

点击按钮标签变色。

<div id="d1" class='be_gree be_red'></div>
<button id="b1">变色</button>
<script>
    let btnEle = document.getElementById('b1')
    let divEle = document.getElementById('d1')
    btnEle.onclick = function() {
        divEle.classList.toggle('be_red')
    }
</script>
1
2
3
4
5
6
7
8
9

获得焦点时清空输入框，失去焦点时还原。

function clearInput(inputEle){
    if(inputEle.value == inputEle.defaultValue){
        inputEle.value = '';
    }
}

function ifNotResetInput(inputEle){
    if(inputEle.value == ""){
        inputEle.value = inputEle.defaultValue;
    }
}

<input id="username" type="text" name="username" onfocus="clearInput(username)" onblur="ifNotResetInput(username)" defaultValue="请输入用户名" value="请输入用户名">
1
2
3
4
5
6
7
8
9
10
11
12
13

实时展示当前时间。

    <input type="text" id="d1">
    <div>
        <button id='b1'>开始</button>
        <button id='b2'>结束</button>
    </div>
    <script>
        // 访问页面时，获取当前时间
        let iEle = document.getElementById('d1')
        function flushTime() {
            let currentTime = new Date();
            iEle.value = currentTime.toLocaleString()
        }
        flushTime()
        // 设置开始结束事件
        let startBtnEle = document.getElementById('b1');
        let endBtnEle = document.getElementById('b2');
        let timing = null;
        startBtnEle.onclick = function() {
            if (!timing) {
                timing = setInterval(flushTime, 1000);
            }
        }
        endBtnEle.onclick = function() {
            if (timing) {
                clearInterval(timing);
                timing = null;
            }
        }
    </script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

双下拉框联动。

<select name="sheng" id="d1"><option disabled selected>---请选择---</option></select>
<select name="shi" id="d2"><option disabled selected>---请选择---</option></select>
<script>
    // 先添加数据
    data = {
        '广东省': ['广州','深圳'],
        '湖南省': ['怀化','株洲'],
        '四川省': ['成都']
    }
    // for循环获取并添加省
    let shengSelectEle = document.getElementById('d1')
    for (let i in data) {
        let opEle = document.createElement('option')
        opEle.text = i
        opEle.value = i
        shengSelectEle.appendChild(opEle)
    }
    // 文本域改变事件
    let shiSelectEle = document.getElementById('d2')
    shengSelectEle.onchange = function () {
        // 清空已有的选项
        shiSelectEle.innerHTML = '<option disabled selected>---请选择---</option>'
        let currentSheng = shengSelectEle.value
        let currentCityList = data[currentSheng]
        for (i=0;i<currentCityList.length;i++) {
            let opEle = document.createElement('option')
            opEle.text = currentCityList[i]
            opEle.value = currentCityList[i]
            shiSelectEle.appendChild(opEle)
        }
    }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

# 其他

JS脚本的导入语句，虽然head内和body内都可以放，但一般都是放在body内的最底部。

这是为了防止读取JS时，JS函数所调用标签、函数等还没有加载于是引发报错。也是为了防止加载JS时阻塞页面的加载。

#前端#JavaScript#BOM
JavaScript基础
Bootstrap5

← Bootstrap5→

最近更新
01
Vue路由
12-09
02
FastAPI实现用户管理
11-23
03
Tortoise ORM
11-23
更多文章>
Theme by Vdoing | Copyright © 2022-2026 Hoshinozora | MIT License
湘ICP备2022022820号-1