JavaScript分为 ECMAScript,BOM,DOM。

BOM:是指浏览器对象模型,使JavaScript有能力与浏览器进行对象。

DOM:是指文档对象模型,通过它,可以访问HTML文档的所有元素。

一、浏览器对象

JavaScript可以获取浏览器提供的很多对象,并并进行操作。

window

window对象不但充当全局作用域,而且表示浏览器窗口。

window对象的属性:

1. innerWidthinnerHeight属性,可以获取浏览器窗口的内部宽度和高度。内部宽高是指除去菜单栏、工具栏、边框等占位元素后,用于显示网页的净宽高。

2. outerWidthouterHeight属性,可以获取浏览器窗口的整个宽高。

window对象的方法:

window.open()  打开一个新的window窗口

window.close()  关闭当前的window窗口

navigator

navigator对象表示浏览器的信息,最常用的属性如下:

navigator.appName  浏览器名称;

navigator.appVersion  浏览器版本;

navigator.language  浏览器设置的语言;

navigator.platform  操作系统类型;

navigator.userAgent  浏览器设定的User-Agent字符串

screen

screen对象表示屏幕信息,常用的属性如下:

screen.width  屏幕宽度,以像素为单位;

screen.height  屏幕高度,以像素为单位;

screen.availWidth  可用的屏幕宽度;

screen.availHeight  可用的屏幕高度;

screen.colorDepth  返回颜色位数,如8、16、24。

history

这个对象属于历史遗留对象,对于现代Web页面来说,由于大量使用AJAX和页面交互,简单粗暴地调用history.back()可能会让用户感到非常愤怒。

新手开始设计Web页面时喜欢在登录页登录成功时调用history.back(),试图回到登录前的页面。这是一种错误的方法。

任何情况,你都不应该使用history这个对象了。

location

location对象用于获得当前页面的地址(URL),也可以把浏览器重定向到新的页面。

location.href  获取当前页面的url

location.href = "https://www.baidu.com"  页面跳转到百度

location.reload()  重新加载页面

弹出框

可以在 JavaScript 中创建三种消息框:警告框、确认框、提示框。

警告框

警告框经常用于确保用户可以得到某些信息。

当警告框出现后,用户需要点击确定按钮才能继续进行操作。

语法:alert("这是警告框")

确认框

确认框用于使用户可以验证或者接受某些信息。

当确认框出现后,用户需要点击确定或者取消按钮才能继续进行操作。

如果用户点击确认,那么返回值为 true。如果用户点击取消,那么返回值为 false。

语法:confirm("这是确认框?")

提示框

提示框经常用于提示用户在进入页面前输入某个值。

当提示框出现后,用户需要输入某个值,然后点击确认或取消按钮才能继续操纵。

如果用户点击确认,那么返回值为输入的值。如果用户点击取消,那么返回值为 null。

语法:prompt("请输入内容", "默认内容")

计时相关

通过使用JavaScript,我们可以在一段时间后再执行代码,而不是在函数在调用后立即执行

setTimeout()

语法:var t = setTimeout("JS语句或函数", 毫秒)

第一个参数可以是函数调用或普通的JS语句,第二个参数单位是毫秒,就是过了多少毫秒,执行第一个参数给定的函数或语句。

clearTimeout()

语法:clearTimeout(setTimeout_variable)

// 在指定时间之后执行一次相应函数
var timer = setTimeout(function(){alert("abc");}, 5000)
// 取消setTimeout设置
clearTimeout(timer);

setInterval()

setInterval() 方法可按照指定的周期(以毫秒计)来调用函数或计算表达式。

setInterval() 方法会不停地调用函数,直到 clearInterval() 被调用或窗口被关闭。由 setInterval() 返回的 ID 值可用作 clearInterval() 方法的参数。

语法:setInterval("JS语句", 时间间隔)

clearInterval()

clearInterval() 方法可取消由 setInterval() 设置的 timeout。

clearInterval() 方法的参数必须是由 setInterval() 返回的 ID 值。

语法:clearInterval(setinterval返回的ID值)

var timer = setInterval(function(){console.log("abc");}, 3000)
// 取消setInterval设置
clearInterval(timer);

二、 文档对象

DOM(Document Object Model)是一套对文档的内容进行抽象和概念化的方法。

由于HTML文档被浏览器解析后就是一棵DOM树,要改变HTML的结构,可以通过JavaScript操作来操作DOM。

操作DOM节点实际上就是以下几个操作:

- 更新:更新该DOM节点的内容,相当于更新了该DOM节点表示的HTML的内容;

- 遍历:遍历该DOM节点下的子节点,以便进行进一步操作;

- 添加:在该DOM节点下新增一个子节点,相当于动态增加了一个HTML节点;

- 删除:将该节点从HTML中删除,相当于删掉了该DOM节点的内容以及它包含的所有子节点。

查找

在操作一个DOM节点前,我们需要通过各种方式拿到这个节点。常用的方法有document.getElementById(),document.getElementsByTagName(),以及CSS选择器getElementsByClassName。

由于ID在HTML文档中是唯一的,所以document.getElementById()可以直接定位唯一的一个DOM节点。document.getElementsByTagName()document.getElementsByClassName()总是返回一组DOM节点。要精确地选择DOM,可以先定位父节点,再从父节点开始选择,以缩小范围。

其他间接查找方法:

- parentElement  父节点标签元素

- children  所有子标签

- firstElementChild  第一个子标签元素

- lastElementChild  最后一个子标签元素

- nextElementSibling  下一个兄弟标签元素

- previousElementSibling  上一个兄弟标签元素

<!--用于测试的HTML文件-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>DOM操作练习</title>
</head>
<body>
<div class="outer-div1">
<div class="inner-div1">
内层div内容
</div>
</div>
<div class="outer-div2">外层div内容</div>
<div class="outer-div2">
<div class="inner-div2">
<p id="inner-p1">内部段落一</p>
<p id="inner-p2">内部段落二</p>
</div>
<div class="inner-div3">
<p id="inner-p3">内部段落三</p>
</div>
</div> <a href="https://www.163.com">网易</a> </body>
</html>

更新

两种方法:1. innerHTML  2. innerText

插入

两种方法:1. appendChild  2. insertBefore

appendChild

当我们获得了某个DOM节点,想在这个DOM节点内插入新的DOM,应该如何做?

如果这个DOM节点是空的,例如,<div></div>,那么,直接使用innerHTML = '<span>child</span>'就可以修改DOM节点的内容,相当于“插入”了新的DOM节点。

如果这个DOM节点不是空的,那就不能这么做,因为innerHTML会直接替换掉原来的所有子节点。

有两个办法可以插入新的节点。一个是使用appendChild,把一个子节点添加到父节点的最后一个子节点。例如:

<!-- HTML结构 -->
<p id="js">JavaScript</p>
<div id="list">
<p id="java">Java</p>
<p id="python">Python</p>
<p id="scheme">Scheme</p>
</div>

<p id="js">JavaScript</p>添加到<div id="list">的最后一项:

var js = document.getElementById('js'),
list = document.getElementById('list');
list.appendChild(js);

操作之后,HTML文档的变化:

<!-- HTML结构 -->
<div id="list">
<p id="java">Java</p>
<p id="python">Python</p>
<p id="scheme">Scheme</p>
<p id="js">JavaScript</p>
</div>

因为我们插入的js节点已经存在于当前的文档树,因此这个节点首先会从原先的位置删除,再插入到新的位置。

insertBefore

如果我们要把子节点插入到指定的位置怎么办?可以使用parentElement.insertBefore(newElement, referenceElement);,子节点会插入到referenceElement之前。

还是以上面的HTML为例,假定我们要把Haskell插入到Python之前:

<!-- HTML结构 -->
<div id="list">
<p id="java">Java</p>
<p id="python">Python</p>
<p id="scheme">Scheme</p>
</div>

可以这么写:

var
list = document.getElementById('list'),
ref = document.getElementById('python'),
haskell = document.createElement('p');
haskell.id = 'haskell';
haskell.innerText = 'Haskell';
list.insertBefore(haskell, ref);

新的HTML结构如下:

<!-- HTML结构 -->
<div id="list">
<p id="java">Java</p>
<p id="haskell">Haskell</p>
<p id="python">Python</p>
<p id="scheme">Scheme</p>
</div>

使用insertBefore重点是要拿到一个“参考子节点”的引用。

删除

要删除一个节点,首先要获得该节点本身以及它的父节点,然后,调用父节点的removeChild把自己删掉:

// 拿到待删除节点:
var self = document.getElementById('to-be-removed');
// 拿到父节点:
var parent = self.parentElement;
// 删除:
var removed = parent.removeChild(self);
removed === self; // true

注意到删除后的节点虽然不在文档树中了,但其实它还在内存中,可以随时再次被添加到别的位置。

当你遍历一个父节点的子节点并进行删除操作时,要注意,children属性是一个只读属性,并且它在子节点变化时会实时更新。

例如,对于如下HTML结构:

<div id="parent">
<p>First</p>
<p>Second</p>
</div>

当我们用如下代码删除子节点时:

var parent = document.getElementById('parent');
parent.removeChild(parent.children[0]);
parent.removeChild(parent.children[1]); // <-- 浏览器报错

浏览器报错:parent.children[1]不是一个有效的节点。原因就在于,当<p>First</p>节点被删除后,parent.children的节点数量已经从2变为了1,索引[1]已经不存在了。

因此,删除多个节点时,要注意children属性时刻都在变化。

操作表单

用JavaScript操作表单和操作DOM是类似的,因为表单本身也是DOM树。

不过表单的输入框、下拉框等可以接收用户输入,所以用JavaScript来操作表单,可以获得用户输入的内容,或者对一个输入框设置新的内容。

HTML表单的输入控件主要有以下几种:

- 文本框,对应的<input type="text">,用于输入文本;

- 口令框,对应的<input type="password">,用于输入口令;

- 单选框,对应的<input type="radio">,用于选择一项;

- 复选框,对应的<input type="checkbox">,用于选择多项;

- 下拉框,对应的<select>,用于选择一项;

- 隐藏文本,对应的<input type="hidden">,用户不可见,但表单提交时会把隐藏文本发送到服务器。

获取值

如果我们获得了一个<input>节点的引用,就可以直接调用value获得对应的用户输入值:

// <input type="text" id="email">
var input = document.getElementById('email');
input.value; // '用户输入的值'

这种方式可以应用于textpasswordhidden以及select。但是,对于单选框和复选框,value属性返回的永远是HTML预设的值,而我们需要获得的实际是用户是否“勾上了”选项,所以应该用checked判断:

// <label><input type="radio" name="weekday" id="monday" value="1"> Monday</label>
// <label><input type="radio" name="weekday" id="tuesday" value="2"> Tuesday</label>
var mon = document.getElementById('monday');
var tue = document.getElementById('tuesday');
mon.value; // '1'
tue.value; // '2'
mon.checked; // true或者false
tue.checked; // true或者false

设置值

设置值和获取值类似,对于textpasswordhidden以及select,直接设置value就可以:

// <input type="text" id="email">
var input = document.getElementById('email');
input.value = 'test@example.com'; // 文本框的内容已更新

对于单选框和复选框,设置checkedtruefalse即可。

练习代码:

// 测试使用代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>操作表单</title>
</head>
<body>
<div>
<p>
<input type="text" name="username" id="uname">
</p>
<p>
<input type="password" name="password" id="pwd">
</p>
<p>
<input type="radio" id="r1">
</p>
<p>
<input type="checkbox" id="c1">
</p>
<p>
<select name="city" id="cid">
<option value="1">北京</option>
<option value="2">上海</option>
<option value="3">广州</option>
</select>
</p> </div>
</body>
</html>

操作截图:

以上就是关于BOM和DOM学习的记录。大部分内容摘自廖雪峰老师的JavaScript教程博客。

参考文章:

https://www.liaoxuefeng.com/wiki/001434446689867b27157e896e74d51a89c25cc8b43bdb3000/0014344997647015f03abc1bb5f46129a7526292a12ab26000

https://www.cnblogs.com/liwenzhou/p/8011504.html

前端基础-BOM和DOM学习的更多相关文章

  1. 前端基础-BOM和DOM的介绍

    阅读目录 BOM和DOM的简述 DOM详细操作 事件 一.BOM和DOM的简述 到目前为止,我们已经学过了JavaScript的一些简单的语法.但是这些简单的语法,并没有和浏览器有任何交互. 也就是我 ...

  2. 前端基础BOM和DOM

    前言 到目前为止,我们已经学过了JavaScript的一些简单的语法.但是这些简单的语法,并没有和浏览器有任何交互. 也就是我们还不能制作一些我们经常看到的网页的一些交互,我们需要继续学习BOM和DO ...

  3. 前端(4)BOM与DOM

    前端(4)BOM与DOM I/O前戏 到目前为止,我们已经学过了JavaScript的一些简单的语法.但是这些简单的语法,并没有和浏览器有任何交互. 也就是我们还不能制作一些我们经常看到的网页的一些交 ...

  4. 第四章、前端之BOM和DOM

    目录 第四章.前端之BOM和DOM 一.解释BOM和DOM 二.window对象 三.window子对象 四.弹出框 五.计时相关 六.HTML的DOM树 七.查找元素 八.节点操作 九.JS操作CS ...

  5. 04 前端之BOM与DOM

    目录 前端之BOM与DOM BOM与DOM操作 BOM操作 前端之BOM与DOM BOM与DOM操作 BOM 浏览器对象模型>>>:使用js操作浏览器 DOM 文档对象模型>& ...

  6. 前端之BOM,DOM

    前戏 到目前为止,我们已经学过了JavaScript的一些简单的语法.但是这些简单的语法,并没有和浏览器有任何交互. 也就是我们还不能制作一些我们经常看到的网页的一些交互,我们需要继续学习BOM和DO ...

  7. 前端之BOM和DOM

    BOM和DOM简介 BOM(Browser Object Model)是指浏览器对象模型,它使JavaScript有能力与浏览器进行“对话”. DOM(Document Object Model)是指 ...

  8. BOM、DOM学习笔记——JavaScript

    1.BOM的概述    browser object modal :浏览器对象模型.    浏览器对象:window对象.    Window 对象会在 <body> 或 <fram ...

  9. 前端 --- 5 BOM 和 DOM

    一.BOM BOM(Browser Object Model)是指浏览器对象模型, 它使 JavaScript 有能力与浏览器进行“对话”. 1. window 对象 一些常用的Window方法: ( ...

随机推荐

  1. Liunx学习总结(七)--系统状态查看和统计

    sar命令 sar 是一个非常强大的性能分析工具,它可以获取系统的 cpu/等待队列/磁盘IO/内存/网络等性能指标.功能多的必然结果是选项多,应用复杂,但只要知道一些常用的选项足以. 语法 sar ...

  2. 【数据库】MySQL 函数大全包含示例(涵盖了常用如时间、数字、字符串处理、数据流函数的和一些冷门的)

    ps:博客园markdown不能自动生成列表,更好的阅读体验可访问我的个人博客http://www.isspark.com/archives/mysqlFunctionDesc 数学函数(Mathem ...

  3. WebGL简易教程(三):绘制一个三角形(缓冲区对象)

    目录 1. 概述 2. 示例:绘制三角形 1) HelloTriangle.html 2) HelloTriangle.js 3) 缓冲区对象 (1) 创建缓冲区对象(gl.createBuffer( ...

  4. kafka消息分发策略分析

    当我们使用kafka向指定Topic发送消息时,如果该Topic具有多个partition,无论消费者有多少,最终都会保证一个partition内的消息只会被一个Consumer group中的一个C ...

  5. 选择排序&冒泡排序&折半查找

    //选择排序 void test2(int a[],int len){ //每次找出一个最小值,最小值依次与原数组交换位置,通过下标来完成交换,最小值下标每次都在变,变量存储 //    假如第一个是 ...

  6. EOJ 2019.2月赛 D. 进制转换

    https://acm.ecnu.edu.cn/contest/140/problem/D/ 题意 求一个区间L,R中,在K进制表示下末尾恰有m个0的数字个数. 思路 末尾有m个0,就表示的是K^m的 ...

  7. codeforces 19 D. Points(线段树+set二分)

    题目链接:http://codeforces.com/contest/19/problem/D 题意:给出3种操作:1)添加点(x,y),2)删除点(x,y),3)查询离(x,y)最近的右上方的点. ...

  8. vim命令的三种模式

    对于vim这个命令来讲是有三种模式的,分别是:正常模式,编辑模式以及命令模式.接下来就写一个demo作为演示 前期准备,先在本地准备一个文档,我这里就写了一个大家耳熟能详的例子,如下: 然后用rz命令 ...

  9. mysql之innodb-锁

    本篇主要根据innodb存储引擎的锁进行阐述,包括分类,算法,以及锁的一些问题 一.锁的概述 为了保证最大程度的利用数据库的并发访问,又要确保每个用户能以一致的方式读取和修改数据,为此锁就派上了用场, ...

  10. mysql之innodb存储引擎介绍

    一.Innodb体系架构 1.1.后台线程 后台任务主要负责刷新内存中的数据,保证缓冲池的数据是最近的数据,此外还将修改的数据刷新到文件磁盘,保证在数据库发生异常的情况下Innodb能恢复到正常的运行 ...