1、BOM
2、DOM
1、BOM:
BOM(Browser Object Model)是指浏览器对象模型,使js有能力与浏览器进行交互。
window的子对象:
location对象:
- location.href 获取url
- location.href = ‘url’ 跳转到指定页面
- location.reload() 重新加载页面
弹出框:警告框、确认框、提示框
警告框:
- alert(“语句”);
确认框:
- confirm(“语句”)
提示框:
- prompt(“请在下方输入”,“你的答案”)
计时相关:
-
setTimeout: 指定时间之后做一件事
-
clearTimeout() 指定时间后不想运行了就停止
-
setInterval: 每隔多少时间做事
-
clearInterval() 停止
var timer = setTimeout(function(){alert(123);},3000)
//取消setTimeout设置
clearTimeout(timer);
2、DOM:
DOM(Document Object Model)文档对象模型,当网页被加载时,浏览器会创建页面的文档对象模型。
DOM标准规定HTML文档中的每个成分都是一个节点(node):
- 文档节点(document对象):代表整个文档
- 元素节点(element对象):代表一个元素(标签)
- 文本节点(text对象):代表元素(标签)中的文本
- 属性节点(attribute对象):代表一个属性,元素(标签)才有属性
查找标签:
- document.getElementById 根据ID获取一个标签
- document.getElementsByClassname 根据class属性获取
- document.getElementByTagName 根据标签名获取标签合集
间接查找:
parentElement | 父节点标签元素 |
---|---|
children | 所有子标签 |
firstElementChild | 第一个子标签元素 |
lastElementChild | 最后一个子标签元素 |
nextElementSibling | 下一个兄弟标签元素 |
previousElementSibling | 上一个兄弟标签元素 |
事件:
onclick | 当用户点击某个对象时调用的事件句柄 |
---|---|
ondblclick | 当用户双击某个对象时调用的事件句柄 |
onfocus | 元素获得焦点 |
onblur | 元素失去焦点。应用场景:表单验证 |
onchange | 域的内容被改变。应用场景:表单元素(select联动) |
onkeydown | 某个键盘按键被按下 。应用场景:用户在最后一个输入框按下回车键,表单提交 |
onkeypress | 某个键盘按键被按下并松开 |
onkeyup | 某个键盘按键被松开 |
onload | 一张页面或一副图象完成加载 |
onmousemove | 鼠标被移动 |
onmousedown | 鼠标按钮被按下 |
onmouseout | 鼠标从某元素移开 |
onmouseover | 鼠标移到某元素之上 |
onselect | 在文本框中的文本被选中时发生 |
onsubmit | 确认按钮被点击,使用的对象是form |
绑定方式(常用):
<div id='d1'>点我</div>
<script>
var divEle = document.getElementById('d1');
divEle.onclick = function(){
this.innerText = '哈哈';
}
</script>