JavaScript之BOM(DOM)
DOM:是研究HTML代码内部的
控制HTML文档内容,以页面标签(元素)为对象
事件:对元素进行某些动作后会触发代码实现功能的一种属性
效果:
点击图片后
BOM:是研究浏览器这个程序的
浏览器对象模型,用于把浏览器相关的组件封装为对象进行操作。
Navigator:浏览器对象(包括 )
Window:浏览器窗口对象
DOM:BOM是包含DOM的,然后DOM我们拿出来单独分为一级讲解
Location:地址栏对象
History:历史记录对象
Screen:显示器屏幕对象
Window对象与弹出框有关的方法:
alert()显示带有一段消息和一个确认按钮的警告框。
confirm()显示带有一段消息以及确认按钮和取消按钮的对话框。
如果用户点击确定按钮,则方法返回true
如果用户点击取消按钮,则方法返回false
prompt()显示可提示用户输入的对话框。
返回值:获取用户输入的值
Window对象与打开关闭有关的方法:
close()关闭浏览器窗口,谁调用关谁。
open()打开一个新的浏览器窗口 返回新的Window对象
Window对象与定时器相关方法
setTimeout()在指定的毫秒数后调用函数或计算表达式。
clearTimeout()取消由 setTimeout()方法设置的timeout
setInterval()按照指定的周期(以毫秒计)来调用函数或计算表达式
clearInterval()取消由setInterval()设置的 timeout
暂停选老婆
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对象
把html文档加载进内存, 用对象模型加以描述, 可以对这些对象进行操作以修改文档最终数据结构。
该对象模型是一个树型结构, 一般我们称为DOM树。
我们的dom操作一般都是基于该dom树进行增删改查操作。
document对象
获取Element对象:
DOM树
方法:
1. 获取Element对象:*****
1. getElementById() : 根据id属性值获取元素对象。id属性值一般唯一
2. getElementsByTagName():根据元素名称获取元素对象们。返回值是一个数组
3. getElementsByClassName():根据Class属性值获取元素对象们。返回值是一个数组
4. getElementsByName(): 根据name属性值获取元素对象们。返回值是一个数组
Element对象
setAttribute(属性名,属性值)
设置属性
removeAttribute(属性名)
删除属性
##Node对象
点击删除子节点:
点击添加子节点:
想删除自己这个节点,需要找个爹:parentNode
HTML DOM
innerHTML 内部的html, 用于设置和获取元素的标签体
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是移动设备优先的框架。
初始页面:
栅格系统*****
响应式编程
编写一套页面, 可以适配不同分辨率的设备, 达到良好的显示效果。
BootStrap里,使用栅格系统来实现页面的响应式编程。
变为xs模式时,Vanの消失:
栅格是可以嵌套的。