JS操作BOM和DOM 笔记分享

JS操作BOM和DOM

BOM（Browser Object Model）浏览器对象模型

DOM（Document Object Model）文档对象模型

JavaScript面向对象思想

• JS操作浏览器
• JS操作页面上的标签

1.了解BOM对象的组成和子对象的使用

1.1BOM的组成

以Java的类的形式表示：

public class Window{ // [window是BOM的顶级对象]
	// 对象属性
	private History history; // 控制浏览器历史记录
	private Location location; // 控制浏览器地址URL
	private Document document; // 控制浏览器的文档内容
}


public class Document{
	// 网页上所有的标签对象
	private Form form;
	private Button button;
	// ……  
}

BOM其实和DOM是有联系的 DOM可以不严谨的说是包含在BOM中的

1.2widow对象

我们在以前Java学习中 想要使用方法 必须要先创建对象

而现在JS帮助我们准备了一些内置对象 我们直接可以使用 但是严格来讲 还是应该用对象来调用方法

window.方法名()

window对象作为顶级对象 在使用它的属性/方法时 可以省略

常用方法：

• alert()

  弹出一个带有确定按钮的提示框 最原始的写法应该为window.alert() 简写alert()

• prompt()

  弹出一个带有输入框和确定、取消按钮的提示框

• confirm()

  弹出一个带有确定和取消按钮的提示框 使用频率较高

定时函数：

• setTimeout() 在指定时间之后执行一次操作（延时操作）例如：5秒后执行
• setInterval() 周期性执行某个操作 例如：3秒执行一次

太原生 兼容性都不太好 所以一般不会直接使用：

• close() 关闭浏览器窗口
• open() 打开浏览器窗口

1.3History对象常用方法

• back() 返回上一页
• forward() 前进到下一页
• go(数值) 正数：前进 负数：后退 数值1代表前进一个 数值2代表前进2个

1.4location对象常用方法

href属性 可以获取或设置当前的URL地址

1.5document对象

• write() 向页面输出内容

获取页面内的所有元素对象：

• getElementById()
• getElementsByName()
• getElementsByClassName()
• getElementsByTagName()

2.会使用定时函数和Date对象制作时钟特效

Date对象

• getFullYear() 年
• getMonth() 月
• getDayOfWeek() 周
• getDate() 日
• getHours() 时
• getMinutes() 分
• getSeconds() 秒

3.了解DOM的分类和节点间的关系

HTML页面内容部分在内存中所保存的文档树

DOM树

​ html

​ head body

title meta form div span p

和XML中的DOM概念一致

Java中DOM操作XML

JavaScript用DOM操作HTML

DOM的分类：

• DOM Core

  • getElementById()

  • getElementsByTagName() XML中见过

• HTML DOM

  对于HTML标签的特殊变种

  HTML是固定的标记

  例如：document.forms[0] 可以获取某个页面的第一个表单对象

• CSS DOM

  JS用于操作页面的样式

• ……

4.熟练掌握JS操作DOM节点

4.1DOM-Core

同document的几个常用方法

4.2通过层级关系来获取要操作的DOM节点

• parentNode 父节点

• childNodes 子节点集合

• firstChild 第一个子节点

• lastChild 最后一个子节点

• nextSibling 下一个兄弟节点

• previousSibling 上一个兄弟节点

• firstElementChild

• lastElementChild

• nextElementSibling

• PreviousElementSibling

4.3节点信息

对于元素节点来讲：

• nodeName：元素名

• nodeValue：null

• nodeType：1 对于文本节点来讲：

• nodeName：#text

• nodeValue：文本值

• nodeType：3 对于属性节点来讲：

• nodeName：属性名

• nodeValue：属性值

• nodeType：2 对于注释节点来讲

• nodeName：#comment

• nodeValue：注释内容

• nodeType：8

4.4操作节点

DOM的增删改查

• 操作节点的属性

  • setAttribute(属性名,属性值)

  • getAttribute(属性名)

• 创建和插入节点

  • document.createElement(‘元素名’)
  • A.appendChild(B) 将B节点追加到A的子节点列表的末尾
  • insertBefore(A,B) 将A节点添加到B节点之前 这个方法是由B节点的父节点来调用
  • cloneNode(boolean) 克隆/复制节点 如果参数为true 则同时复制节点内的子节点列表

• 删除和替换节点

  • removeChild() 删除节点 利用父节点删除
  • replaceChild(新节点,旧节点) 节点替换 利用父节点来替换

CSS-DOM：

• 操作节点样式
  • onclick 当用户点击某个对象时调用事件
  • onmouseover 鼠标移到某元素之上
  • onmouseout 鼠标从某元素上移开
  • onmousedown 鼠标按钮被按下
• 获取元素的样式

注：笔记思路来自查老师！！！