首页 > 博客列表 > BOM对象与dom结构

博主信息

博文 3

粉丝 0

访问量 4300

专题推荐

更多>

一、BOM对象

BOM对象（browser Object Model，浏览器对象模型以 window 对象为依托，表示浏览器窗口以及页面可见区域。同时， window对象还是 ECMAScript 中的 Global 对象，因而所有全局变量和函数都是它的属性，且所有原生的构造函数及其他函数也都存在于它的命名空间下。

BOM主要包括：window对象、document对象、location对象、navigator对象。还有两个对象： screen 和 history ，但它们的功能有限。 screen 对象中保存着与客户端显示器有关的信息，这些信息一般只用于站点分析。 history 对象为访问浏览器的历史记录开了一个小缝隙，开发人员可以据此判断历史记录的数量，也可以在历史记录中向后或向前导航到任意页面。

window对象：

弹框类的方法。前面省略window
alert(‘提示信息’)
confirm(“确认信息”)
prompt(“弹出输入框”)
open(“url地址”，“_black或_self”，“新窗口的大小”）
close() 关闭当前的网页

定时器，清除定时器
setTimeout(函数，时间) 只执行一次
setInterval(函数，时间) 无限执行
clearTimeout(定时器名称) 清除定时器

location对象：

location.herf = ‘url地址’
hash 返回#号后面的字符串，不包含散列，则返回空字符串。
host 返回服务器名称和端口号
pathname 返回目录和文件名。 /project/test.html
search 返回？号后面的所有值。
port 返回URL中的指定的端口号，如URL中不包含端口号返回空字符串
portocol 返回页面使用的协议。 http:或https:

Navigator对象：

查看浏览器的版本所有信息的对象。

screen对象：

每个 Window 对象的 screen 属性都引用一个 Screen 对象。Screen 对象中存放着有关显示浏览器屏幕的信息。JavaScript 程序将利用这些信息来优化它们的输出，以达到用户的显示要求

属性	描述
availHeight	返回显示屏幕的高度 (除 Windows 任务栏之外)。
availWidth	返回显示屏幕的宽度 (除 Windows 任务栏之外)。
bufferDepth	设置或返回调色板的比特深度。
colorDepth	返回目标设备或缓冲器上的调色板的比特深度。
deviceXDPI	返回显示屏幕的每英寸水平点数。
deviceYDPI	返回显示屏幕的每英寸垂直点数。
fontSmoothingEnabled	返回用户是否在显示控制面板中启用了字体平滑。
height	返回显示屏幕的高度。
logicalXDPI	返回显示屏幕每英寸的水平方向的常规点数。
logicalYDPI	返回显示屏幕每英寸的垂直方向的常规点数。
pixelDepth	返回显示屏幕的颜色分辨率（比特每像素）。
updateInterval	设置或返回屏幕的刷新率。
width	返回显示器屏幕的宽度。

。

history对象：

方法	描述
back()	返回上一页。
forward()	返回下一页。
go(“参数”)	-1表示上一页，1表示下一页。

二、dom结构：

<!DOCTYPE html>声明文档类型
<html lang="zh-CN">用于声明代码编译语言
<head>头部标签，用来定义文档的页眉
  <meta charset="utf-8">采用utf-8字符集
  <title></title>文档标题
  <meta name="keywords" content="">关键词，基本用不上了
  <meta name="description" content="">文档描述
  <meta name="renderer" content="webkit">优先以webkit内核渲染
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">针对IE8以下浏览器不识别情况，指定兼容模式
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">设置视图窗口
  <style>//内部层叠样式表
  </style>
</head>
<body>
</body>
<script>//js代码段
</script>
</html>

元素的三大通用属性

id: 获取页面中的唯一元素节点
class: 获取页面中的一类元素节点
style: 设置某个元素的内联样式

js 获取元素方法：

document.getElementById（）;
document.getElementsByClassName();
document.getElementsByTagName();
document.querySeletor();
document.querySelectorAll();

层级样式权重规则

1、当选择器相同的情况下，引入方式的决定最终的显示样式，内联样式>内部样式>外部样式表。
2、引入方式相同时候，则是按照权重取最大(取权重最大值显示)去确定最后样式：

选择器	权重
id	100
类	10
元素	1
继承	0.5

3、引入方式和选择器相同，样式的先后顺序决定显示样式，后者覆盖前者。
4、!important 样式提升样式权重

批改老师：

WJ

批改状态：合格

老师批语：自己扩展了一些内容，这很好！

本博文版权归博主所有，转载请注明地址！如有侵权、违法，请联系admin@php.cn举报处理！

全部评论文明上网理性发言，请遵守新闻评论服务协议

0条评论

作者最新博文

vscode编辑器下载安装与常用插件，集成环境phpstudy下载安装、markdown基本语法、web开发术语

2020-06-11 18:41:23