DOM基础、定时器、BOM基础

DOM基础

• DOM节点介绍

• 子节点

• 节点的分类

文本节点

元素节点

• 获取子节点的方法

• oParentNode.childNodes,返回一个数组,包含父节点中的所有文本节点和元素节点
• 通过nodeType属性来判断节点的类型,1为元素节点,3为文本节点
• oParentNode.children,返回一个数组, 包含父节点中的所有元素节点

• 父节点

• oNode.parentNode,子节点的父节点对象
• oNode.offsetParent,子节点绝对定位时,获取参考的父节点对象
• 隐藏父元素案例

• 首尾子节点

• firstChild, firstElementChild
• lastChild, lastElementChild

• 兄弟节点

• nextSibling,nextElementSibling
• previousSibling,previousElementSibling

• 操作属性

• 获取属性的值:getAttribute(名称),有属性获取值,没有属性返回null
• 设置属性:setAttribute(名称,值)
• 删除属性:removeAttribute(名称)

• 通过类名获取元素集合

• 封装函数

• 创建元素

document.createElement(‘标签名’)

• 追加元素

parentNode.appendChild(node)

• 插入元素

parentNode.insertBefore(node1,node2),在node2之前插入node1

• 删除元素

parentNode.removeChild(node)

• 删除父元素案例

DOM 应用

• 获取表格元素

• 隔行变色案例
• 添加删除行
• 搜索内容

• toLowerCase()
• search
• split

• 按内容排序### 定时器

• setInterval(fn,时间) 开启循环型定时器

• setTimeout(fn,时间) 开启延迟型定时器

• clearInterval(定时器) 关闭循环型定时器

• clearTimeout(定时器) 关闭延迟型定时器

• 注意点:

• 循环型定时器在定时器关闭前会一直按照设定的间隔时间执行,延迟型定时器只执行一次
• 定时器中指定的时间指的是该时间后把代码加入到执行队列中,如果队列空闲就立即执行

• 案例1:数码时钟

• 系统时间对象 Date,方法 getHours、getMinutes、getSeconds,getFullYear(),getMonth(),getDate(),getDay()
• 字符串的charAt方法

window对象

• window代表一个浏览器对象
• window对象是一个全局对象,因此在全局作用域中声明的变量函数会变成window对象的属性和方法

window.open()

打开一个新窗口并返回新打开的窗口对象

• window.open(“about:blank”,"_blank");
• window.open(“about:blank”);
• window.open(“about:blank”,"_self");
• window.open(“http://www.kuazhu.com”);

window.close()

• 不能关闭用户打开的窗口

window.navigator.userAgent

• 当前浏览器的信息

window.location

• 当前页面的相关信息对象,可以读取和赋值
• document.loaction和window.location是同一个对象
• window.location.href 属性代表当前页面的完整url
• window.location.assign(url),assign方法会打开url,如果把location.href或者location设置为一个url值,也会调用assign方法
• location的其他属性

host
hostname
pathname
port
search

window.histroy

• 用户上网的记录,从窗口被打开的那一刻算起
  history.go(-1) == history.back()
  history.go(1) == history.forward()

交互

var res = prompt(“请输入你的姓名？”);

var res = confirm(“你确定删除吗?”);