【JavaScript学习(三) BOM对象快速浏览 、操作DOM对象】

BOM对象快速浏览

BOM:浏览器对象模型(Browser Object Model)允许 JavaScript 与浏览器对话

浏览器模型不存在官方标准,现代的浏览器已经(几乎)实现了 JavaScript交互相同的方法和属性,因此它经常作为 BOM的方法和属性被提到。

关于 bom对象,里面的内容比较多比较杂。

就直接快速过一遍吧,也不建议大家初学就全部搞懂这些。

window对象

所有浏览器都支持 window 对象,它表示浏览器窗口。

所有 JavaScript全局对象、函数以及变量均自动成为 window对象的成员。

全局变量是 window对象的属性。

全局函数是 window对象的方法。

甚至 HTML DOM的 document也是 window对象的属性之一

关于window对象可以看一下上篇文章

Navigator对象

Navigator 对象包含的属性描述了正在使用的浏览器。可以使用这些属性进行平台专用的配置。

虽然这个对象的名称显而易见的是 Netscape 的 Navigator 浏览器,但其他实现了 JavaScript的浏览器也支持这个对象。

Navigator 对象的实例是唯一的,可以用 Window 对象的 navigator 属性来引用它

Navigator 对象属性

属性说明
appCodeName返回浏览器的代码名
appName返回浏览器的名称
appVersion返回浏览器的平台和版本信息
cookieEnabled返回指明浏览器中是否启用 cookie 的布尔值
platform返回运行浏览器的操作系统平台
userAgent返回由客户机发送服务器的user-agent 头部的值

Navigator 对象方法

方法描述
javaEnabled()指定是否在浏览器中启用Java
taintEnabled()规定浏览器是否启用数据污点(data tainting)

Screen对象

Screen 对象包含有关客户端显示屏幕的信息。

Screen对象的属性

属性说明
availHeight返回屏幕的高度(不包括Windows任务栏)
availWidth返回屏幕的宽度(不包括Windows任务栏)
colorDepth返回目标设备或缓冲器上的调色板的比特深度
height返回屏幕的总高度
width返回屏幕的总宽度
pixelDepth返回屏幕的颜色分辨率(每象素的位数)

Location对象

Location 对象包含有关当前 URL 的信息。

Location对象的属性

属性说明
hash返回一个URL的锚部分
host返回一个URL的主机名和端口
hostname返回URL的主机名
href返回完整的URL
pathname返回的URL路径名。
port返回一个URL服务器使用的端口号
protocol返回一个URL协议
search返回一个URL的查询部分

Location对象方法

方法描述
assign()载入一个新的文档
reload()重新载入当前文档
replace()用新的文档替换当前文档

document对象

document对象是文档的根节点,每张网页都有自己的document对象。

window.document属性就指向这个对象。

只要浏览器开始载入 HTML 文档,该对象就存在了,可以直接使用。

document对象有不同的办法可以获取。

  • 正常的网页,直接使用 document或 window.document。
  • iframe框架里面的网页,使用 iframe节点的 contentDocument属性。
  • Ajax 操作返回的文档,使用 XMLHttpRequest对象的 responseXML属性。
  • 内部节点的 ownerDocument属性。

document对象继承了 EventTarget接口和 Node接口,并且混入(mixin)了 ParentNode接口。这意味着,这些接口的方法都可以在 document对象上调用。除此之外,document对象还有很多自己的属性和方法。

关于Document对象的属性和方法非常之多,感兴趣的朋友可以移步该博客

我们只列举几个常用的属性和方法

属性说明
anchors返回文档中的所有书签锚点,通过数组下标引用每一个锚点,如:document.anchors[0] 返回第一个锚点
body代表 body 元素
cookie操作 cookie
forms返回文档中的所有表单,通过数组下标引用每一个表单,如: document.forms[0] 返回第一个表单
images返回文档中的所有图片,通过数组下标引用每一张图片,如:document.images[0] 返回第一张图片
lastModified用于获取文档最后修改的日期和时间
links返回文档中的所有链接,通过数组下标引用每一个链接,如:document.links[0] 返回 第一个链接
location用于跳转到指到的 URL
nodeType返回 document 的节点类型值
title用于设置或获取文档标题
URL返回当前文档完整的 URL
方法描述
createAttribute(节点名)创建一个属性节点
createElement(节点名)创建一个元素节点
createTextNode(节点内容)创建一个文本节点
getElementsByClassName( CSS 类名)返回文档中所有指定类名的元素集合,集合类型为 NodeList
getElementByld(id 属性值)返回拥有指定 id 的第一个对象的引用
getElementsByName(name 属性值)回文档中带有指定名称的元素集合,集合类型为 NodeList
getElementsByTagName(标签名)返回文档中带有指定标签名的兀素集合,集合类型为 NodeList
querySelectorAll(选择器名)返回文档中匹配指定 CSS 选择器的所有元素集合,集合类型为 NodeList
write(字符串)向文档与指定的字符串,包括 HTML 语句或 JavaScript 代码。早期较常用,现在主要用于代码的测试

History 对象

History 对象包含用户(在浏览器窗口中)访问过的 URL。

History 对象属性

属性说明
length返回历史列表中的网址数

History 对象方法

方法说明
back()加载 history 列表中的前一个 URL
forward()加载 history 列表中的下一个 URL
go()加载 history 列表中的某个具体页面

操作DOM对象

DOM是"Document Object Model"(文档对象模型)的首字母缩写。

DOM描绘了一个层次化的节点树,允许开发人员添加、移除和修改页面的某一部分。

以下引自该博客

DOM介绍

1.文档:DOM中的"D"

​ DOM是"Document Object Model"(文档对象模型)的首字母缩写。如果没有document,DOM也就无从谈起。当创建一个网页并把它加载到web浏览器中时,DOM就在幕后悄然而生。它将根据你编写的网页文档创建一个文档对象。

​ 在我们自己的语言中,”对象“这个词的含义往往不那么明确和具体,它几乎可以称呼任何一种客观存在的事物。但在程序设计语言中,”对象“这个词的含义非常明确和具体。

2.对象:DOM中的”O“

对象是一种独立的数据集合。与某个特定对象相关联的变量被称为这个对象的属性;可以通过某个特定对象去调用的函数被称为这个对象的方法。

Javascript语言中的对象可以分为三种类型:

  1. 用户定义对象(user-defined object):由程序员自行创建的对象。
  2. 内建对象(native object):内建的Javascript语言中的对象,如Array、Math和Date等。
  3. 宿主对象(host object):由浏览器提供的对象,比如window对象

3.模型:DOM中的“M”

​ DOM中的“M”代表着“Model”(模型),但说它代表着“Map(地图)”也是可以的。模型也好,地图也罢,它们的含义都是某种事物的表现形式。就像一个模型火车代表着一列真正的火车、一张城市街道图代表着一个世纪存在的城市那样,DOM代表着被加载到浏览器窗口里的当前网页:浏览器由我们提供了当前的地图(或者说模型),而我们可以通过JavaScript去读取这张地图。

​ 既然是地图,就必须有诸如方向、等高线和比例尺之类的记号。要想看懂和使用地图,就必须知道这个记号的含义和用途——这个道理同样适用于DOM。要想从DOM获取信息,我们必须先把各种用来表示和描述一份文档的记号弄明白。

​ DOM把一份文档表示为一棵树(这里所说的“树“是数学意义上的概念),这是我们理解和运用这一模型的关键。更具体的说,DOM把文档表示一颗家谱树。

​ 家谱树本身又是一种模型。家谱树的典型用法是表示一个人类家族的谱系关系并使用parent(父)、child(子)、sibling(兄弟)等记号来表明家族成员之间的关系。家谱树可以把一些相当复杂的关系简明表示出来:一位特定的成员既是某些成员的父辈,又是另一位成员的子辈,同时还是另一位成员的兄弟。

类似于人类家族谱系的情况,家谱树模型也非常适用用来表示一份用HTML语言编写出来的文档。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<h1>书架</h1>
<dl>
    <dt title="书籍类型">>计算机类</dt>
    <dd>&nbsp;</dd>
    <dd>《算法导论》</dd>
    <dd>《网络是如何连接的》</dd>
    <dd>&nbsp;</dd>
    <dt title="书籍类型">>文学类</dt>
    <dd>&nbsp;</dd>
    <dd>《鱼王》</dd>
    <dd>《情人》</dd>
    <dd>&nbsp;</dd>
</dl>
</body>
</html>

图为上述 html文档家谱树

由此图可以看出来该家谱树是以 html为根元素的。毫无疑问,html元素完全可以代表整个文档。

我们会发现<head><body>两个分枝。他们存在于同一个层次且互不包含,所以他们是兄弟关系。

他们有着共同的父元素<html>,但又各有各的子元素,所以它们本身又是其它一些元素的父元素。

<head>元素有两个子元素:<meta><title>(这两个元素是兄弟关系)。

<body>元素也有两个子元素:<h1><dl>(这两个元素是兄弟关系)。

如果继续深入下去,我们将发现<dl>也是一个父元素。他有两个子元素<dt><dd>(这两个元素也是兄弟关系)。

利用这种简单的家谱关系记号,我们可以把各元素之间的关系简明清晰地表达出来。

如果把各种文档元素都想象成一棵家谱树的各个节点的话,我们就可以用同样的记号来描述DOM。不过,与使用”家谱树“这个术语相比,把一份文档称为一棵 “节点树” 更准确。

节点

​ 节点(node)这个名词来自网络理论,它代表着网络中的一个连接点。网络是有节点构成的集合。

在现实世界里,一切事物都是有原子构成。原子是现实世界的节点,但原子本身还可以进一步分解为更细小的亚原子微粒。这些亚原子微粒同样是节点。

DOM也是同样的情况。文档也是有节点构成的集合,只不过此时的节点是文档树上的树枝和树叶而已。

在DOM里存在着许多不同类型的节点。就像原子包含着亚原子微粒那样,有些DOM节点还包含着其他类型的节点。


节点类型

元素节点

​ 在刚才上述的 “书架” 的文档中,像<body><h1><dl>之类的元素,我们都称之为元素节点(element node)。

如果把web上的文档比作一座楼,元素就是建造这座楼的砖块,这些元素在文档中的布局形成了文档的结构。

各种标签提供了元素的名字。标题元素的名字是 “h1”,自定义列表元素的名字是 “dl”,自定义列表项元素的名字是“dd”。

文本节点

元素只是不同节点类型中的一种。如果一份文档完全由一些空白元素构成,它将有一个结构,但这份文档本身将不会包含什么内容。

在网页中,内容决定着一切,没有内容的文档是没有任何价值的,而绝大数内容都是有文本提供

<dt title="书籍分类">计算机类</dt>由此可见,<dt>元素包含着文本内容"计算机类"。它是一个文本节点(text node)

属性节点

​ 还存在着其他的一些节点类型。例如,注释就是另外一种节点类型。但这里我们介绍的是属性节点。

元素都或多或少的有一些属性,属性的作用是对元素做出更具体的描述。

例如,几乎所有的元素都有一个title属性,而我们可以利用这个属性对包含在元素里的东西做出准确的描述:

<dt title="书籍类型">>计算机类</dt>

在DOM中,title="书籍类型"是一个属性节点(attribute node)。

如图所示,因为属性总是被放在起始标签里,所以属性节点总是被包含在元素节点当中。

并非所有的元素都包含着属性,但所有的属性都会被包含在元素里。

获得DOM节点

​ 在 CSS中,我们想为某一类元素添加样式,一般都会使用选择器来对这些元素进行选中。

在 JavaScript中,我们要获取DOM节点,使用的方式和选择器类似。

获取节点我们可以通过元素的标签名、元素的 id、元素的 class这三种方式。

对应CSS中的标签选择器、id选择器、类选择器。

'use strict'
// 通过元素标签名
document.getElementsByTagName();
// 通过元素类名
document.getElementsByClassName();
// 通过元素的 id
document.getElementById();

通过元素 Id获取节点

既然要通过 id获取节点,那对应的我们得先为某个元素添加 id才是。

<dl id="list">

如上,我们为<dl>标签添加上了id属性


DOM提供了一个叫getElementById();的方法,该方法是绑定在 document对象上的函数。

我们可以通过document.getElementById();的方式直接调用该函数

该函数需要传入一个字符串参数,我们可以将元素 id的值传入。

document.getElementById('list');

该函数执行后,会返回当前DOM下 id值的 HTML元素对象。

如果该元素下还有子元素 我们可以将其展开,查看该元素下的所有子元素。

这种获取节点的方式是最常被使用的,也不难 基本上看一眼就能明白。

通过元素标签名获取节点

除了使用元素的 id,我们还可以通过标签名来获取节点。

DOM提供了一个叫getElementByTagName();的方法,该方法也是绑定在 document对象上的函数。

我们可以通过document.getElementByTagName();的方式直接调用该函数

该函数需要传入一个字符串类型的参数,我们可以将我们的标签名传入

document.getElementsByTagName('dd')

该函数执行后,会返回当前DOM下 标签名为 ‘dd’ 的 HTML元素对象,并且会将这些对象以数组的形式封装起来。

既然是数组,那我们就能将其遍历,遍历后的结果自然是一个一个的元素对象。

'use strict'
for (var dd of document.getElementsByTagName('dd')) {
    console.log(dd);
};

通过元素 class获取节点

除了上述两种方式,我们还可以通过元素的 类名来获取节点。

DOM提供了一个叫getElementByClassName();的方法,该方法也是绑定在 document对象上的函数。

我们可以通过getElementsByClassName();的方式直接调用该函数

该函数需要传入一个字符串类型的参数,我们可以将我们的类名传入。


在使用元素标签名获取节点示例中,我们通过传入 dd标签名 拿到了所有的标签名为 dd的元素对象。

但此时如果我们想要拿到所有计算机相关书籍的 dd元素对象,通过标签名的方式就不适用了。 id的全局唯一特性自然也不适用,

作为补充 通过类名的方式就十分适合。

<dl id="list">
    <dt title="书籍类型">>计算机类</dt>
    <dd>&nbsp;</dd>
    <dd class="cs">《算法导论》</dd>
    <dd class="cs">《网络是如何连接的》</dd>
    <dd>&nbsp;</dd>
    <dt title="书籍类型">>文学类</dt>
    <dd>&nbsp;</dd>
    <dd>《鱼王》</dd>
    <dd>《情人》</dd>
    <dd>&nbsp;</dd>
</dl>

如上,我们为计算机相关的 dd元素添加了 class属性,class 的值为 ‘cs’ 。

那我们可以直接将 ‘cs’ ,作为参数传入到document.getElementsByClassName();函数中

该函数执行后,会返回当前DOM下 类名为 ‘cs’ 的 HTML元素对象,并且会将这些对象以数组的形式封装起来。

既然是数组,相信不用我重复应该也知道能如何、该如何了吧。

获取父元素下的子节点

在上面通过 id获取节点的示例中,我们通过直接查询父元素节点 再展开的方式,也能够拿到父元素下的所有子节点。

但这种方式是不规范的

除了这种方式,我们还可以使用 children属性拿到父元素下的所有子元素。

var list = document.getElementById('list');
list.children();

返回的元素对象也是以数组形式封装,不多赘述。


更新DOM节点

​ 上面我们有说到几种获取节点的方式,那么接下来看看如何更新节点中的内容。

一般情况下,我们获取节点后能够通过 JavaScript做到大部分的 html、css的操作。

比如说为空标签元素,添加文本内容

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/hello.js"></script>
</head>
<body>
<div id="all">
    
</div>
</body>
</html>

如上,我们新建了一个html文件,在其中添加了空的 div标签。

这种空 div标签,在网页上的效果应该是什么都没有。

我们在控制台中尝试为该空 div标签添加文本内容。

使用 innerText属性成功为空 div标签添加文本内容

除了为空标签添加文本内容,我们还可以为其添加 css样式。

需要注意的是,在 CSS中原本以中划线分隔的属性,在 JavaScript中都以驼峰命名的形式书写。

font-size = 100px; // CSS写法
fontSize = '100px'; // js写法

获取节点后大部分你能想到的 HTML、CSS操作使用 JavaScript都能实现。感兴趣可以自己尝试

删除DOM节点

删除节点的方式也比较多,但一般我们会通过拿到父节点,使用 removeChild();函数来删除对应的子节点。

而不是直接指定节点进行删除。

<div id="all">
<p id="child1">我是P标签</p>
<a id="child2">我是A标签</a>
</div>

如上,我们在 div标签中定义了两个子标签,且为其分别添加了 id属性。

有了id属性后,我们就能够拿到具体需要移除的元素了。

在控制台中尝试删除 div标签中的 p标签

除了使用 document.getElement之类的方法拿到父元素,我们还可以直接通过子元素拿到其对应的父元素。

除了上述两种方式,我们还可以通过子元素在父元素中的下标 来移除指定的子元素。

添加DOM节点

​ 在更新DOM节点示例中,我们有通过 innerText属性为空标签添加文本内容,这也算添加节点的一种。

但这是在空标签的情况下,如果标签中存在内容 我们这么操作会存在一个覆盖的情况。


了解完 innerText后,我们来聊一聊应该如何添加DOM节点

添加节点一般分两种,一种是在原有节点的基础上,将另一个节点元素插入进来。另一种则是凭空创建,不借助任何现有节点。

首先看一下如何将一个节点插入到另一个节点中

<body>
<p>我是 div标签外的P标签</p>
<div id="all">
<p id="child1">我是 P标签</p>
<a id="child2">我是 A标签</a>
</div>
</body>

如上,我们在 div标签外 又写了一个 p标签。现在我们要做的是将该 p标签插入到 div标签内。

执行完appendChild();函数后,我们再检查原本的 html代码就会发现:本应在 div标签外的 p标签,已经作为子元素被插入到 div标签内了。

这种插入方式默认会将选中的标签插入到最后面,但有时候我们想让该标签插入到指定的位置。

想让选中的标签插入到指定的位置,我们可以使用 insertBefore();方法来实现。

**insertBefore方法可以在已有节点前插入一个新的节点,该方法需要传入两个参数。两个参数分别为指定标签、和插入位置(也就是插入到哪个节点前) **

如上,我们在用 div标签调用了insertBefore();方法,传入的参数为 p标签和 a标签。

实现了将 div标签外的 p标签,插入到 div标签内 a标签前面的操作。

除了以上两种在原有节点基础上进行节点插入的操作,我们还可以凭空创建一个新的节点。

使用 createElement();方法能够让我们在DOM中创建一个新的元素节点,该方法返回一个Element对象。

createElement();需要传入一个参数,该参数为创建节点元素的类型,比如是 ‘a’(也就是 a标签)。

尝试使用

当然了,我们这样创建的标签是没有属性的。为标签添加属性,我们可以使用其标签对应的属性直接赋值。

除了这种方式,我们还可以通过 setAttribute();方法来为其添加属性。

该方法需要传入两个参数,两个参数分别为 属性的 key和 value,都以字符串的形式传入。


放松一下眼睛

夹带私货(不是

原图P站地址

画师主页


已标记关键词 清除标记
©️2020 CSDN 皮肤主题: 游动-白 设计师:上身试试 返回首页