BOM和DOM

BOM 浏览器对象模型

BOM中的对象

  Window对象:是指窗口对象,可通过Window对象的属性和方法控制窗口,例如打开或关闭一个窗口

  History对象:指历史页面,通过History对象的属性和方法实现前进后退的功能

  Location对象:指地址栏,通过属性的方法控制页面的跳转

  Document对象:指网页中的内容,通过属性和方法控制页面元素

1、Window对象的常用方法:

  open();  close();  alert();  prompt();  confim();  setTimeout();  setTimeout();  setInterval();  clearInterval();

2、History对象常用方法:

  window.history.back();页面进行后退;

  window.history.forward();页面前进;

  window.history.go(n); n如果是正数则代表前进n个页面,n如果是负数则代表后退n个页面,一般常用这一种。

3、Location对象常用方法:

  var s = window.location.href;获取当前页面的地址

  window.location.href="http://www.baidu.com";修改页面地址,会跳转页面

  window.location.hostname: 主机名,域名,网站名,可用变量接收

  window.location.pathname: 路径名,可用变量接收

4、Document对象常用方法:(重点)

    document.getElementById("id");根据id找,最多找到一个;

    document.getElementsByName("name");根据name找,返回数组

    document.getElementsByTagName("name");根据标签名找,例如<input>...返回数组

    write();打印内容

  4.1、常用操作:

      var a =document.getElementById("id");

     alert(a.innerText);只取里面的内容

     alert(a.outerHTML);包括标签本身的内容(简单了解)

     设置内容:a.innerHTML = "<font color=red >hello world </font>";

  4.2、操作属性      

     a.setAttribute("属性名","属性值"); 设置一个属性,添加或更改都可以;

     a.getAttribute("属性名");获取属性的值;

     a.removeAttribute("属性名");移除一个属性。

  4.3、操作样式

     document.body.style.backgroundColor="颜色"; 整个窗口的背景色

     a.className="样式表中的classname"

  4.4、相关元素操作

      var a = document.getElementById("id");找到a;

      var b = a.nextSibling,找a的下一个同辈元素,注意包含空格;

      var b = a.previousSibling,找a的上一个同辈元素,注意包含空格;

      var b = a.parentNode,找a的上一级父级元素;

      var b = a.childNodes,找出来的是数组,找a的下一级子元素;

      var b = a.firstChild,第一个子元素,lastChild最后一个,childNodes[n]找第几个;

      alert(nodes[i] instanceof Text); 判断是不是文本,是返回true,不是返回flase,用if判断它的值是不是false,可以去除空格。

  4.5、元素的创建、添加、删除

      var a = document.getElementById("id");找到a;

      var obj = document.createElement("标签名");创建一个元素

      obj.innerHTML = "hello world";添加的时候首先需要创建出一个元素。

      a.appendChild(obj);向a中添加一个子元素。

      a.removeChild(obj);删除一个子元素。

      列表中a.selectedIndex:选中的是第几个;

  4.6、字符串操作

      var s = new String(); 或var s ="aaaa";

      var s = "hello world";

      alert(s.toLowerCase());转小写 toUpperCase() 转大写

      alert(s.substring(3,8));从第三个位置截取到第八个位置

      alert(s.substr(3,8));从第三个位置开始截取,截取八个字符长度,不写后面的数字是截到最后.

      s.split(‘‘);将字符换按照指定的字符拆开,放入数组,自动排序

      s.length是属性

      s.indexOf("world");world在字符串中第一次出现的位置,没有返回-1

      s.lastIndexOf("o");o在字符串中最后一次出现的位置

  4.7、日期时间的操作

      var d = new Date();当前时间

      d.setFullYear(2015,11,6);/*在想要设置的月份上减1设置*/

      d.getFullYear:取年份;

      d.getMonth():取月份,取出来的少1;

      d.getDate():取天;

      d.getDay():取星期几

      d.getHours():取小时;

      d.getMinutes():取分钟;d.getSeconds():取秒

      d.setFullYear():设置年份,设置月份的时候注意-1。

  4.8、数学函数的操作

      Math.ceil();大于当前小数的最小整数

      Math.floor();小鱼当前小数的最大整数

      Math.sqrt();开平方

      Math.round();四舍五入

      Math.random();随机数,0-1之间

 

DOM 文档对象模型

  DOM是针对XML的基于树的API。描述了处理网页内容的方法和接口,是HTML和XML的API,DOM把整个页面规划成由节点层级构成的文档。

  DOM本身是与语言无关的API,它并不与Java,JavaScript或其他语言绑定。

特定语言的DOM

   针对XHTML和HTML的DOM。这个DOM定义了一个HTMLDocument和HTMLElement做为这种实现的基础。其他的包括SVG的DOM

时间: 2024-08-05 23:40:59

BOM和DOM的相关文章

JS中的函数、Bom、DOM及JS事件

本期博主给大家带来JS的函数.Bom.DOM操作,以及JS各种常用的数据类型的相关知识,同时,这也是JavaScript极其重要的部分,博主将详细介绍各种属性的用法和方法. 一.JS中的函数 [函数的声明及调用] 1.函数声明的格式: function 函数名(参数1,参数2,参数3,--){//函数体 return 结果; } >>>函数的调用格式: 直接调用:函数调用的格式:函数名(参数一的值,参数二的值,--): 事件调用:事件名=函数名( ); 2.函数声明的几点强调: ①函数名

[转] JavaScript学习:BOM和DOM的区别和关联

BOM 1.  BOM是Browser Object Model的缩写,即浏览器对象模型. 2.  BOM没有相关标准. 3.  BOM的最根本对象是window. 从1可以看出来:BOM和浏览器关系密切.浏览器的很多东西可以通过JavaScript控制的,例如打开新窗口.打开新选项卡(标签页).关闭页面,把网页设为主页,或加入收藏夹,等等…这些涉及到的对象就是BOM. 从2可以看出来:由于没有标准,不同的浏览器实现同一功能,可以需要不同的实现方式.对于上面说的功能,不同的浏览器的实现功能所需要

JavaScript学习总结(三)BOM和DOM详解

转自:http://segmentfault.com/a/1190000000654274 DOM介绍 D(文档)可以理解为整个Web加载的网页文档,O(对象)可以理解为类似window对象只来的东西,可以调用属性和方法,这里我们说的是document对象,M(模型)可以理解为网页文档的树形结构,DOM树由节点构成 节点种类:元素节点.文本节点和属性节点 DOM(文档对象模型)是 HTML 和 XML 的应用程序接口(API).DOM代表着被加载到浏览器窗口里的当前网页:浏览器向我们提供了当前网

JavaScript(核心、BOM、DOM)

http://www.flyne.org/article/407 JavaScript(核心.BOM.DOM) JavaScript是基于对象和事件驱动的客户端脚本语言.有如下特点: 交互性 安全性(不可以直接访问本地硬盘) 跨平台性(只要是可以解析js的浏览器都可以执行,和平台无关) 1.JavaScript和Java不同! ①所属:NetScape和Sun ②基于对象和面向对象 ③JS可以直接解析执行,Java需先编译在运行 ④JavaScript是一种弱类型的语言,Java是强类型的语言.

javascript学习大总结(四)BOM和DOM详解

我们都知道, javascript 有三部分构成,ECMAScript,DOM和BOM,根据宿主(浏览器)的不同,具体的表现形式也不尽相同,ie和其他的浏览器风格迥异. 1 DOM 是 W3C 的标准: [所有浏览器公共遵守的标准]2 BOM 是 各个浏览器厂商根据 DOM 在各自浏览器上的实现: [表现为不同浏览器定义有差别,实现方式不同]3 window 是 BOM 对象,而非 js 对象: BOM 主要处理浏览器窗口和框架,不过通常浏览器特定的 JavaScript 扩展都被看做 BOM

从零开始的JS生活(二)——BOM、DOM与JS中的事件

上回书说道,JS中变量.运算符.分支结构.循环和嵌套循环等内容.本回就由本K给大伙唠唠JS中的BOM.DOM和事件. 一."花心大萝卜"--BOM 1.震惊,FFF团为何对BOM举起了火把--BOM简介 BOM(Browser Object Model) 是指浏览器对象模型,在JS中BOM是个不折不扣的花心大萝卜,因为它有很多个对象,其中代表浏览器窗口的Window对象是BOM的"正室".也就是最重要的,其他对象都是正室的下手.或者叫侧室也不足为过. 2.细数BOM

实现JavaScript的组成----BOM和DOM

我们知道,一个完整的JavaScript的实现,需要由三部分组成:ECMAScript(核心),BOM(浏览器对象模型),DOM(文档对象模型). 今天主要学习BOM和DOM. BOM: BOM提供了很多对象,用来访问浏览器的功能,这些功能于网页内容无关(这些是DOM的事),目前,BOM已经被W3C搬入了HTML5规范中. window对象: BOM的core,表示浏览器的一个实例,它既是通过javascript访问浏览器窗口的一个接口,又是ECMAScript规定的Global对象,这意味着在

BOM和DOM的区别和关联

BOM 1. BOM是Browser Object Model的缩写,即浏览器对象模型. 2. BOM没有相关标准. 3. BOM的最根本对象是window. 从1可以看出来:BOM和浏览器关系密切.浏览器的很多东西可以通过JavaScript控制的,例如打开新窗口.打开新选项卡(标签页).关闭页面,把网页设为主页,或加入收藏夹,等等…这些涉及到的对象就是BOM. 从2可以看出来:由于没有标准,不同的浏览器实现同一功能,可以需要不同的实现方式.对于上面说的功能,不同的浏览器的实现功能所需要的Ja

【JavaScript】BOM和DOM

在第一篇JavaScript视频总结博客中,是对JavaScript做了一个宏观的认识.其中,不知道大家可否还记得,JavaScript的核心部分包括哪些? JavaScript的核心部分主要包括三个: 1.ECMAScript,如果想更多了解它,不妨看看百度. 2.BOM(Browser Object Model)(浏览器对象模型) 3.DOM(Document Object Model )(文本对象模型) 本篇博客主要是对后面两个核心部分做个简单总结,两者看起来相似,其实有着完全不一样的作用

JavaScript的组成——ECMAScript、BOM和DOM

JavaScript由三部分组成:ECMAScript.BOM以及DOM 1.核心--ECMAScript:提供核心语言功能 2.文档对象模型--DOM:提供访问和操作网页内容的方法和接口 针对XML但经过扩展用于HTML的应用程序编程接口(API). DOM把页面映射成一个多层节点结构. 为什么使用DOM?Netscape和微软在开发DHTML方面各持己见,为避免两强割据,浏览器互不兼容的局面,保持Web跨平台的天性,DOM应运而生. DOM1级:由DOM Core和DOM HTML两部分组成