本文探讨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的更多相关文章

  1. 【JavaScript】DOM和BOM之我的理解

    2018年12月17日 一.我们能够对html文档和浏览器做的操作 (一)html文档 增.删.改.可以在html中增加.删除.改动元素 (二)浏览器 地址栏:输入.修改地址 历史记录:前进.后退.跳 ...

  2. JAVAScript中DOM与BOM的差异分析

    JAVAScript 有三部分构成,ECMAScript,DOM和BOM,根据浏览器的不同,具体的表现形式也不尽相同.我们今天来谈一谈DOM和BOM这俩者之间的差异. 用百科上的来说: 1. DOM是 ...

  3. JavaScript组成—— DOM、BOM、ECMAScript

    ECMAScript是JS的核心:提供核心语言功能 DOM(文档对象模型):提供访问和操作网页内容的方法和接口 BOM(浏览器对象模型):提供与浏览器交互的方法和接口 1. DOM(文档对象模型) 1 ...

  4. web开发：javascript之dom与bom

    一.节点认知 二.文档结构 三.文档节点操作 四.事件target 五.BOM操作 一.节点认知 - dom与dom属性 <!DOCTYPE html> <html> < ...

  5. JavaScript 之 DOM 与 BOM

    DOM是文档对象模型,用来获取或设置文档中标签的属性,例如获取或者设置input表单的value值. 由于DOM的操作对象是文档(Document),所以dom和浏览器没有直接关系. BOM是浏览器对 ...

  6. JavaScript中DOM与BOM的区别

    1.BOM BOM全称为Brower Object Model,中文翻译为浏览器对象模型,提供了独立于内容而与浏览器窗口进行交互的对象.描述了与浏览器进行交互的方法和接口.通过BOM可以用来获取或设置 ...

  7. 【JavaScript】DOM之BOM

    BOM 1.BOM是什么 提供了独立页面内容,与浏览器相关的一系列对象,管理窗口之间通信 2.Window对象 具有双重角色,对象即是允许JS访问浏览器窗口的一个对象,和ECMAScript规范中的G ...

  8. javascript、ECMAScript、DOM、BOM关系

    ECMAScript,正式名称为 ECMA 262 和 ISO/IEC 16262,是宿主环境中脚本语言的国际 Web 标准. ECMAScript 规范定义了一种脚本语言实现应该包含的内容:但是,因 ...

  9. 理清javascript的相关概念 DOM和BOM

    javascript 有三部分构成,ECMAScript,DOM和BOM,根据宿主(浏览器)的不同,具体的表现形式也不尽相同,ie和其他的浏览器风格迥异.JavaScript=语法+BOM(含DOM) ...

随机推荐

  1. FTP服务器红帽5.4搭建图文教程！！！

    FTP服务器搭建 服务器的环境 红帽5.4 vm15 挂载光盘 mount mount -t iso9660 设备目录 /mnt 表示挂载 软件包安装 FTP服务器安装包命令: rpm -ivh /m ...

  2. 在Git的PR(Pull Request)提示冲突无法merge合并的解决方案

    问题 假设有一个分支A,向master分支提交PR,然后发生无法自动解决的冲突,PR提示不能执行merge合并. 解决方案1 本地checkout检出并切换到A分支,pull拉取更新到最新代码 在本地 ...

  3. 学会python正则表达式就是这么简单

    一前言 本篇文章带大家快速入门正则表达式的使用,正则表达式的规则不仅适用python语言,基本大多数编程语言都适用,在日常使用中极为广泛,读者们有必要学好正则表达式.看完这篇文章,读者们要理解什么是正 ...

  4. Netty快速入门（02）Java I/O（BIO）介绍

    BIO简介 Java I/O,也叫Blocking I/O,也就是阻塞式I/O. BIO的流程比较简单,在服务端创立一个ServerSocket去监听,等待连接.客户端创建一个Socket连接过来,服 ...

  5. linux修改环境变量的三种方法【转】

    [环境变量配置的三个方法] 如想将一个路径加入到$PATH中,可以像下面这样做:  1. 控制台中,不赞成使用这种方法,因为换个shell,你的设置就无效了,因此这种方法仅仅是临时使用,以后要使用的时 ...

  6. 趣谈编程史第2期-这个世界缺少对C语言的敬畏,你不了解的C语言科普

    这是我制作的编程语言科普系列视频的第二期,博客根据视频文案整理而成,提供给有需要的朋友阅读或使用. 视频地址:https://www.bilibili.com/video/av83627932/    ...

  7. 【一头扎进Spring】 01 | 从 HelloWorld 开始看Spring

    Spring 是一个开源框架. Spring 为简化企业级应用开发而生. 使用 Spring 可以使简单的 JavaBean 实现以前只有 EJB 才能实现的功能. Spring 是一个 IOC(DI ...

  8. [apue] 作为 daemon， 启动 Unix Domain Socket 侦听失败?

    前段时间写一个传递文件句柄的小 demo,有 server 端.有 client 端,之间通过 Unix Domain Socket 通讯. 在普通模式下,双方可以正常建立连接,当server端作为d ...

  9. macOS 10.11.* 安装scrapy

    1.安装brew,然后修改brew源为某高校 2.更新python brew install python 3.安装pip 4.安装scrapy,这里肯定会有一个坑,之前在网上看到10.11开启了什么 ...

  10. dp——洛谷 P1541 乌龟棋 —— by hyl天梦

    题目:(转自 https://www.luogu.com.cn/problem/P1541) 题目描述 乌龟棋的棋盘是一行NN个格子,每个格子上一个分数(非负整数).棋盘第1格是唯一的起点,第NN格是 ...