客户端Javascript学习笔记-----脚本化文档
客户端javascript的存在使得静态的HTML文档变成了交互式的Web应用。脚本化Web页面内容是javascript的核心目标。
选取文档元素
通过ID选取： var section1 = document.getElementById("ID名称");
通过名字选取元素： var radiobutons = document.getElementsByName("name");
通过标签选取元素： var spans = document.getElementsByTagName("标签名称");
通过CSS类选取元素：
HTML元素的class属性值是一个以空格隔开的列表，可以为空或包含多个标示符。
class属性通常与CSS样式表一起使用，对于组内的所有元素应用相同的样式。
HTML定义了getElementsByClassName()方法，它基于class属性值中的标示符来选取成组的文档元素，返回一个NodeList对象，该方法只需要一个参数，但是该参数字符串可以由多个空格隔开的标示符组成，标示符顺序是无关紧要的
文档结构和遍历
作为节点树的文档
Document对象、它的Element对象和文档中表示文本的Text对象都是Node对象。
Node定义了几个重要的属性：
parenNode：该节点的父节点；
childNode：只读的类数组对象，它是该节点的子节点的实时表示；
firstChild、lastChild：该节点的子节点中的第一个和最后一个。
nextSibling、previoursSibling：该节点的兄弟节点中的前一个和下一个。具有相同父节点的两个节点为兄弟节点。
nodeType：该节点的类型。9代表Document节点，1代表Element节点，3代表Text节点，8代表Comment节点，11代表DocumentFragment节点。
nodevalue：Text节点或者Comment节点的内容。
nodeNmae：元素的表签名，以大写形式表示；
作为元素树的文档
当将主要的兴趣点集中在文档中的元素上而非他们之间的文本上时,可以是用另外一个API，将文档看做是Element对象树，忽略部分文档：Text和Comment节点。
Insert title here
属性
HTML元素由一个标签和一组称为属性(attribut)的名/值对组成。
HTML属性作为Element的属性：
表示HTML文档元素的HTMLElement对象定义了读/写属性，它们映射了元素的HTML属性。
获取和设置非标准HTML属性：
Element类型还定义了getAttribute()和setAttribute()方法来查询和设置非标准的HTML属性。
var image =document.images[0];
var width =parseInt(image.getAttribute("WIDTH"));
image.setAttribute("class","nail");属性值都被看做字符串。
Element类型还定义了两个相关的方法 hasAttribute()和removeAttribute()方法，检测命名属性是否存在和完全删除属性。
数据集属性：
使用getAttribute和setAttribute来读和写非标准的属性值，文档将不再是合法有效的HTML.
HTML5提供了解决方案，在HTML5中，任意以“date-”为前缀的小写的属性名字都是合法的，这个数据集属性将不会对其元素的变现产生影响。
HTML5还在Element对象上定义了dateset的属性。该属性指代一个对象，他的各个属性对应用与去掉前缀date-的值，因此dateset.x 应该保存date-x属性的值。
创建、插入和删除节点
创建节点
创建新的Element节点可以使用Document对象的createElement()方法，给方法传递元素的标签名。
Text节点用类似的方法创建： var newnode = document.createTextNode("text node content");
另一种创建新文档节点的方法是复制已经存在的节点，每个节点都有一个cloneNode()方法来返回给节点的一个副本。给方法传递参数true也能够递归地复制所有的后代节点。
在除了IE的其他浏览器中，Document对象还定义了一个类似的方法叫ipportNode()。如果给它传递另一个文档的一个节点，它将返回一个适合本文档插入节点的副本。
插入节点
一旦有一个新节点，就可以使用Node的方法appendChild()或者insertBefore()将它插入到文档中。
appendChild()是在需要插入的Element节点上调用的，它插入指定的节点使其成为那个节点的最后一个子节点。
insertBofore()接受两个参数，第一个参数是待插入的节点，第二个参数是已存在的节点，新节点将插入到该节点的前面。该方法应该是在新节点的父节点上调用，方法的第二个参数必须是该父节点的子节点。
//将child节点插入到parent中，使其成为第n个子节点
function insertAt(parent,child,n){
if( n <0 || n > parent.childNodes.length) throw new Erroe("invalid index");
else if( n == parent.childNodes.length) parent.appendChild(child);
else parent.insertBofore(child,parent.childNodes[n]);
}
如果调用appendChild()或insertBefore()将已存在文档中的一个节点再次插入，那个节点将自动从当前的位置删除并在新的位置重新加载。
Insert title here
删除和替换节点
removeChild()方法是从文档树中删除一个节点，该方法不是在待删除的节点上调用，而是在其父节点上调用。在父节点上面调用该方法，将需要删除的子节点作为参数传递给方法，在文档中删除n节点： n.parentNode.removeChild(n);
replaceChild()方法删除一个节点并用一个新的节点取而代之。在父节点上调用该方法，第一个参数为新节点，第二个参数为需要替代的节点。
//用一个新的元素替换n节点，并使n称为该元素的子节点
function embolden(n){
//假如参数为字符串而不是节点，将其当做元素的id
if(typeof n == "string") n = document.getElementById(n);
var parent = n.parentNode;//获得n的父节点
var b = document.createElement("b");//创建一个元素
parent.replaceChild(b,n);
b.appendChild(n);//使n成为b的子节点
}使用DocumentFragment
DocumentFragment是一种特殊的Node，作为其他节点的一个临时的容器。
创建一个DocumentFragment节点： var frag = docment.createDocumentFragment();
DocumentFragment是独立的，不是任何其他文档的一部分，它的parentNode总是null。
//倒序排列节点n的子节点
function reverse(n){
//创建一个DocumentFragment作为临时的容器
var f = document.createDocumentFragment();
//从后至前循环子节点，将每个子节点移动到文档片段中，n的最后一个节点变成F的第一个子节点，注意，给f添加一个节点，给节点自动地从N中删除
while(n.lastChid) f.appendChild(n.lastChild);
//最后，将f插入到N中
n.appendChild(f);
}生成目录表
Insert title here
文档和元素的几何形状和滚动
判定一个元素的精确的几何形状，位置是非常有必要的。
文档坐标和视口坐标
元素的位置是以像素来度量的，向右代表X坐标的增加，向下代表Y坐标的增加。
有两个不同的点作为坐标系的原点：元素的X和Y坐标可以相对于文档的左上角或者相对于在其中显示文档的视口的左上角(能见的界面，如拖动滚动条)。
在顶级窗口和标签页中，“视口”只是实际显示文档内容的浏览器的一部分：不包括浏览器的”外壳“。针对框架页中显示的文档，视口是定义了框架页的