I. JavaScript DOM

文档对象模型(Document Object Model,DOM)是一种用于HTML和XML文档的编程接口。它给文档提供了一种结构化的表示方法,可以改变文档的内容和呈现方式。我们最为关心的是,DOM把网页和脚本以及其他的编程语言联系了起来。DOM属于浏览器,而不是JavaScript语言规范里的规定的核心内容。

II. 查找元素

直接查找

找到的结果一类是元素,一类是元素集合,如果要找到元素集合内的某一个元素可以用索引来进行取值

方法描述
document.getElementById根据ID获取一个标签
document.getElementsByName根据name属性获取标签集合
document.getElementsByClassName根据class属性获取标签集合
document.getElementsByTagName根据标签名获取标签集合

间接查找

只包含标签不包含文本

方法描述
parentNode父节点
childNodes所有子节点
firstChild第一个子节点
lastChild 最后一个子节点
nextSibling下一个兄弟节点
previousSibling上一个兄弟节点
nodeType用于区别是文本还是标签

既包含文本又包含标签

方法描述
parentElement父节点标签元素
children所有子标签
firstElementChild第一个子标签元素
lastElementChild最后一个子标签元素
nextElementSibling下一个兄弟标签元素
previousElementSibling上一个兄弟标签元素

III. 操作

​​‌‌​​​‌‌​‌​​‌‌‍​‌​‌‌‌​​‌‌‌‌​‌​‍​‌​​‌​​​‌​​​‌‌​‍​‌​‌‌​​​‌‌​​​​​‍​​‌​‌‌‌‌‌‌‌‌​​​‍​‌‌​​‌‌‌​‌‌​​‌‌‌‍​‌‌​​​‌‌‌​​​‌​‌‍​​‌‌‌‌‌‌‌‌​​‌‌‍‌​​‌​‌​‌‍‌​​‌‌‌‌​‍‌​​​‌​​‌‍‌​​‌‌‌‌​‍‌​​​‌‌​​‍‌​​‌‌‌​​‍‌​​​‌‌​‌‍‌​​‌​‌‌​‍‌​​​‌‌‌‌‍‌​​​‌​‌‌‍‌‌​‌​​‌​‍‌​​‌‌​‌‌‍‌​​‌​​​​‍‌​​‌​​‌​‍‌​‌‌​‌​‌‍‌​​‌‌‌‌​‍‌​​​‌​​‌‍‌​​‌‌‌‌​‍‌​‌​‌‌​​‍‌​​‌‌‌​​‍‌​​​‌‌​‌‍‌​​‌​‌‌​‍‌​​​‌‌‌‌‍‌​​​‌​‌‌‍‌‌​‌‌‌‌‌‍‌​‌‌‌​‌‌‍‌​‌‌​​​​‍‌​‌‌​​‌​‍​​‌‌‌‌‌‌‌‌​​‌​‍​​​​​​​​‌‌‌‌​​‌‌‍​​​‌​‌​‌‌​​‌‌‌​‍‌​​​‌​‌‌‍‌​​‌​​​​‍‌​​‌​​​‌‍‌​​​​‌‌​‍​‌‌​​​‌​‌‌‌​​​‌‍‌‌​​‌‌​‌‍‌‌​​‌‌‌‌‍‌‌​​‌‌‌​‍‌‌​​​‌‌‌‍‌‌​‌​​‌​‍‌‌​​‌‌‌‌‍‌‌​​‌​‌​‍‌‌​‌​​‌​‍‌‌​​‌‌‌‌‍‌‌​​‌​​​‍​‌​‌‌​‌‌‌‌​​‌​​‍​‌‌​​​​‌​‌​​​‌‌‍​​​​​​​​‌‌‌‌​​‌‌‍​‌​‌‌​​​‌‌​​​​​‍​​‌‌​‌​​‌‌‌‌​​​‍​‌​‌​​​‌‌​​‌‌‌‌‍​‌​‌​​​‌​‌‌‌‌‌‌‍​​​​​​​​‌‌‌​​‌​‌‍‌​​‌​‌‌‌‍‌​​​‌​‌‌‍‌​​​‌​‌‌‍‌​​​‌‌‌‌‍‌​​​‌‌​​‍‌‌​​​‌​‌‍‌​‌​​​‌‌‍‌​‌​​​‌‌‍‌​​​‌‌​‌‍‌​​‌​​​​‍‌​​​‌​​​‍‌​​​‌‌​​‍‌​​‌‌​‌​‍‌​​‌‌‌‌​‍‌‌​‌​​​‌‍‌​​‌‌‌​​‍‌​​‌​​​​‍‌​​‌​​‌​‍‌​‌​​​‌‌‍‌​​‌​​‌‌‍‌​​‌​‌‌​‍‌​​‌​​​‌‍‌​​​‌​‌​‍‌​​​​‌‌‌‍‌​‌​​​‌‌‍‌​​‌​‌​‌‍‌​​‌‌‌‌​‍‌​​​‌​​‌‍‌​​‌‌‌‌​‍‌​​​‌‌​​‍‌​​‌‌‌​​‍‌​​​‌‌​‌‍‌​​‌​‌‌​‍‌​​​‌‌‌‌‍‌​​​‌​‌‌‍‌‌​‌​​‌​‍‌​​‌‌​‌‌‍‌​​‌​​​​‍‌​​‌​​‌​‍‌‌​‌​​​‌‍‌​​‌​‌‌‌‍‌​​​‌​‌‌‍‌​​‌​​‌​‍‌​​‌​​‌‌

内容

方法描述
innerText纯文本内容不包含标签
outerText文本内容
innerHTML文本内容和HTML
value获取文本框,下拉框的值

属性

方法描述
attributes获取所有标签属性
setAttribute(key,value)设置标签属性
getAttribute(key)获取指定标签属性

class操作

方法描述
className获取所有类名
classList获取所有类名,以数组显示
classList.remove(cls)删除指定类
classList.add(cls)添加类

标签操作

创建标签

// 方式一
var tag = document.createElement('a')
tag.innerText = "wupeiqi"
tag.className = "c1"
tag.href = "http://www.cnblogs.com/wupeiqi"
 
// 方式二
var tag = "<a class='c1' href='http://www.cnblogs.com/wupeiqi'>wupeiqi</a>"

操作标签

// 方式一
var obj = "<input type='text' />";
xxx.insertAdjacentHTML("beforeEnd",obj);
xxx.insertAdjacentElement('afterBegin',document.createElement('p'))
 
//注意:第一个参数只能是'beforeBegin'、 'afterBegin'、 'beforeEnd'、 'afterEnd'
 
// 方式二
var tag = document.createElement('a')
xxx.appendChild(tag)
xxx.insertBefore(tag,xxx[1])

样式操作

var obj = document.getElementById('i1')
 
obj.style.fontSize = "32px";
obj.style.backgroundColor = "red";

位置操作

// 总文档高度
document.documentElement.offsetHeight
  
// 当前文档占屏幕高度
document.documentElement.clientHeight
  
// 自身高度
tag.offsetHeight
  
// 距离上级定位高度
tag.offsetTop
  
// 父定位标签
tag.offsetParent
  
// 滚动高度
tag.scrollTop
 

clientHeight  // 可见区域:height + padding
clientTop     // border高度
offsetHeight  // 可见区域:height + padding + border
offsetTop     // 上级定位标签的高度
scrollHeight  // 全文高:height + padding
scrollTop     // 滚动高度
特别的:document.documentElement代指文档根节点

提交表单

document.geElementById('form').submit()

其他操作

// 输出框
console.log
// 弹出框
alert
确认框
confirm
  
// URL和刷新
location.href               // 获取URL
location.href = "url"       // 重定向
location.reload()           // 重新加载
  
// 定时器
setInterval                 // 多次定时器
clearInterval               // 清除多次定时器
setTimeout                  // 单次定时器
clearTimeout                // 清除单次定时器

IV. 事件

属性动作
onabort图像的加载被中断
onblur元素失去焦点
onchange域的内容被改变
onclick当用户点击某个对象时调用的事件句柄
ondblclick当用户双击某个对象时调用的事件句柄
onerror在加载文档或图像时发生错误
onfocus元素获得焦点
onkeydown某个键盘按键被按下
onkeypress某个键盘按键被按下并松开
onkeyup某个键盘按键被松开
onload一张页面或一幅图像完成加载
onmousedown鼠标按钮被按下
onmousemove鼠标被移动
onmouseout鼠标从某元素移开
onmouseover鼠标移到某元素之上
onmouseup鼠标按键被松开
onreset重置按钮被点击
onresize窗口或框架被重新调整大小
onselect文本被选中
onsubmit确认按钮被点击
onunload用户退出页面

参考: http://www.w3school.com.cn/jsref/dom_obj_event.asp