码迷,mamicode.com
首页 > 其他好文 > 详细

BOM DOM 个人总结

时间:2017-11-28 21:53:21      阅读:220      评论:0      收藏:0      [点我收藏+]

标签:load()   运行   函数   识别   常用方法   obj   模型   ash   com   

BOM

BOM是什么?

BOM == Browser Object Model == 浏览器对象模型。

js运行在浏览器中,每个页面都是一个window对象,主要关注点有以下:

  1. Window对象
  2. Screen
  3. Location
  4. History
  5. Navigator
  6. 对话框

1.Window

【说明】 所有浏览器均支持,表示浏览器窗口。所有 JavaScript 全局对象、函数以及变量均自动成为 window 对象的成员。

  • 全局变量是window对象的属性
  • 全局函数是window对象的方法

为我们提供了操作浏览器的方法,比如关闭、开启页面,SPA中改变、禁用“后退”按钮。

2.Screen

【说明】 每个 Window 对象的 screen 属性都引用一个 Screen 对象。Screen 对象中存放着有关显示浏览器屏幕的信息,对于移动开发来说,通过Screen对象可获知设备的分辨率、DPI、可用尺寸等信息。

常用属性描述
height 返回显示器屏幕的高度
width 返回显示器屏幕的宽度
pixelDepth 返回显示屏幕的颜色分辨率
availHeight 可用高度(除开系统任务栏)
availWidth 可用宽度

3.Location

【说明】 Location 对象包含有关当前 URL 的信息。

常用属性描述
例子 http://example.com:1234/test/test.htm#part2
hash 设置或返回 #part2
host 设置或返回 example.com:1234
href 设置或返回 http://example.com:1234/test/test.htm#part2
protocol 当前 URL 的协议 http:
pathName 当前访问路径 /test/test.htm
方法描述
assign() 加载新的文档
reload() 重新加载当前文档
replace() 用新的文档替换当前文档

4.History

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

常用属性描述
length 返回浏览器历史列表中的 URL 数量
back() 加载浏览器历史列表中的前一个 URL
forward() 加载浏览器历史列表中的下一个 URL
go() 加载浏览器历史列表中指定URL

5.Navigator

【说明】 Navigator 对象包含有关浏览器的信息。通过该对象可了解浏览器详细信息(版本、厂商、OS、插件等),不是可信的,因为1.所有东西都可以被修改,2.浏览器会识别错误。

常用属性描述
appName 返回浏览器的名称
appVersion 返回浏览器的平台和版本信息
platform 返回运行浏览器的操作系统平台

6.对话框

  • alert() //单纯提示
  • confirm() //询问确认可返回布尔值
  • prompt() //用户可输入内容并返回

DOM

DOM是什么?

DOM == Document Object Model == 文档对象模型

每个载入浏览器的 HTML 文档都会成为 Document 对象。Document 对象使我们可以从脚本中对 HTML 页面中的所有元素进行访问,从而实现动态操作DOM。主要关注点有以下:

  1. DOM节点
  2. DOM方法
  3. DOM属性
  4. DOM查询
  5. DOM修改
  6. DOM事件
  7. DOM导航

1.DOM节点

【说明】 在 HTML DOM 中,所有事物都是节点。DOM 是被视为节点树的 HTML。

  • 整个文档是一个文档节点
  • 每个 HTML 元素是元素节点
  • HTML 元素内的文本是文本节点
  • 每个 HTML 属性是属性节点
  • 注释是注释节点

2.DOM方法

【说明】 HTML DOM 方法是我们可以在节点(HTML 元素)上执行的动作。

常用方法
  • getElementById(id) - 获取带有指定 id 的节点(元素)
  • appendChild(node) - 插入新的子节点(元素)
  • removeChild(node) - 删除子节点(元素)

3.DOM属性

【说明】 HTML DOM 属性是我们可以在节点(HTML 元素)设置和修改的值。

常用属性
  • innerHTML - 节点(元素)的文本值

  • nodeName - 节点(元素)的名称

  • nodeValue - 节点(元素)的值

  • nodeType - 节点(元素)的类型

    元素类型NodeType
    元素 1
    属性 2
    文本 3
    注释 8
    文档 9

4.DOM查询

【说明】 访问 HTML DOM = 查找 HTML 元素。

  • 通过使用 getElementById() 方法
  • 通过使用 getElementsByTagName() 方法
  • 通过使用 getElementsByClassName() 方法

5.DOM修改

【说明】 修改 HTML = 改变元素、属性、样式和事件。

  • 改变 HTML 内容
  • 改变 CSS 样式
  • 改变 HTML 属性
  • 创建新的 HTML 元素
  • 删除已有的 HTML 元素
  • 改变事件(处理程序)

6.DOM事件

【说明】 JavaScript 能够对 HTML 事件(或者说用户)做出反应。

BOM DOM 个人总结

标签:load()   运行   函数   识别   常用方法   obj   模型   ash   com   

原文地址:http://www.cnblogs.com/lonhon/p/7912031.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!