JavaScript之BOM+DOM

时间:2021-03-29 19:27:03

DOM:是研究HTML代码内部的

控制HTML文档内容,以页面标签(元素)为对象

JavaScript之BOM+DOM

事件:对元素进行某些动作后会触发代码实现功能的一种属性

JavaScript之BOM+DOM

效果:

JavaScript之BOM+DOM

点击图片后

JavaScript之BOM+DOM

BOM:是研究浏览器这个程序的

浏览器对象模型,用于把浏览器相关的组件封装为对象进行操作。

Navigator:浏览器对象(包括 )

JavaScript之BOM+DOM

Window:浏览器窗口对象

JavaScript之BOM+DOM

DOM:BOM是包含DOM的,然后DOM我们拿出来单独分为一级讲解

Location:地址栏对象

JavaScript之BOM+DOM

History:历史记录对象

JavaScript之BOM+DOM

Screen:显示器屏幕对象

Window对象与弹出框有关的方法:

alert()显示带有一段消息和一个确认按钮的警告框。

confirm()显示带有一段消息以及确认按钮和取消按钮的对话框。

如果用户点击确定按钮,则方法返回true

如果用户点击取消按钮,则方法返回false

prompt()显示可提示用户输入的对话框。

返回值:获取用户输入的值

Window对象与打开关闭有关的方法:

close()关闭浏览器窗口,谁调用关谁。

open()打开一个新的浏览器窗口 返回新的Window对象

JavaScript之BOM+DOM

Window对象与定时器相关方法

setTimeout()在指定的毫秒数后调用函数或计算表达式。

clearTimeout()取消由 setTimeout()方法设置的timeout

setInterval()按照指定的周期(以毫秒计)来调用函数或计算表达式

clearInterval()取消由setInterval()设置的 timeout

JavaScript之BOM+DOM

暂停选老婆

JavaScript之BOM+DOM

JavaScript之BOM+DOM

location对象

	1. 创建(获取):
1. window.location
2. location 2. 方法:
* reload() 重新加载当前文档。刷新
3. 属性
* href 设置或返回完整的 URL。
href 用于获取或指定当前页面的url
可以用于页面跳转

history对象

1. 创建(获取):
1. window.history
2. history 2. 方法:
* back() 加载 history 列表中的前一个 URL。
* forward() 加载 history 列表中的下一个 URL。
* go(参数) 加载 history 列表中的某个具体页面。
* 参数:
* 正数:前进几个历史记录
* 负数:后退几个历史记录
3. 属性:
* length 返回当前窗口历史列表中的 URL 数量。
go(-1)
后退一个页面

DOM,为了操作html对象

JavaScript之BOM+DOM

把html文档加载进内存, 用对象模型加以描述, 可以对这些对象进行操作以修改文档最终数据结构。

该对象模型是一个树型结构, 一般我们称为DOM树。

我们的dom操作一般都是基于该dom树进行增删改查操作。

document对象

获取Element对象:

JavaScript之BOM+DOM

JavaScript之BOM+DOM

JavaScript之BOM+DOM

JavaScript之BOM+DOM

	DOM树
方法:
1. 获取Element对象:*****
1. getElementById() : 根据id属性值获取元素对象。id属性值一般唯一
2. getElementsByTagName():根据元素名称获取元素对象们。返回值是一个数组
3. getElementsByClassName():根据Class属性值获取元素对象们。返回值是一个数组
4. getElementsByName(): 根据name属性值获取元素对象们。返回值是一个数组

Element对象

JavaScript之BOM+DOM

setAttribute(属性名,属性值)

设置属性

JavaScript之BOM+DOM

removeAttribute(属性名)

删除属性

JavaScript之BOM+DOM

##Node对象

JavaScript之BOM+DOM

JavaScript之BOM+DOM

JavaScript之BOM+DOM

点击删除子节点:

JavaScript之BOM+DOM

点击添加子节点:

JavaScript之BOM+DOM

想删除自己这个节点,需要找个爹:parentNode

JavaScript之BOM+DOM

JavaScript之BOM+DOM

HTML DOM

innerHTML 内部的html, 用于设置和获取元素的标签体

JavaScript之BOM+DOM

JavaScript之BOM+DOM

JavaScript之BOM+DOM

JavaScript之BOM+DOM

innerText 内部的文本, 不支持html格式数据, 参数都会当成普通字符串处理

样式控制:

使用style属性指定样式的值

使用className属性指定样式类

事件

事件监听机制***
在某个组件上监听某个特定的行为, 当此行为被触发, 则自动执行提前设定好的代码逻辑。
事件
1. 点击事件:
1. onclick:单击事件
2. ondblclick:双击事件
2. 焦点事件
焦点:
元素获得焦点代表该元素是用户目前可以进行交互的元素
1. onblur:失去焦点
2. onfocus:元素获得焦点。
3. 加载事件:
onload
一般用在window对象上, 用于获取页面加载完成这一事件
window.onload = function(){
// xxxx
document.getElementXXXX
}
4. 选择和改变
onchange 域的内容被改变。
一般用于select下拉列表,用于感知下拉列表的选项被改变。
5. 表单事件:
onsubmit 提交按钮被点击
它的返回值可以控制表单是否提交。
当返回true或者不返回的时候, 表单可以提交

BootStrap

前端框架
框架:
把一部分公共的逻辑已经实现的半成品软件。
BootStrap是移动设备优先的框架。

初始页面:

JavaScript之BOM+DOM

栅格系统*****

JavaScript之BOM+DOM

	响应式编程
编写一套页面, 可以适配不同分辨率的设备, 达到良好的显示效果。
BootStrap里,使用栅格系统来实现页面的响应式编程。

JavaScript之BOM+DOM

JavaScript之BOM+DOM

JavaScript之BOM+DOM

变为xs模式时,Vanの消失:

JavaScript之BOM+DOM

栅格是可以嵌套的。