javascript脚本化文档
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将恢复为只读的模式！
