JavaScript进阶：BOM DOM讲解

Dorable_Wander

已于 2022-12-09 01:00:09 修改

阅读量263

点赞数 4

分类专栏： JavaScript 文章标签： javascript 前端前端框架

于 2022-09-17 16:31:54 首次发布

本文链接：https://blog.csdn.net/XSL_HR/article/details/126906370

版权

JavaScript 专栏收录该内容

23 篇文章 20 订阅

订阅专栏

JavaScript 内容总结 BOM对象 DOM对象

本期文章接上期part3关于JavaScript内置对象的整理，主要内容为BOM和DOM对象。

6.3 浏览器对象

BOM(Browser Object Model)就是一个浏览器对象，它提供了访问、控制、修改浏览器的方法。BOM由一系列对象构成，主要包括Window、Navigator、Screen、Location、History和Document等对象。

BOM对象体系结构如下：
在这里插入图片描述

在BOM体系结构中，window对象是BOM的顶层(核心)对象。

<!DOCTYPE html>
<html>
<head>
	<title></title>
</head>
<body>
	<script type="text/javascript">
 	//.alert ( )为window对象的方法
	window.alert("欢迎光临!");  
	</script>
</body>
</html>

 顶层对象，可以直接访问其属性和方法。 下面两种写法是等价的

<!DOCTYPE html>
<html>
<head>
	<title></title>
</head>
<body>
	<script type="text/javascript">
		window.document.write("HelloWorld");
		document.write("HelloWorld") ;
	</script>
</body>
</html>

定时器：在指定的周期做某件事情

1) setInterval()方法: 每间隔指定周期性重复做某件事情。

案例：每隔1秒钟在浏览器打印一次系统当前时间。

<!DOCTYPE html>
<html>
<head>
	<title></title>
</head>
<body>
	<script type="text/javascript">
		let code = setInterval(function(){
				let dt = new Date();
				document.write(dt);
				document.write("<br/>");
		},1000);
	</script>
</body>
</html>

2)setTimeout()方法：延迟指定的间隔做某件事情。

案例：在浏览器打印一次系统当前时间。

<!DOCTYPE html>
<html>
<head>
	<title></title>
</head>
<body>
	<script type="text/javascript">
		let code = setTimeout(function(){
				let dt = new Date();
				document.write(dt);
				document.write("<br/>");
		},1000);
	</script>
</body>
</html>

小结： 前者执行多次，后者执行一次

转换类型的方法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <script>
        // string---->number
        let str = "18";
        // 将字符串转(解析)换为number(整数)
        let num = parseInt(str);
        console.log(num+"---"+ typeof num);
        let msg = "3.14";
        // 将字符串转(解析)换为number(浮点小数)
        let pi = parseFloat(msg);
        console.log(pi+"---"+ typeof pi);
    </script>
</body>
</html>

6.4 DOM对象

6.4.1 DOM的概念

在这里插入图片描述

DOM(Document Object
Model)即文档对象模型。什么是DOM？磁盘的HTML文件加载到浏览器的缓存就会生成一个DOM树，DOM提供了一种或者多种方式对HTML文档的结构进行访问。

有哪些方式可以访问DOM树？

6.4.2 根据ID获取HTML元素

案例：一个HTML文档有多个P元素(标签)，根据ID获取某一个P元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <p id="first">天若有情天亦老</p>
    <p id="second">人间正道是沧桑</p>
    <p id="third">不管风吹浪打胜似闲庭信步</p>
    <script>
        // 此时根据元素id获取DOM树对应的HTML元素，此时参数必须跟HTML元素的id属性值保持一致
        let first = document.getElementById("first");
        // [object HTMLParagraphElement]
        // 表示first变量是一个object类型，里面存储的是一个HTML的段落元素
        document.write(first);
        // 获取段落元素里面的内容
        let content = first.innerHTML;
        document.write(content);
    </script>
</body>
</html>

小结： 前提是磁盘的HTML文件成功加载到浏览器的DOM树

然后根据元素id获取DOM树对应的HTML文档元素

此时的document就表示一个DOM对象

6.4.3 根据name获取HTML元素

案例：有一组HTML元素他们的name属性都相同，此时获取一组name属性的HTML元素。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<p name="word">天若有情天亦老</p>
<p name="word">人间正道是沧桑</p>
<p name="word">不管风吹浪打胜似闲庭信步</p>
<script>
    let wordList = document.getElementsByName("word");
    // [object NodeList] wordList是一个object类型，此时存储了一个NodeList集合
    document.write(wordList+"<br/>");
    // 集合长度3
    document.write("集合长度"+wordList.length);
    // 使用for循环遍历wordList所有的元素
    for(let i=0;i<wordList.length;i++){
        // 获取集合里面的每一个HTML元素
        let element = wordList[i];
        // [object HTMLParagraphElement]
        document.write("<br/>"+element);
        // 获取每一个HTML元素的内容
        let content = element.innerHTML;
        document.write("<br/>"+content);
    }

</script>
</body>
</html>

6.4.4根据标签名称获取HTML元素

案例：定义一组HTML元素P，根据标签名称获取一组P。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!--
<p>天若有情天亦老</p>
<p class="word">人间正道是沧桑</p>
<p class="word">不管风吹浪打胜似闲庭信步</p>
-->
<script>
    // 浏览器从上到下加载HTML元素，此时会先加载<script>标签，后加载<p>标签
    // 此时所有的P还没有被浏览器加载，所以集合是空集合，长度0
    let list = document.getElementsByTagName("p");
    // [object HTMLCollection]
    document.write(list);
    document.write("<br/>长度="+list.length);
    for(let i=0;i<list.length;i++){
        let element  = list[i];
        document.write("<br/>"+elemet+"----"+element.innerHTML);
    }
</script>
<p>天若有情天亦老</p>
<p class="word">人间正道是沧桑</p>
<p class="word">不管风吹浪打胜似闲庭信步</p>
</body>
</html>

6.4.5 根据class获取HTML元素

案例：获取所有class属性为word的元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <p>天若有情天亦老</p>
    <p class="word">人间正道是沧桑</p>
    <p class="word">不管风吹浪打胜似闲庭信步</p>
    <script>
        // 根据HTML标签的class属性值获取一组HTML元素，此时参数的值必须跟HTML元素的class属性值一致
        let list = document.getElementsByClassName("word");
        // [object HTMLCollection]---object
        document.write(list+"---"+typeof list);
        // 2
        document.write("<br/>"+list.length);
        // 使用下标遍历
        for(let i=0;i<list.length;i++){
            let content = list[i].innerHTML;
            document.write("</br>"+content);
        }
    </script>
</body>
</html>