No tag
Publish Date:   2024-04-20

内容预告

众所周知，要学java先有‘对象’，对于万物皆对象的java而言，对象是不可或缺的。今天带大家了解一下JavaScript的BOM和DOM对象

学习前提：

至少知道JS的基础语法：如：书写语法，变量，函数，循环等

内容预览:

  1. 对BOM和DOM有一个初步的认知
  2. 会使用BOM的window对象：弹出警告框，显示对话框，两种计时器的使用，
  3. 利用DOM获取元素对象，并能调用元素对象的属性或方法来操作HTML的元素和对象

BOM部分

BOM概念

概念：浏览器对象模型，允许JavaScript与浏览器对话（JavaScript会将浏览器各个部分封装为对象）即：将一个浏览器的各个组成部分封装成对象供调用使用。

组成：

  1. window：浏览器窗口对象
  2. Navigator：浏览器对象
  3. Screen：屏幕对象
  4. History：历史记录对象
  5. Location：地址栏对象
  6. Document：文档对象

主要介绍一下浏览器对像的一些常用方法

Window对象的常用方法

使用方法时：window可以省略

1.弹出警告框alert

1
2
3
4
5
<script>
	window.alert("Hello BOM");
    alert("Hello jie");	
	//以上两种方法均可以弹出警告框
</script>

2.显示对话框confirm

1
2
3
4
<script>
var a = confirm("你确认删除该记录吗？")
alert(a);//点击确认：a的返回值为：ture;点击取消：a的返回值为false
<script>

3.定时器

  1. 周期性执行某一函数setInterval(函数,时间)

    1
    2
    3
    4
    5
    6
    7
    8
    <script>
    var i=0
    setInterval(function(){
    	i++;
    	console.log("定时器执行力"+i+"次");//在控制台中显示
    },2000);//间隔时间
    //每隔2秒，在控制台中显示执行了'i'次
    </script>

  2. 延迟指定时间执行某一函数setTimeout(函数,时间)

    1
    2
    3
    4
    5
    6
    7
    <script>
    var i =0;
    setTimeout(functon(){
        i++;
        confirm(i)},3000)
    //3秒后弹出警告框
    </script?

DOM部分

DOM概念

文档对象模型：将标记语言文档的各个组成部分，封装为对象。同时会在浏览器的内容中形成**DOM树。**如下图：

DOM的作用：

同过document对象获取HTML文档中的元素，并对其进行操作如：

  1. 改变HTML元素的内容
  2. 改变HTML元素的样式
  3. 对HTML的DOM事件做出反应
  4. 添加或删除HTML元素等

DOM的组成：

  1. document：整个文档对象
  2. Element：元素对象（每一个元素对象都对于html或或XML文档中的一个标签。）
  3. Attribute：属性对象
  4. Text：文本对象
  5. Comment：注释对象

获取元素对象

利用Document对象来获取Element

具体方法：

  1. 利用id属性值来获取，返回值为Element对象

    var img =documtent.getElementID('h1');

  2. 利用标签名来获取，返回值为Element对象数组

    var divs =documtent.getElementsByTagName('div');

  3. 利用name属性值来获取，返回值为Element对象数组

    var bodys =documtent.getElementsByName('body');

  4. 利用class属性值来获取，返回值为Element对象数组

    var classes =documtent.getElementsByClassName('classes');

下面以一个示例来介绍：

  1. 分别根据id，属性值来获取Element对象

  2. 如何利用获取的Element对象,更改元素的属性

    注：HTML的元素属性非常多，大家可以去官网查看

    1. 官网为：w3school 在线教程
    2. 查看方法：1.点击JavaScript，点击参考书，最终网站：JavaScript 和 HTML DOM 参考手册 (w3school.com.cn)
    3. 找到需要的标签，再到需要属性，根据提示更改
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
32
33
34
35
36
37
38
!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>
<body>
<img id="h1" src="https://ts1.cn.mm.bing.net/th/id/R-C.b3c68ef9de1109b0d020e22bc2aacf40?rik=H9R9l7dvJP9Kbw&riu=http%3a%2f%2fpic.bizhi360.com%2fbbpic%2f89%2f8989.jpg&ehk=VyIdtYriq3lSqrO3x0MHd5IyxYaw8jZUCKZbHNtvewU%3d&risl=&pid=ImgRaw&r=0" height="300",text-align:right>
//导入了一个图片，我用的是网络路径，可以无脑复制，不会报错

<div class="cls">666</div>
<div class="cls">999</div>
//定义了两个简单的区块

<body>


<script>
//获取元素-根据id获取
var img = document.getElementById("h1");  //获取
    alert(img)  //返回值为：[object HTMLImageElement]
//获取元素-根据标签 - div-->返回值是一个数组
var divs = document.getElementsByTagName("div")  //获取
    for (let index = 0; index < divs.length; index++) {  
    alert(divs[index]);}  //输出，检验是否成功获取

//实例1：利用获得的img对应的Element对像，更改图片的src属性
var img = document.getElementById("h1");
img.src ="https://pic.rmb.bdstatic.com/bjh/914b8c0f9814b14c5fedeec7ec6615df5813.jpeg"
//实例2.将所有的div标签的内容后面加前：爱坤
var divs = document.getElementsByTagName('div')
    for (let index = 0; index < divs.length; index++) {
        const div = divs[index];  //此处是一个改名操作，可以不改，直接用divs[index]
		div.innerHTML = "爱坤"+div.innerHTML;
    }
</script>
</html>

完结，撒花，恭喜你已经初步认识了JavaScript的BOM和DOM对象

本篇内容借鉴于：黑马程序员javaweb开发教程

Author: Jie
Link: https://wsj-iwakiwjlag.github.io/2024/04/20/js%E7%9A%84BOM%E5%92%8CDOM%E5%AF%B9%E8%B1%A1/
Reprint policy: All articles in this blog are used except for special statements CC BY 4.0 reprint polocy. If reproduced, please indicate source Jie !
No tag
赏
 Previous
2024-04-20 Jie
Next 
2024-04-20 Jie
  TOC