关于JavaScript的DOM和BOM
本文探讨JavaScript的三大部分中的两个部分，DOM和BOM。
DOM介绍
DOM，全称Document Object Model，即文档对象模型。它
是W３C的一个标准，定义了一个对文档操作的标准，给了编程人员
专业的操作方式。
DOM的节点：DOM的节点主要有文档节点、元素节点、文本节
点、属性节点、注释节点。开发人员可以通过节点类型来检验一个
HTML文档中还有多少某种类型的节点。
Example：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>nodeType</title>
</head>
<body>
<h1>This is a headline.</h1>
<p>This a paragraph.</p>
<a href="#"></a>
<script>
function elements(node)
{
var num=0;
if(node.nodeType==1)
{
num++;
}
var nodeson=node.childNodes;
for(var i=1;i<nodeson.length;i++)
{
num+=elements(nodeson[i]);
}
return num;
}
console.log("这里有"+elements(document)+"个HTML元素");
</script>
</body>
</html>
通过nodeType函数可以得到各种类型节点的返回值，用遍历的方
式将HTML文件的元素个数记录下来实现统计元素。
DOM访问文档元素有３种方式。
①getElementById("element");返回id属性的元素。通过给标
签增添Id属性，精确的操作指定元素。
②getElementByTagName("tag");返回指定标签元素。对该
类型的元素进行操作。
③getElementByName("name");返回name属性的元素。
DOM是一个庞大的W３C文档对象操作标准。更多的内容需要
对DOM不断的学习、实践，才能掌握。
BOM介绍
BOM是The Browser Object Model的缩写，其含义为浏览
器对象模型。JavaScript通过它来实现与浏览器之间的交互。它由多
个对象组成，其中window是代表浏览器窗口的BOM顶层对象，其
余对象为它的子对象。BOM的一大缺点是缺乏标准，但是它广泛应
用在前端开发中，大多数浏览器都支持。
BOM的对象。BOM的对象有多个，主要有window对象（包括
window、self、parent、top等），navigator对象，location对象，
history对象，document对象，screen对象。window对象：它是客
户端JavaScript的顶层对象，可以通过语句让浏览器发出弹窗；navi-
-gator对象：是操作客户端浏览器信息的对象，能够获取浏览器信息；
location对象：当前网页的URL信息，可以实现定位；history对象：
浏览器的历史访问URL；document对象：被用来访问文档内容及所有
元素；screen对象：浏览器客户端显示屏的信息。
关于JavaScript的DOM和BOM的更多相关文章
- 【JavaScript】DOM和BOM之我的理解
2018年12月17日 一.我们能够对html文档和浏览器做的操作 (一)html文档 增.删.改.可以在html中增加.删除.改动元素 (二)浏览器 地址栏:输入.修改地址 历史记录:前进.后退.跳 ...
- JAVAScript中DOM与BOM的差异分析
JAVAScript 有三部分构成,ECMAScript,DOM和BOM,根据浏览器的不同,具体的表现形式也不尽相同.我们今天来谈一谈DOM和BOM这俩者之间的差异. 用百科上的来说: 1. DOM是 ...
- JavaScript组成—— DOM、BOM、ECMAScript
ECMAScript是JS的核心:提供核心语言功能 DOM(文档对象模型):提供访问和操作网页内容的方法和接口 BOM(浏览器对象模型):提供与浏览器交互的方法和接口 1. DOM(文档对象模型) 1 ...
- web开发：javascript之dom与bom
一.节点认知 二.文档结构 三.文档节点操作 四.事件target 五.BOM操作 一.节点认知 - dom与dom属性 <!DOCTYPE html> <html> < ...
- JavaScript 之 DOM 与 BOM
DOM是文档对象模型,用来获取或设置文档中标签的属性,例如获取或者设置input表单的value值. 由于DOM的操作对象是文档(Document),所以dom和浏览器没有直接关系. BOM是浏览器对 ...
- JavaScript中DOM与BOM的区别
1.BOM BOM全称为Brower Object Model,中文翻译为浏览器对象模型,提供了独立于内容而与浏览器窗口进行交互的对象.描述了与浏览器进行交互的方法和接口.通过BOM可以用来获取或设置 ...
- 【JavaScript】DOM之BOM
BOM 1.BOM是什么 提供了独立页面内容,与浏览器相关的一系列对象,管理窗口之间通信 2.Window对象 具有双重角色,对象即是允许JS访问浏览器窗口的一个对象,和ECMAScript规范中的G ...
- javascript、ECMAScript、DOM、BOM关系
ECMAScript,正式名称为 ECMA 262 和 ISO/IEC 16262,是宿主环境中脚本语言的国际 Web 标准. ECMAScript 规范定义了一种脚本语言实现应该包含的内容:但是,因 ...
- 理清javascript的相关概念 DOM和BOM
javascript 有三部分构成,ECMAScript,DOM和BOM,根据宿主(浏览器)的不同,具体的表现形式也不尽相同,ie和其他的浏览器风格迥异.JavaScript=语法+BOM(含DOM) ...
随机推荐
- django 数据库连接出现的问题
mysqlclient 1.3.3 or newer is required; you have 0.7.11: 解决方法: 将报错文件中的如下代码注释: if version < (1, 3, ...
- 从0开发3D引擎（三）：搭建开发环境
本系列使用Reason语言,因此需要搭建它的开发环境. 上一篇博文 从0开发3D引擎(二):准备预备知识 搭建开发环境 建议使用VSCode编辑器来开发Reason,因为它的插件支持得最好. 具体搭建 ...
- Hexo + Serverless Framework，简单三步搭建你的个人博客
很多人都想拥有自己的个人博客,还得看起来漂亮.酷酷的.尤其对开发者来说,不仅可以分享技术(装)心得(逼),面试的时候还能成为加分.这里介绍两款好用的神器,不用忙前(前端)忙后(后端),简单3min即可 ...
- 【转】[ppurl]从”皮皮书屋”下载电子书的姿势
转:http://blog.csdn.net/hcbbt/article/details/42072545 写在前面的扯皮 为什么标题的”皮皮书屋”加上了引号,因为皮皮书屋(http://www.pp ...
- C# 根据链接提取div内容
安装NuGet包 HtmlAgilityPack var wc = new WebClient(); wc.Encoding = Encoding.GetEncoding("UTF-8 ...
- Java集合框架（java.util包）
集合的概念: 是一种工具类,可以存储任意数量.任意类型的对象(所以后面需要用到泛型,以约束集合中元素的类型) 集合的作用: 1.在类的内部对属性进行组织 2.方便快速定位属性位置 3.某些集合接口,提 ...
- 低功耗蓝牙（BLE）——概念
1. 种类 单模蓝牙:仅支持传统蓝牙和BLE(低功耗蓝牙)中的一种: 双模蓝牙:同时支持传统蓝牙和BLE(低功耗蓝牙). 2. 部署方案 3. 节点类型 根据蓝牙协议不同的协议层有不同的角色 1. S ...
- Android Gradle脚本从Groovy迁移到Kotlin DSL
Android Gradle从Groovy迁移到Kotlin Android项目用Gradle构建, 其脚本语言之前是Groovy, 目前也提供了Kotlin的支持, 所以可以迁移到Kotlin. 官 ...
- 18个Java8日期处理的实践，对于程序员太有用了！
18个Java8日期处理的实践,对于程序员太有用了! Java 8 推出了全新的日期时间API,在教程中我们将通过一些简单的实例来学习如何使用新API. Java处理日期.日历和时间的方式一直为社区所 ...
- 基于七牛云对象存储,搭建一个自己专属的极简Web图床应用(手摸手的注释讲解核心部分的实现原理)
一个极简的Web图床应用,支持复制粘贴与拖拽上传图片 1.开发缘由 日常使用Vs Code编写markdown笔记与博客文章时,在文章中插入图片时发现非常不便 使用本地文件编写相对路径---没法直接复 ...