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>