JavaScript进阶：BOM DOM讲解

JavaScript 内容总结 BOM对象 DOM对象

6.3 浏览器对象
6.4 DOM对象
- 6.4.1 DOM的概念
- 6.4.2 根据ID获取HTML元素
- 6.4.3 根据name获取HTML元素
- 6.4.4根据标签名称获取HTML元素
- 6.4.5 根据class获取HTML元素

本期文章接上期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---->numberlet 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/>");// 集合长度3document.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还没有被浏览器加载，所以集合是空集合，长度0let 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]---objectdocument.write(list+"---"+typeof list);// 2document.write("<br/>"+list.length);// 使用下标遍历for(let i=0;i<list.length;i++){let content = list[i].innerHTML;document.write("</br>"+content);}</script>
</body>
</html>

JavaScript进阶：BOM DOM讲解相关推荐

javascript （BOM DOM）
BOM对象 window对象所有浏览器都支持 window 对象.概念上讲.一个html文档对应一个window对象.功能上讲: 控制浏览器窗口的.使用上讲: window对象不需要创建对象,直接使 ...
二、JavaScript语言--JS基础--JavaScript进阶篇--DOM对象控制HTML元素
1.认识DOM 文档对象模型DOM(Document Object Model)定义访问和处理HTML文档的标准方法.DOM 将HTML文档呈现为带有元素.属性和文本的树结构(节点树). 先来看看下面 ...
JavaScript之 Bom+Dom
1:BOM概念 BOM:Browser Object Model. window对象是BOM中所有对象的核心. 2:window对象属性 self:self代表自己,相当于window. par ...
JavaScript进阶(4)-dom查询
通过document对象调用 1.getElementById() 通过id属性获取一个元素节点对象 2.getElementsByTagName() 通过标签名获取一组元素节点对象 3.getEle ...
【前端开发—JavaScript】——BOM/DOM
Bom Browser Object Model 浏览器对象模型浏览器对象模型: 浏览器提供的一系列可以操作浏览器API BOM中的顶级对象 window (全局中的window) + 使用BO ...
JavaScript进阶(四)
JavaScript进阶(四) 2019版黑马程序员javaScript进阶面向对象ES6 122集教程,哔哩哔哩链接:https://www.bilibili.com/video/BV1Kt411w ...
JavaScript进阶(二)
JavaScript进阶(二) 2019版黑马程序员javaScript进阶面向对象ES6 122集教程,哔哩哔哩链接:https://www.bilibili.com/video/BV1Kt411w ...
JavaScript进阶(三)
JavaScript进阶(三) 2019版黑马程序员javaScript进阶面向对象ES6 122集教程,哔哩哔哩链接:https://www.bilibili.com/video/BV1Kt411w ...
JavaScript进阶(一)
JavaScript进阶(一) 2019版黑马程序员javaScript进阶面向对象ES6 122集教程,哔哩哔哩链接:https://www.bilibili.com/video/BV1Kt411w ...