dom

获取元素节点

document 代表整个文档
document.getElementById() 返回一个匹配特定 ID的元素
document.getElementByTagName() 方法返回一个动态的包含所有指定标签名的元素的HTML集合HTMLCollection。返回的列表事动态的，会随着DOM树的变化自动更新自身
document.getElementByClassName() 返回一个包含了所有指定类名的子元素的类数组对象，在ie8以下中有兼容问题

节点属性

节点类型 Node.nodeType 元素节点 —— 1 属性节点 —— 2 文本节点 —— 3 注释节点 —— 8 document文档 ——9 节点名称(只读) node.nodeName 返回和设置节点的值 node.nodeValue 返回属性集合 node.attributes

遍历节点树

node.parentNode 返回指定的节点在DOM树中的父节点.
node.childNodes 返回包含指定节点的子节点的集合，该集合为即时更新的集合
node.firstChild 只读属性返回树中节点的第一个子节点，如果节点是无子节点，则返回 null。
node.lastChild 只读属性，返回当前节点的最后一个子节点。如果父节点为一个元素节点，则子节点通常为一个元素节点，或一个文本节点，或一个注释节点。如果没有子节点，则返回 null。
node.nextSibling 只读属性，返回其父节点的 childNodes 列表中紧跟在其后面的节点，如果指定的节点为最后一个节点，则返回 null
node.previousSibing 返回当前节点的前一个兄弟节点,没有则返回null
node.parentElement 返回当前节点的父元素节点，如果该元素没有父节点，或者父节点不是一个 DOM 元素，则返回 null。
children 使用children属性返回元素的子元素的集合。即：HTMLCollection对象，只返回元素节点
firstElementchild 返回第一个元素节点
lastElementchild 返回第一个元素节点
nextElementSbling/previousElementSbling——返回后一个/前一个兄弟元素节点

节点操作

Node.hasChildNodes();

增加

document.createElement(); 创建元素节点
document.createTextNode(); 创建文本节点
document.createComment(); 创建注释节点

插入

element.appendChild(); 将一个节点附加到指定父节点的子节点列表的末尾处
node.insertBefore(newNode, referenceNode); 在参考节点之前插入一个拥有指定父节点的子节点v

删除

node.removeChild(child); 从DOM中删除一个子节点。返回删除的节点

替换

Node.replaceChild(newChild, oldChild); 用指定的节点替换当前节点的一个子节点，并返回被替换掉的节点。

innerHTML和innerText

innerHTML 属性设置或获取HTML语法表示的元素的后代
innerText设置或获取标签所包含的文本信息（从标签起始位置到终止位置的内容，去除HTML标签，但不包括自身）

元素属性

setAttribute('类型','值') 方法添加指定的属性，并为其赋指定的值
getAttribute(attributeName) 返回元素上一个指定的属性值。如果指定的属性不存在，则返回 null 或 "" （空字符串）;

bom

Window对象：浏览器窗口对象

window.方法名();
window.alert("window弹出");
alert("no 警告框")/confirm("no 确认对话框")/prompt("no 提示输入框");
open()打开一个新的浏览器窗口或查找一个已命名的窗口。
close()关闭浏览器窗口。
setTimeout()延时器在指定的毫秒数后调用函数或计算表达式。 var hi = setTimeout(function(){ alert("Hello"); }, 3000);
clearTimeout()取消由 setTimeout() 方法设置的 timeout。
setInterval()定时器按照指定的周期（以毫秒计）来调用函数或计算表达式。 setInterval(function(){ alert("Hello"); }, 3000);
clearInterval()取消由 setInterval() 设置的 timeout。

Window属性

window.history

history.go(-1);     //等同于history.back();

window.location 包含有关当前 URL 的信息
window.navigator
window.screen

location方法

assign() 加载新的文档
reload() 重新加载当前文档
replace() 文档替换当前文档

location属性

History对象

history.方法名(); history.属性名

window.history.方法名(); window.history.属性名

History方法

back()加载当前窗口 history 列表中的前一个 URL。
forward()加载当前窗口 history 列表中的下一个 URL。
go()加载当前窗口 history 列表中的某个具体页面。

History属性

length-- 返回浏览器历史列表中的 URL 数量。

BOM与DOM你所应该知道的点

dom