一:BOM
BOM:Browser Object Model 浏览器对象模型
BOM 提供与浏览器交互的方法和接口;BOM的核心对象是window,它表示浏览器的一个实例
全局变量不能通过delete操作符删除,而直接在window对象上定义的属性可以
window.open():打开新窗口,参数--URL、窗口目标、特性字符串、是否取代当前页面的布尔值
window.close():可关闭新打开的窗口
JavaScript 语言是单线程语言。
超时调用:在指定的时间过后执行代码;setTimeout(要执行的代码,以毫秒表示的等待时间)
取消:clearTimeout(timeoutId)
间歇调用:每隔指定的时间就执行一次代码;setInterval(代码,时间)
取消:clearInterval(Id)
注:最好不用,可用超时调用代替
系统对话框:alert()、confirm()、prompt(提示文本,默认值)
二:DOM
(一)基本概念
DOM:Document Object Model 文档对象模型
DOM是一套对文档的内容进行抽象和概念化的方法
W3C定义:一个与系统平台和编程语言无关的接口,程序和脚本可用通过这个接口动态地访问和修改文档的内容、结构和样式。
DOM工作模式:先加载文档的静态内容,再动态刷新,动态刷新不影响文档的静态内容
这正是DOM的真正威力:对页面内容进行刷新却不需要在浏览器里刷新页面
JavaScript脚本只应该用来充实文档的内容,要避免使用DOM技术来创建核心内容
DOM代表着加载到浏览器窗口的当前网页
(二)DOM节点介绍
DOM把文档表示为一颗节点数:
节点类型及对应nodeType的值:
节点类型 | nodeType |
元素 | 1 |
属性 | 2 |
文本 | 3 |
注释 | 8 |
文档 | 9 |
document.getElementById("id")
document.getElementsByTagName("tag")
document.getElementsByClassName("class")
querySelectorAll(CSS选择器):返回所有匹配的元素
增加元素节点:
document.creatElement("nodeName")
parentElement.appendChild(childNode) 将子节点插入父节点末尾
parentElement.insertBefore(newElement,targetElement) 将一个新元素插入到一个现有元素的前面
parentElement = targetElement.parentNode
删除元素节点:
parent.removeChild(node) 返回要移除的节点
替换元素节点:
parent.replaceChild(要插入的节点,要替换的节点)
注意事项:getElementsByClassName() 在 Internet Explorer 5,6,7,8 中无效
2,文本节点
获取文本节点的值的两种方式:
方式一:
node.firstChild.nodeValue
方式二:
node.innerHTML
向一个元素增加文本节点:
document.creatTextNode("text")
parent.appendChild(childNode)
3,属性节点
获得属性节点的值:object.getAttribute("attribute")
设置属性节点的值:object.setAttribute("attribute","value")
移除属性节点:element.removeAttribute()
属性节点的parentNode为null,即不被认为是DOM文档树的一部分
(三)节点属性与方法介绍
nodeValue 属性:
nodeValue 属性规定节点的值。
元素节点的 nodeValue 是 undefined 或 null
文本节点的 nodeValue 是文本本身
属性节点的 nodeValue 是属性值
nodeName属性:
nodeName 属性规定节点的名称,总是返回一个大写字母的值
元素节点的 nodeName 与标签名相同
属性节点的 nodeName 与属性名相同
文本节点的 nodeName 始终是 #text
文档节点的 nodeName 始终是 #document
node.hasChildNodes() 有子节点时返回true
element.hasAttribute() 有指定的属性则返回true
element.hasAttributes() 元素拥有属性返回true
element.childNodes :包含元素子节点、文本节点、注释或处理指令;不含属性节点
注:IE 不会计算空白符;其他浏览器会把空白符当文本节点
node.firsrtChild -->node.childNodes[0] 第一个子节点
node.lastChild 最后一个子节点
<!doctype html>
<html>
<head>
<title>My home page</title>
</head>
<body>
<h1>My home page</h1>
<p>Hello, I am Rock and this is my home page.</p>
<p>I also wrote a book! Read it
<a href="#">here</a>.</p>
</body>
</html>
CSS-DOM:
element.style.property 获取样式只能返回行内样式
element.style.property = value 设置样式
(四)DOM事件
事件流:描述的是从页面中接收事件的顺序
①事件冒泡:事件首先在目标元素上发生,然后沿DOM树向上传播,直到document
②事件捕获:document对象首先接收到事件,然后沿DOM树向下传播,直到事件的实际目标
③DOM事件流:含3个阶段 事件捕获阶段、处于目标阶段和事件冒泡阶段
事件处理程序:响应某个事件的函数,名字以"on"开头
1,HTML事件处理程序:其作为元素的属性 如onclick = "js code"
2,DOM 0级事件处理程序:element.onclick = function(){}
3,DOM 2级事件处理程序:element.addEventListener("事件名",函数/函数名,布尔值)
element.removeEventListener("事件名",函数名,布尔值)
布尔值:true --> 在捕获阶段调用事件处理程序
false --> 在冒泡阶段调用事件处理程序
事件对象 :event对象
currentTarget--> 当前处理的那个元素 (等同于this)target--> 事件的目标
type--> 事件类型
preventDefault() --> 取消事件的默认行为
stopPropagaction --> 取消事件的进一步捕获或冒泡
事件是将JavaScript与网页联系在一起的主要方式
UI事件 | 焦点事件 | ||
load | 页面加载时触发;window.onload | blur | 元素失去焦点时触发,不冒泡 |
unload | 页面卸载后触发 | focus | 元素获得焦点时触发,不冒泡 |
resize | 当窗口大小变化时触发 | focusin | 获得焦点 |
scroll | 页面滚动时触发 | focusout | 失去焦点 |
鼠标事件 |
键盘事件 |
||
click |
单击鼠标按钮或按下回车键时触发 |
keypress |
用户按下键盘上的字符键时触发 |
dbclick |
双击鼠标 |
keydown |
按下任意键时触发 |
mousedown |
按下任意鼠标按钮触发 |
keyup |
释放按键时触发 |
mouseup |
释放鼠标按钮 |
||
mousewheel |
滚动鼠标滚轮时触发 |
||
mouseover |
鼠标指针移动到元素上方时触发 |
||
mouseout |
鼠标指针离开元素上方时触发 |
(五)表单对象
属性:
disable | 是否被禁用 | tabIndex | |
form | 指向所属表单 | type | input类型 |
name | value | 提交给服务器的值 | |
readOnly | autofocus | 自动获得焦点 |
共有方法:
focus():取得焦点
blur():失去焦点