一、JS的实现包含三个部分
1.ECMAScript(核心) 描述了JS的语法和基本对象。
2.浏览器对象模型(BOM)与浏览器交互的方法和接口
3.文档对象模型 (DOM)处理网页内容的方法和接口
二、BOM
BOM 表示的是 Browser Object Model,浏览器对象模型,BOM的核心的对象是Window对象: 由于BOM的window包含了document,因此可以直接使用window对象的document属性,从window.document我们可以知道,BOM中window对象包含了DOM对象。操作BOM就是操作BOM的window对象。
1.window对象
Window对象包含几个子对象:document、location、navigator、screen、history、frames。
window对象的方法:
alert() 显示带有一段消息和一个确认按钮的警告框。
blur() 把键盘焦点从顶层窗口移开。
clearInterval() 取消由 setInterval() 。
clearTimeout() 取消由 setTimeout()。
close() 关闭浏览器窗口。
confirm() 显示带有一段消息以及确认按钮和取消按钮的对话框。
focus() 把键盘焦点给予一个窗口。
open() 打开一个新的浏览器窗口或查找一个已命名的窗口。
print() 打印当前窗口的内容。
prompt() 显示可提示用户输入的对话框。
scrollTo() 把内容滚动到指定的坐标。
setInterval() 按照指定的周期(毫秒)来调用函数(定时器)。
setTimeout() 在指定的毫秒数后调用函数(延时器)。
在这里我只是列举了一些常见到的或用到的方法
三、DOM
DOM可以获取到文档中所有的对象节点,其中包括:
1.文档节点
2.元素节点
3.属性节点
4.文本节点
5.注释节点
获取对象节点
var uname = document.getElementById("div");
//通过ID获取节点
var uname1 = document.getElementsByClassName("shuai")[0];//返回一个数组
//通过class名获取节点
var uname2 = document.getElementsByName("hao")[0];//返回一个数组;
//通过name获取节点
var uname3 = document.getElementsByTagName("div")[0];//返回一个数组
//通过标签获取节点
var uname4 = document.querySelector("#div");
//通过选择器获取节点
parentNode//获取父节点
childNodes;//获取所有子节点
attributes;//获取元素的属性节点
previousSibling;//获取上一个兄弟节点
nextSibling;//获取下一个兄弟节点
parentElement //父元素
previousElementSibling //上一个兄弟元素
nextElementSibling //下一个兄弟元素
children //子元素
firstElementChild //第一个子元素
lastElementChild //最后一个子元素
DOM树
DOM事件等级
DOM事件分为3个级别:DOM0级事件处理,DOM2级事件处理和DOM3级事件处理。
因为1级DOM标准并没有定义事件相关的内容,所以没有所谓的1级DOM事件模型。
DOM0级处理事件就是将一个函数赋值给一个事件处理属性。
DOM2级事件定义了addEventListener 和 removeEventListener两个方法,分别用来绑定和解绑事件,方法中包含三个参数
DOM3级事件:
UI事件,当用户与页面上的元素交互时触发
焦点事件,当元素获得或失去焦点时触发
鼠标事件,当用户通过鼠标在页面执行操作时触发
滚轮事件,当使用鼠标滚轮或类似设备时触发
文本事件,当在文档中输入文本时触发
键盘事件,当用户通过键盘在页面上执行操作时触发