1、getElememtById
/**
* 获取指定id的的元素数组
*/
function getElements(/*ids...*/) {
var elements = {};
for(var i = 0; i < arguments.length; i++) {
var id = arguments[i];
var elt = document.getElementById(id);
if (elt == null)
throw new Error("No element with id: " + id);
elements[id] = elt;
}
return elements;
}
在低于IE8以下版本的浏览器，getElementById()对匹配元素的id不区分大小写，而且也返回匹配name属性的元素！
2、getElememtsByName
在IE8下，getElementsByName()会返回id属性匹配的元素！
包含name属性的元素只有少量元素如：form，表单元素，iframe,和 img元素！
getElememtsByName //返回的是nodeList对象
3、getElememtsByTagName
选择指定标签的元素名称的元素！
var span = document.getElementsByTagName('span');
类似于getElememtsByName，getElememtsByTagName返回也是nodeList元素对象。
html标签是不区分大小写的，所以getElememtsByTagName也是不区分大小写的查找元素的！
查找元素的后代元素
var p = document.getElementsByTagName('p');//查找p元素
var p_span = p.getElementsByTagName('span');//查找p元素下span元素
获取指定name属性的表单元素
document.testFrom;//获取表单名称为testFrom的表单
document.forms.testFrom;//获取表单名称为testFrom的表单或者id为testForm的元素
getElementsByTagName和getElememtsByName，返回的都是nodeList对象
而对于document.images和document.forms,他们返回的是HTMLCollection对象，这些对象只有只读属性，他们有length属性，也可以像真正的数组进行索引
但是只是读而不是写！
如下代码
for(var i=0;i<document.images.length;i++){//循环所有img对象
document.images[i].style.display = 'none';//隐藏他们
}
4、通过css类来调用元素
document.getElememtsByClassName();//基于class的名字来获取元素
例子：
var waring = document.getElementsByClassName('waring');//获取class为waring的元素
var p = document.getElememtById('p');
var p_ch = p.getElememtsByClassName('fat error');//在ID为p的元素下面找到类名为fat和error，参数的里面类名顺序不区分，通过空格分割。
注明：
除了IE8以下的版本的浏览器，其他浏览器都实现了getElememtsByClassName方法！
5、节点树node对象
parentNode 指定元素的父元素节点，没有父节点返回null
childNodes 只读的类数组对象，它是该节点的子节点的实时表示！
firstChild,lastChild 该节点的子节点的第一个子节点和最后一个子节点！
nextSibling，previoursSlibing 该节点的子节点的下一个和上一个兄弟节点！
nodeType 节点的类型(9)document节点（1）element节点，（3）text节点，（8）commount节点。。
nodeValue 节点的值 text节点和comment节点的内容
nodeName 节点的名称 大写
例子：
document.childNodes[0].childNodes[1];//document节点的子节点的第一个节点下的第二个子节点
document.firstChild.firstChild.nextSibling;//document节点的第一个子节点的第一个子节点的下一个兄弟节点！
6、element
element节点的children属性类似childNodes对象，不同的是children属性只包含element元素！
例子：
可移植的文档遍历函数
/*
返回元素e第n层父元素
如果不存在此类祖先或者祖先元素不是element类型，返回null
如果n为0 返回自己
如果n为1或者省略返回父元素
*/
function parent(e,n){
if(n == undefined) n = 1;
while(n-- && e) e = e.parentNode;
if(!e || e.nodeType != 1) return null;
return e;
}
/**
* Return the nth sibling element of Element e.
* If n is postive return the nth next sibling element.
* If n is negative, return the -nth previous sibling element.
* If n is zero, return e itself.
*/
function sibling(e,n) {
while(e && n !== 0) { // If e is not defined we just return it
if (n > 0) { // Find next element sibling
if (e.nextElementSibling) e = e.nextElementSibling;
else {
for(e=e.nextSibling; e && e.nodeType !== 1; e=e.nextSibling)
/* empty loop */ ;
}
n--;
}
else { // Find the previous element sibling
if (e.previousElementSibing) e = e.previousElementSibling;
else {
for(e=e.previousSibling; e&&e.nodeType!==1; e=e.previousSibling)
/* empty loop */ ;
}
n++;
}
}
return e;
}
/**
* Return the nth element child of e, or null if it doesn't have one.
* Negative values of n count from the end. 0 means the first child, but
* -1 means the last child, -2 means the second to last, and so on.
*/
function child(e, n) {
if (e.children) { // If children array exists
if (n < 0) n += e.children.length; // Convert negative n to array index
if (n < 0) return null; // If still negative, no child
return e.children[n]; // Return specified child
} // If e does not have a children array, find the first child and count
// forward or find the last child and count backwards from there.
if (n >= 0) { // n is non-negative: count forward from the first child
// Find the first child element of e
if (e.firstElementChild) e = e.firstElementChild;
else {
for(e = e.firstChild; e && e.nodeType !== 1; e = e.nextSibling)
/* empty */;
}
return sibling(e, n); // Return the nth sibling of the first child
}
else { // n is negative, so count backwards from the end
if (e.lastElementChild) e = e.lastElementChild;
else {
for(e = e.lastChild; e && e.nodeType !== 1; e=e.previousSibling)
/* empty */;
}
return sibling(e, n+1); // +1 to convert child -1 to sib 0 of last
}
}
7、设置和获取非标准的HTML属性
getAttribute()和setAttribute()方法！查询和设置非标准的html属性。
element类型还设置了另外两个方法，hasAttribute()和removeAttribute(),用来检测属性是否存在，和删除属性。
8、获取元素的文本内容
// Return the plain-text content of element e, recursing into child elements.
// This method works like the textContent property
function textContent(e) {
var child, type, s = ""; // s holds the text of all children
for(child = e.firstChild; child != null; child = child.nextSibling) {
type = child.nodeType;
if (type === 3 || type === 4) // Text and CDATASection nodes
s += child.nodeValue;
else if (type === 1) // Recurse for Element nodes
s += textContent(child);
}
return s;
}
9、创建节点
创建新的element节点可以使用createElement()方法。给元素传递标签名字，对html文档来说该名字不区分大小写，对XML文档则区分大小写！
text节点的创建的方式类似
如：var newnode = document.createTextNode('dsjfhdsf sfdfhsdfsdjfh sdjhf');
9.1复制节点创建节点！
每一个节点都有cloneNode方法来返回一个该节点的一个全新的副本。给方法传递参数true也能够递归的复制所有后代的子节点，或传递一个一个false
只是进行一个浅复制。
9.2 插入节点
一旦有了一个节点就可以用node方法appendChild或者insertBefore()将他插入到文档中。appendChild()是在需要插入Element节点上调用的
，它插入到指定节点成为那个节点的最后一个子节点！
insertBefore()和appendChild()类似，它传入两个参数，第一个参数是待插入的节点，第二个参数是已经存在的节点。新节点将插入到该节点的前面。
该方法应该是在新节点的父节点上调用的！第二个参数必须是该父节点的子节点，如果第二个参数为null,则它和appendChild类似！
/*将节点插入到父节点指定的位置中*/
function insertAt(parent,child,n){
if(n<0 || n > parent.childNodes.length) throw new Error('invalid index');
else if(n == parent.childNodes.length) parent.appendChild(child);
else{
parent.insertBefore(child,parent.childNodes[n]);
}
}
9.3 表格行的排序
// 根据指定表格每行指定的第n个单元格的内容对表格内容进行排序
// 如果存在比较函数则使用它如果没有则按照字母表进行排序
function sortrows(table, n, comparator) {
var tbody = table.tBodies[0]; // 第一个<tbody> 可能是隐式创建的
var rows = tbody.getElementsByTagName("tr"); // 查找tbody下所有行
rows = Array.prototype.slice.call(rows,0); // 真实数组中的快照 // 基于第n个单元格的内容进行排序
//sort() 方法用于对数组的元素进行排序。
rows.sort(function(row1,row2) {
var cell1 = row1.getElementsByTagName("td")[n];
var cell2 = row2.getElementsByTagName("td")[n];
var val1 = cell1.textContent || cell1.innerText;
var val2 = cell2.textContent || cell2.innerText;
if (comparator) return comparator(val1, val2);
if (val1 < val2) return -1;
else if (val1 > val2) return 1;
else return 0;
}); // 添加排序好的行添加到tobody的最后
for(var i = 0; i < rows.length; i++) tbody.appendChild(rows[i]);
} // 查找表格中的th元素(假设只有一行)
// 并且使他们可以点击
//以便点击该标题进行排序
function makeSortable(table) {
var headers = table.getElementsByTagName("th");
for(var i = 0; i < headers.length; i++) {
(function(n) {
headers[i].onclick = function() { sortrows(table, n); };
}(i));
}
}
9.4 删除和替代节点
removeChild() 是从文档树种删除一个节点。此方法只能在待删除的节点的父节点上调用；
例如：节点n的删除是这样
n.parentNode.removeChild(n);
replaceChild() 删除一个子节点并用新的子节点来替代，同样是在父节点上调用此方法！
n.parentNode.replaceChild(document.createTextNode('fgdfg'),n);
replaceChild()函数的另一个用法
//用一个<b>元素替换元素n,并让n成为b的子元素
function embe(n){
if(typeOf n == 'string'){//如果n为字符串则当做传入元素的ID使用
n = document.getElememtById(n);
}
var b = document.createElement('b');
n.parentNode.replaceChild(b,n);
b.appendChild(n);
}
9.5 使用innerHTML实现outerHTML
// Implement the outerHTML property for browsers that don't support it.
// Assumes that the browser does support innerHTML, has an extensible
// Element.prototype, and allows getters and setters to be defined.
(function() {
// If we already have outerHTML return without doing anything
if (document.createElement("div").outerHTML) return; // Return the outer HTML of the element referred to by this
function outerHTMLGetter() {
var container = document.createElement("div"); // Dummy element
container.appendChild(this.cloneNode(true)); // Copy this to dummy
return container.innerHTML; // Return dummy content
} // Set the outer HTML of the this element to the specified value
function outerHTMLSetter(value) {
// Create a dummy element and set its content to the specified value
var container = document.createElement("div");
container.innerHTML = value;
// Move each of the nodes from the dummy into the document
while(container.firstChild) // Loop until container has no more kids
this.parentNode.insertBefore(container.firstChild, this);
// And remove the node that has been replaced
this.parentNode.removeChild(this);
} // Now use these two functions as getters and setters for the
// outerHTML property of all Element objects. Use ES5 Object.defineProperty
// if it exists and otherwise fall back on __defineGetter__ and Setter__.
if (Object.defineProperty) {
Object.defineProperty(Element.prototype, "outerHTML", {
get: outerHTMLGetter,
set: outerHTMLSetter,
enumerable: false, configurable: true
});
}
else {
Element.prototype.__defineGetter__("outerHTML", outerHTMLGetter);
Element.prototype.__defineSetter__("outerHTML", outerHTMLSetter);
}
}());
10、浏览器窗口的滚动条的位置
除了IE8及更早的版本以外,window对象的pageXOffset 和 pageYOffset属性在所有的浏览器中指代浏览器窗口的滚动条的位置。
IE和所有现代的浏览器也可以通过scrollLeft和scrollTop属性来获得浏览器的滚动条的位置。正常情况下一般是通过
document.documentElement来获取这些值，但是在怪异模式下必须在document.body下去获取这些值
//查询窗口滚动条的位置
function getScrollOffset(w){
w = w || window;
//除了IE8及更早的版本以外
if(w.pageXOffset != null){
return {x:w.pageXOffset,y:w.pageYOffset};
}
//对标准模式下IE（或任何浏览器）
var d = w.document;
if(document.compatMode == 'CSS1Compat'){
return {x:d.documentElement.scrollLeft,y:d.documentElement.scrollTop};
}
//如果是怪异模式下
return {x:document.body.scrollLeft,y:document.body.scrollTop};
}
11、浏览器视口的大小
利用滚动偏移量来查询视口的大小在IE8及更早的版本无法获取，而且在IE下还有判定当前文档是在怪异模式还是普通模式！
//获取浏览器视口的大小
function getViewPortSize(w){
w = w || window;
if(w.innerWidth != null ){
return {w:w.innerWidth,h:w.innerHeight};
}
//对标准模式下IE（或任何浏览器）
var d = w.document;
if(document.compatMode == 'CSS1Compat'){
return {x:d.documentElement.clientWidth,y:d.documentElement.clientHeight};
}
//如果是怪异模式下
return {x:document.clientWidth.scrollLeft,y:document.body.clientHeight};
}
12、查询元素的几何尺寸
查询元素几何尺寸和位置最简单的方法是就是调用getBoundingClientRect()方法，它不要参数返回一个有left,right,top和bottom属性的对象。
这个方法返回的是元素在视口坐标中的位置。
var box = e.getBoundingClientRect();//获取元素在视口中的位置
var offset = getScrollOffset();//获取滚动条滚动的位置
var x = box.left + offset.x;//计算出元素在文档中的x的位置
var y = box.top + offset.y;//计算出元素在文档中的y的位置
//很多浏览中getBoundingClientRect();返回的方法还包含width和height属性，但在原始的IE中没有实现
//下面计算元素的宽度和高度
var box = e.getBoundingClientRect();
var w = box.width || (box.right-box.left);
var h = box.height || (box.top - box.bottom);
//getBoundingClientRect();返回的数据包含元素的内边距和边框，但不包含外边距。
//getBoundingClientRect();它指定返回的是块级元素的数据，如果要返回的是内联元素的数据时候使用getClientRect();
//注意：getBoundingClientRect()和getClientRect()返回的数据不是实时的，它只是最初的一个快照而已。
13、滚动
window.scrollTo();接受一个点的x和y坐标并作为滚动条的偏移量来设置滚动条。
window的scrollBy()和scroll()和scrollTo类似，但它的参数是相对的，是在当前滚动条的位置上进行增加。
例如：
javascript:void setInterval(function(){window.scrollBy(0,10)},500);
让浏览器滚动到指定元素的位置
box.scrollIntoView();//此方法和锚链接类似
默认情况下它与元素的上边距靠近，如果只传递false做为参数的时候，它将试图与元素的下边缘靠近！
getBoundingClientRect在所有当代的浏览器中都有定义，但在更老的浏览器中不能使用它！
这里介绍如下方法获取
任何html元素都有offsetWidth和offsetHeight属性，此方法返回元素的宽高，包括边框和内边距不包含外边距
另外offsetLeft，offsetTop返回的是元素x,y坐标,对于很多元素该值就是元素在文档中的位置。但对于已经定位的元素的后代元素和
其他的一些元素，如（表格单元），这些元素返回的都是相对于父元素的位置！
//获取元素的位置（计算元素的文档位置）
function getElementPos(e){
var x = 0; var y = 0;
while(e != null){
x += e.offsetLeft;
y += e.offsetTop;
e = e.offsetParent;
}
return {x:x,y:y};
}
//获取元素的视口的位置
function getElementViewPos(elt){
var x = 0; var y = 0;
for(var e = elt;e!=null;e = offsetParent){
x += e.offsetLeft;
y += e.offsetTop;
}
for(var e=elt.parentNode;e!=null && e.nodeType == 1;e = e.parentNode){
x -= e.scrollLeft;
y -= e.scrollTop;
}
return {x:x,y:y};
}
14、表单
要明确选取一个表单元素可以索引表单对象的elements属性
document.forms.address.elements[0]
document.forms.address.street
<form name="shopping">
<label><input type="radio" name="method"/>first</label>
<label><input type="radio" name="method"/>sec</label>
<label><input type="radio" name="method"/>thr</label>
</form>
对于该表单元素数组可以采用如下的方式获取：
var methods = document.forms.shopping.elements.method;
遍历数组查询已经被选中的元素
var shopmet;
for(var i=0;i < methods.length;i++){
if(methods[i].checked){
shopmet = methods[i].value;
}
}
javascript方法有两个方法submit()和reset(),用来提交表单和重置表单数据！
15、可编辑的html内容
有两种方法启用html的编辑功能。
其一：设置任何html标签的 contenteditable属性；
其二：设置对应元素的javascript contenteditable
这都将使得该元素变成可编辑的状态。
例如：
<div contenteditable>
click it edit
</div>
将document.designMode属性设置为字符串‘on’时候使得整个文档都是可以编辑的，设置为off将恢复为只读的模式！