前端——JS(DOM和BOM)

DOM

1 文档对象

1.1 DOM:基于树的API文档
1.2 操作:创建-获取-事件-操作
1.3 打印对象:console.dir()
1.4 遍历对象:for(var key in data){ data[key] }

2 获取页面元素

2.1 id获取
var div = document.getElementById("div")
2.2 标签获取
var div=document.getElementsByTagName("div") -获取到的是数组
2.3 标签name获取
var div = document.getElementsByName("box")
2.4 类获取
var div = document.getElementByClass("container")
2.5 选择器
var div = document.querySelector(".container")-获取第一个符合的元素
var div = document.querySelectorAll()-获取所有元素

3 事件

事件三阶段:捕获-执行-冒泡
3.1 注册事件

<body>
	<input  type="button" id="btn"/>
	<script>
		var btn = document.getElementById("btn")
		//方法一
		btn.onclick= function(){
		//onclick是事件的名称,只有事件冒泡
		}
		//方法二
		btn.addEventListener("click",function(){
			
		},false)
		/*第三个参数默认是false,此时表示事件冒泡,可以应用于事件委托
		为true,此时表示时间捕获*/
	script>
body>

3.2 移除事件
btn.οnclick=null
btn.removeEventListener(“click”,函数名)–注册时不使用匿名函数
3.3 事件对象
DOM标准:e
以前版本:event
兼容处理:e = e || event
①基本
e.type:事件名称
e.currentTarget:当前执行函数所属对象
e.target:真正事件触发对象
e.eventPhase:1-捕获 2-目标 3-冒泡
②鼠标
e.page=e.client+页面滚动距离
页面滚动距离:scrollLeft,scrollTop
鼠标坐标:
-相对于浏览器可视区域:e.clientX,e.clientY
-相对于当前页面,加滚动内容:e.pageX,e.pageY
-相对于页面的距离:offsetTop,offsetLeft
-相对于盒子的距离:e.page - offset
③取消默认行为
e.preventDefault()
④阻止冒泡
e.stopPropagation()

4 属性操作

4.1 this指向
普通函数:window
构造函数:构造函数创建的对象
方法:方法所属的对象
事件处理函数:调用事件的对象
4.2 属性
表单属性:value type disabled checked selected
其他属性:href title id src className
自定义属性:获取-getAttribute 设置-setAttribute 移除-removeAtribute
4.3 取消a标签的默认行为
①return false
②href=“javascript=void(0)”
4.4 标签文本
innerText:只获取文本,不解析标签
innerHTML:获取文本+标签,解析标签

5 节点

5.1 节点概念
类型:nodeType
名称:nodeName
值:nodeValue
5.2 父子节点
parentNode:父节点
hasChildNodes()-判断是否有子节点
childNode-子节点 children-子元素节点
firstChild-第一个子节点 firstElementChild-第一个字元素节点
lastChild-最后一个子节点 lastElementChild-最后一个子元素节点
5.3 兄弟节点
nextSibling-下一个兄弟节点 nextElementSibling-下一个兄弟元素节点
previousSibling-上一个兄弟节点 previousSibling-上一个兄弟元素节点
5.4 复制节点
cloneNode:参数为false-只是复制节点标签 true-都复制

6 创建元素

6.1 创建
var div = document.createElement(“div”)
父元素.appendChild(“div”)
6.2 操作方法
insertBefore-插入元素
replaceChild-替换元素

BOM

1 浏览器对象

1.1 顶级对象:window
1.2 对话框:alert prompt confirm

2 定时器

返回值是定时器标识
setTimeout(函数,时间):执行一次       clearTimeout(定时器标识)
setInterval(函数,时间):重复执行       clearInterval(定时器标识)

3 坐标

①offsetParent:获取当前元素最近的定位父元素,无定位是body
坐标:offsetLeft        offsetTop(相对于定位父元素)
大小:offsetWidth     offsetHieght(content+padding+border)
②边框大小:clientLeft(border-left)     clinetTop(border-top)
大小:clientWidth        clientHieght(content+padding)
③内容滚动距离:scorllLeft scrollTop(从border开始)
内容大小:scrollWidth scrollHeight(padding+未显示内容)

你可能感兴趣的:(前端)