前端基础之BOM和DOM

最新推荐文章于 2024-03-12 10:57:55 发布

wendy587436

最新推荐文章于 2024-03-12 10:57:55 发布

阅读量412

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/weixin_42233629/article/details/83099514

版权

前端专栏收录该内容

33 篇文章 0 订阅

订阅专栏

文章目录

到目前为止，我们已经学过了JavaScript的一些简单的语法。但是这些简单的语法，并没有和浏览器有任何交互。

也就是我们还不能制作一些我们经常看到的网页的一些交互，我们需要继续学习BOM和DOM相关知识。

JavaScript分为 ECMAScript，DOM，BOM。

BOM（Browser Object Model）是指浏览器对象模型，它使 JavaScript 有能力与浏览器进行“对话”。

DOM （Document Object Model）是指文档对象模型，通过它，可以访问HTML文档的所有元素。

Window对象是客户端JavaScript最高层对象之一，由于window对象是其它大部分对象的共同祖先，在调用window对象的方法和属性时，可以省略window对象的引用。例如：window.document.write()可以简写成：document.write()。

window对象

通过id找到该id下的所有html文档

如：
原html文档内容
在这里插入图片描述
通过document.getElementById(‘s1’)可获取对应的文档内容

新建便签并添加到一个父便签中
如：
原文件如下

通过document.createElement('标签名’）和父文档.appendChild(变量名）来创建标签和添加文本和添加到父标签内。
在这里插入图片描述

在标签中增加属性

在这里插入图片描述

在便签中删除属性

如
原文件如下

在这里插入图片描述

事件

常用事件

setTimeout(绑定的事件，时间（毫秒）)
timeout：时间到了

清除事件
clearTimeout(事件id）
setInterval(事件，时间（毫秒））
Interval：间隔，每隔设定的事件就触发一次设定点的事件。

在这里插入图片描述
清除事件
clear
方法一：通过console给定的id值清除

方法二：通过赋值对象清除

绑定方式

方式一
方式二
事件示例

搜索框实例
计时器

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<input type="text" id = 'i1'>
<input type="button" id = 'start' value="开始">
<input type="button" id = 'stop' value="停止">

<script>
    function setTime() {var i1Ele = document.getElementById('i1'); var now = new Date(); i1Ele.setAttribute('value', now.toLocaleString())} setTime();

    var t;

    var startBtn = document.getElementById('start');

    startBtn.onclick = function() {if (t === undefined) {t = setInterval(setTime, 1000);}};

    var stopBtn = document.getElementById('stop'); stopBtn.onclick = function () {clearInterval(t); t = undefined;}

</script>

</body>
</html>

思路
1. 插入三个form格式的输入框，第一个显示点击开始的时间，第二个是点击按钮，第三个是停止按钮。<input type="text" id = 'i1'> <input type="button" id="start" value="开始"> <input type="button" id="stop" value="停止">

2. 定义一个在输入框中显示当前时间的函数.
    2.1 找到第一个输入框 var i1Ele = document.getElementById('i1');
    2.2 新建一个时间对象 var now = new Date();
    2.3 在标签中插入属性value和属性值  i1Ele.setAttribute('value', now.toLocaleString())}
    2.4 立即执行该函数

3. 找到开始按钮 var starBtn = document.getElementById('start')

4. 点击开始按钮时触发的事件  starBtn.onclick = function() {if (t === undefined) {t = setInterval(setTime, 1000);}}

5. 点击结束按钮时触发的事件
    5.1 找到该标签 var stopBtn = document.getElementById('stop');
    5.2 设置事件 stopBtn.onclick = function() {clearTnterval(t); t = undefined;}  //把t设置为undefined的目的是点击开始按钮时可重新赋值新的时间。

select联动
显示效果：当点击第一个选项框时，第二个选项框的值随着变化。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<select name="" id="s1"><option value="">请选择省</option></select>

<select name="" id="s2"></select>
<script>

    var date = {"广东省": ["广州市", "深圳市", "惠州"], "北京": ["朝阳区", "海淀区"], "山东": ["威海市", "烟台市"]}

    var s1Ele = document.getElementById('s1');

    var s2Ele = document.getElementById('s2');

    for (var i in date) {console.log(i); var op = document.createElement('option');op.innerText = i; s1Ele.appendChild(op);}

    s1Ele.onchange = function() {var value = s1Ele.value; var date2 = date[value];s2Ele.innerText = ''; for (var j=0;j<date2.length;j++) {var op = document.createElement('option'); op.innerText = date2[j]; s2Ele.appendChild(op)}}

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

解题思路：

解题思路：
1 先在html文档中添加两个select便签，一个是选择省份标签，一个选择市区标签。第一个标签：<select id="s1"><option>请选择省</option></select> ；第二个标签：<select id="s2"></select>

2 在script标签内定义一个自变量，需要的数据 var date = {"广东省": ["广州市", "深圳市", "惠州"], "北京": ["朝阳区", "海淀区"], "山东": ["威海市", "烟台市"]}

3 找到第一个选项的所以html文档，并赋值给一个变量 var s1Ele = document.getElementById('s1')

4 找到第二个选项的所有html文档，赋值给一个变量 var s2Ele = document.getElementById('s2')

5 当点击第一个选择框时出现的所有option添加到s1中

   5.1 循环遍历date。  for (var i in date)
   5.2 新建一个option标签,并赋值给op变量 {var op = document.createElement('option')}
   5.3 在新建的option标签中插入文本  op.innerText = i;
   5.4 把op添加到s1便签中

6 当选中某个省时，右边的选择框出现该省下的市区 s1Ele.onchange =

   6.1 获取选中的省并赋值给value。  var value = s1Ele.value；
   6.2 获取value在date中对应的值的索引值。 var date2 = date[value]
   6.3 把选项2中的值设置为空。 s2Ele.innerText = ''
   6.4 根据索引值对应的值，把每个值一一添加进第二个选项中。 for (var j=0; j < date2.length; j++) {var op = document.createElement('option'); op.innerText = date2[j]; s2Ele.appendChild(op)}