BOM DOM

最新推荐文章于 2024-07-20 16:59:43 发布

疯人院疯疯疯

最新推荐文章于 2024-07-20 16:59:43 发布

阅读量119

点赞数

分类专栏： web 文章标签： web

web 专栏收录该内容

14 篇文章 0 订阅

订阅专栏

BOM browser Object Model,浏览器对象模型
BOM主要提供了访问和操作浏览器各组件的方式
浏览器组件：

window（浏览器窗口）
location（地址栏）
history（浏览历史）
screen（浏览器屏幕）
navigator（浏览器软件）
document（网页）

DOM主要提供访问和操作HTML标记的方式

html标记
- 图片
- 表格
- 表单
- body、html标记
- …

DOM和DOM不是JS的内容，他们是W3C指定的规范。.
window浏览器窗口对象是js中最大的对象，其它所有的对象，都是window的子对象

在这里插入图片描述
各对象之间是有层级关系的，name各对象之间如何访问呢？
window.document.write(“OK”)
window.document.boby.bgColor="#A12300" ;
*window对象是所有其他对象的最顶层对象，因此，可以省略
document.write(“ok”);
document.body.bgColor="#12300";
window.alert("")–> alert(“ok”);
window.prompt(“请输入一个分数”)—>prompt(“请输入一个分数”)；
window对象属性
name指定浏览器的名字或窗口的名字。这个名字是给标记的target属性来用的,可以设置窗口的名字：window.name=“newWin”；
获取读取窗口的名字：document.write(name);
top代表最顶层窗口如：window.top;
parent代表父级窗口主要用于框架
self代表单签窗口，主要用于框架中
innerWidth指浏览器窗口的内宽（不含菜单栏、工具栏、地址栏、状态栏），该属性firefox支持
- 在ie下使用document.documentElement.clientWidth来代表window.innerWidth
innerHeight指浏览器窗口的内高（不含菜单栏、工具栏、地址栏、状态栏），该属性firefox支持
-在ie下使用document.documentElement.clientHeight来代表window.innerHeight
document.documentElementht 就是<html》标记对象
document.body就是body标记对象

window对象方法

alert():弹出一个警告对话框
prompt（）；弹出一个输入对话框
confirm（）弹出一个确认对话框，如果单击“确定”按钮返回真，单击“取消”按钮返回假
close() 关闭窗口
print()打印窗口
open()打开一个新的浏览器窗口语法 var winObj=window.open(url,name,options);
在这里插入图片描述

onload时间：当网页我加载完成，值<body>标记的所有内容全部加载完成，才出发该时间（条件）。通过onload事件属性，去调用JS的函数，onload属性只有标记才有

winObj.setTimeout(“window.close()”,10000);
winObj是window的变量，可以控制打开网页（open）的变量

延时器方法-setTimeout()
功能：设置一个延时器。换句话说，时间一到，就执行js代码一次
语法：var timer =window.setTimeout(code，millisec)；
参数：
code：是任何合法的JS代码，一般情况下是JS函数。该函数要放在引号中。
举例：window.setTimeout(“close()”,2000)
举例：window.setTimeout(init,2000)
millisec:毫秒值
返回值：返回一个延时器的id变量，这个id变量给clearTimeout用来清楚

window.οnlοad=init是将函数的地址传给了事件，而不是将函数的执行结果传给事件。有名函数或普通函数，作为地址引用，不能带括号。

clearTimeout()

清楚延时器id变量
语法： window.clearTimeout(timer);
参数：timer就是有setTimeout（）设置的延时器的ID变量。

定时器方法
**setInterval()**设置一个定时器，定时器，重复不断的执行JS代码(周期性)
var timer =window.setInterval(code，millisec)
code：是任何合法的JS代码，一般情况下是JS函数。该函数要放在引号中。
举例：window.setInterval(“init()”,2000)
举例：window.setInterval(init,2000)
millisec:毫秒值
返回值：返回一个定时器的id变量，这个id变量给clearInterval()用来清楚

clearInterval()

清楚定时器id变量
语法： window.clearInterval(timer);
参数：timer就是有setInterval（）设置的定时器的ID变量。

对节点的属性操作

setAttribute(name,value);给某个节点添加一个属性
getAttribute(name); 获得某个节点的值
removeAttribute（name）;删除某个节点的属性

节点的创建

document.createElement(tagName); 创建一个指定的HTML标记
parentNode.appendChild(childNode); 将创建的节点，追加到某个父节点下
parentNode 代表父节点
childNode是创建的一个子节点
parentNode.removeChild(childNode); 删除子节点
childNode代表要删除的子节点

this 系统关键字参数
在函数内使用，代表当前对象

HTML DOM的简介和新特性

HTML DOM访问HTML元素的方法
简介：核心DOM中，提供的属性和方法，已经可以操作网页了，为什么还有Html DOM呢？
如果在核心DOM中，网页中节点层级很深时，访问这个节点时将十分麻烦。
那么HTMLDOM中提供了通过ID直接找节点的方法，而不再用HTML根节点开始
HTML DIM 访问 HTML元素的方法(最常用)
getElementById() 访问网页中指定ID的元素对象
getElenmentsByTagName(tagName)查找指定的HTML标记，返回一个数组。
语法： var arrObj = parentNode.getElementsByTagName(tagName);
tagName是要查找的标记名称，不带尖括号。

元素对象的属性和方法：

tagName 标签名称，与核心dom中的nodeName一样
className css类的样式
id 同html标记的id属性一样
title 同html标记的title属性一样
style 同html标记的style属性一样
innerHTML nodeValue的值只能是纯文本，不能含有任何HTML标记和css //innerHTML包含HTML标记中所有的内容，包括HTML标记等。
offsetWidth 元素对象的可见宽度不带px单位
offsetHeight 元素对象的可见高度不带px单位
scrollWidth 元素对象的总宽度不包括滚动条的内容，不带px单位
scrollHeight 元素对象的总高度不包括滚动条的内容，不带px单位
scrollTop 指内容向上滚动上去了多少距离（有滚动条才有效），不带px单位
scrollLeft 值内容向左滚动过去了多少距离，（有滚动条才有效）不带px单位

onscroll:当拖动滚动条时，调用JS函数。