JavaScript之BOM(DOM)

DOM:是研究HTML代码内部的

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

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

效果:

点击图片后

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

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

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の消失:

栅格是可以嵌套的。

posted @ 2019-12-12 20:02  卯毛  阅读(420)  评论(0编辑  收藏  举报