DOM(document object model)
DOM把html当做一个文档树,文档所有内容都可称为节点,标签称为元素,根元素html,根据节点找到父节点,子节点,兄弟节点
var btn = document.getElementById("btn");
btn.onclick = function(){
alert("dian wo");
}
document.getElementById //通过ID获取某个元素,所有浏览器兼容(ie7会把表单name当id使用)
[context].getElementsByClassName //通过class类名获取,获取是一组,不支持IE8及以下
[context].getElementsByTagName //通过标签名获取,获取是一组,所有浏览器兼容
document.getElementsByName //通过name获取,获取是一组,很少用,所有浏览器兼容,一般用来操作表单元素
document.body 获取整个body对象
document.all 获取所有标签
document.querySelector() 只会返回找到的第一个元素
document.querySelectorAll()返回所有符合条件的元素。返回数组形式
这两个方法都是用document对象来调用,都是传递一个选择器字符串作为参数,会自动根据选择器
字符串去网页中查找元素。
childNodes 表示当前节点的所有子节点
firstChild 表示当前节点的第一个子节点
lastChild 表示当前节点的最后一个子节点
parentNode 表示当前节点的父节点
previousSibling 表示当前节点的前一个兄弟节点
nextSibling 表示当前节点的后一个兄弟节点
结点的增删改查
var li = document.createElement("li")
var text = document.createTextNode("广州")
// city2.appendChild(li);
// city.insertBefore(li, bj)
// city.replaceChild(li, bj)
//city.removeChild(bj)
//bj.parentNode.removeChild(bj)
//alert(city.innerHTML)
// bj.innerHTML = "昌平"
city.innerHTML += "<li> 广州 </li>"
操作子父节点时需要注意table里有个隐藏的tbody标签
读取和设置style, 都是内联样式的值
box1.style.width = "300px"
box1.style.backgroundColor = "blue"
alert(box1.style.width) //带有单位px
获取当前生效样式,
getComputedStyle传递元素获得一个对象封装了元素的属性,第二个参数用于伪元素
alert(getComputedStyle(box1, null).width)
box1.currentStyle.width (只有ie支持)
获取可见宽度和高度
alert(box1.clientHeight)(包括内容区和padding,不包括边框和margin)
alert(box1.clientWidth)
alert(box1.offsetWidth)
alert(box1.offsetHeight)(包括内容区和padding和border)
box1.offsetParent (获取到最近的开启定位的祖先元素)
box1.offsetLeft(获取和最近的开启定位的祖先元素的水平距离)
box1.offsetTop
box1.scrollWidth(元素整个滚动区的宽度)
box1.scrollHeigh
box1.scrollLeft(元素水平滚动条滚动的距离)
box1.scrollTop
当scrollHeigh-scrollTop==clientHeight说明滚动条滚到低了
var st =document.body.scrollTop ||document.documentElement.scrollTop(对于取得整个页面的滚动条,兼容性处理,后一个支持chrome)
BOM
浏览器对象模型
window
代表整个浏览器窗口,window也是整个网页的全局对象,所有在全局作用域中声明的变量、函数都会变成 window 对象的属性和方法
navigator
代表当前浏览器的信息,通过对象可以识别不同的浏览器
location
代表当前浏览器的地址栏信息,可以获取地址栏信息或操作浏览器跳转页面
history
代表浏览器历史记录, 由于隐私原因,只可以操作向前向后翻页
screen
代表用户屏幕信息,可以获得用户显示器相关信息
window
//等同于< a href="http://www.wrox.com" target="topFrame"></a>
window.open("http://www.wrox.com/", "topFrame");
定时器
var time=setInterval(function(){},1000) 每隔1000毫秒执行一次函数,会返回一个数字
clearInterval(time);关闭对应的time号定时器
开启定时器前,先关闭定时器,以解决多次开启定时器加速问题
var time=setTimeout(function(){},3000) 延时调用,3000毫秒后调用,只调用一次
clearTimeout(time) 关闭延时调用
为了防止定时器的冲突,最好不要定义全局变量定时器,可以给对象加一个定时器属性,比如 obj.time=setInterval 然后clearInterval(obj.time);
JavaScript 是一个单线程序的解释器,因此一定时间内只能执行一段代码。setTimeout()的第二个参数告诉 JavaScript 再过多长时间把当前任务添加到队列中
超时调用和间歇调用转化
var num = 0;
var max = 10;
function incrementNumber() {
num++;
//如果执行次数未达到 max 设定的值,则设置另一次超时调用
if (num < max) {
setTimeout(incrementNumber, 500);
} else {
alert("Done");
}
}
setTimeout(incrementNumber, 500);
确认或取消对话框
confirm("Are you sure?")
输入对话框,确定返回输入的内容,Cancel 或没有单击OK 而是通过其他方式关闭了对话框,则该方法返回 null
prompt("What's your name?","Michael")
navigator
可以用来检测一些插件
navigator.userAgent 返回一个字符串,包含描述浏览器的信息
var ua =navigator.userAgent;
if(/firefox/i.text(ua)){火狐}
else if(/chrome/i.text(ua)){谷歌}
else if(/msie/i.text(ua)){ie}
else if("ActiveXObject" in window){ie11}
因为各浏览器的差异,使用能力检测来判断浏览器版本以使用不同的逻辑代码
callback &&callback() 有callback()函数就执行,没有就不执行
history
history 获取到当次访问的连接数量
history.back();和浏览器回退按钮一样
history.forward();前进
history.go(n);前进n个页面,负数就是向后跳转n个
location
可以解析url
location="http://www.baidu.com"; 修改会跳转到指定地址,也可以填相对地址
location.assign("http://www.baidu.com")
location.reload();刷新当前页面
location.reload(true);如果传了true会强制清空缓存刷新页面
location.repalce("http://www.baidu.com") 也是去新的网页,但不能回退
“DOM2级事件”定义了两个方法,用于处理指定和删除事件处理程序的操作:addEventListener()和 removeEventListener()
事件的绑定
addEventListener() 可以同时为一个元素绑定多个响应函数,按照函数顺序从上往下执行,ie8及以下不支持
参数:事件(不要on),回调函数,是否捕获时触发
btn.addEventListener("click",function(){},false)
var btn = document.getElementById("myBtn");
btn.addEventListener("click", function(){
alert(this.id);
}, false);
btn.addEventListener("click", function(){
alert("Hello world!");
}, false);
通过 addEventListener()添加的事件处理程序只能使用 removeEventListener()来移除,匿名函数无法移除
var btn = document.getElementById("myBtn");
var handler = function(){
alert(this.id);
};
btn.addEventListener("click", handler, false);
//这里省略了其他代码
btn.removeEventListener("click", handler, false); //有效!
attachEvent()ie8及以下用,事件参数,要on
btn.addEventListener("onclick",function(){})
事件的委派:
将事件统一委派给祖先元素,当后代元素触发时,会一直冒泡到祖先元素,从而通过祖先元素的响应函数来处理事件。比如给ul绑定事件,则子元素li都可以触发事件。
可以通过event.target获得触发事件的元素
在触发 DOM 上的某个事件时,会产生一个事件对象 event,这个对象中包含着所有与事件有关的
信息,如鼠标坐标,按下的那个键
window.event 兼容ie
event=event||window.event 实现都兼容
event.clientX 鼠标的x坐标(相对于窗口)
event.clientY
event.pageX 鼠标的x坐标(相对于整个页面)
event.pageY
一些事件
onblur 失去焦点onFocus 获得焦点
onmouseover onmouseout onmousewheel 鼠标滚轮滚动
用wheelDelate和detail(兼容火狐)获取方向
if(event.wheelDelate>0 ||event.detail<0)
向上滚
else{
向下滚
}
onscroll 滚动条事件(滚动条谁的,给谁绑定)
onkeydown 按键按下onkeyup 按键松开
if(event.keyCode==89&&event.ctrlKey)
{ ctrl和y都被按下了
}
可以通过在函数里添加return false阻止默认行为,来阻止用户在input内输入一些特定字母