dom操作

  1 1.滚动条位置查询
  2     document.documentElement.scrollLeft;
  3     document.documentElement.scrollTop;
  4 
  5 2.document,element,text是node的子类
  6     节点树的根部是document
  7 
  8     document.getElementById("")//id值是唯一的
  9 
 10     document.getElementByName("")
 11     //根据name属性选取元素，返回一个NodeList对象（表现为一个包含若干Element对象的只读数组
 12     //name属性只在少数标签中使用，包括表单,iframe,img
 13 
 14     getElementByTagName()
 15     //document和element下都定义了这个函数
 16     getElementByClassName()
 17     //根据类名选择元素
 18     querySelector()
 19     //匹配css选择器字符串，返回第一个匹配的node
 20     querySelectorAll()
 21     //匹配css选择器字符串，返回一个nodelist
 22 
 23     jQuery将这一选择器集成进了 函数$()中
 24         而它的CSS选择器代码已经作为一个独立的标准库提出来并发布了，名称为Sizzle
 25 
 26 3.操作node对象
 27     parentNode//该节点的父节点
 28     childNodes//只读类数组对象，是该节点子节点的实时表示
 29     firstChild和lastChild//第一个子节点和最后一个子节点。如没有子节点则为null
 30     nextSibling/previousSibling//该节点的兄弟节点中的前一个和下一个。具有相同父节点的两个节点为兄弟节点
 31     nodeType//返回值为一个数字
 32         //其中1：Element,3:Text,8:comment注释, 9:document,11:documentFragment
 33     nodeValue//text和comment节点的文本内容，对其他节点使用返回null
 34     nodeName//元素的标签名，以大写形式表示
 35 
 36 4.针对element的API
 37     element.children//返回一个Elementlist，但是只包含element节点
 38     element.firstElementChild
 39     element.lastElementChild//只访问元素节点
 40 
 41     nextElementSibling
 42     previousElementSibling//只代表兄弟元素节点
 43 
 44     childElementCount//子元素的数量。返回值和children.length相等
 45 
 46 5.属性
 47     element.attr或者element["str"]
 48         用对象属性访问方式直接访问元素的属性
 49 
 50     element还定义两个函数
 51     getAttribute()
 52     setAttribute()来设置和查询非标准的element属性
 53 
 54     html5对于非标准属性的解决方案
 55         <span class="sparkline" data-ymin="0" data-ymax="10"></span>
 56 
 57         这样在获取span节点后
 58         var span=document.getElementByTagName("sparkline")[0];
 59         可以利用span.dataset.ymin 直接访问定义的属性//
 60 
 61 6.元素的内容
 62     innerHTML：是element的一个属性，作为字符串标记返回该元素的内容。
 63     outerHTML：同样是element的属性。返回的字符串包含标签头尾,只有element定义了outerHTML
 64         且对outerHTML作修改时，元素本身会被新的内容替代
 65 
 66     作为纯文本的元素内容：
 67     paraElement.textContent
 68     paraElement.innerText  //仅IE支持
 69 
 70 7.创建，插入和删除节点
 71     var js=document.createElement("script")
 72     js.src=url;
 73     document.head.appendChild(js);//将一个脚本添加进head标签内
 74 
 75     insertBefore(new,exist);//将new节点插入到exsit节点之前，该方法实在exist的父节点上调用
 76     function insertAt(parentNode,childNode,n){
 77         if(n<0||n>parentNode.childNodes.length){throw new Error("不存在的索引‘n’")}
 78             else if(n===parentNode.childNodes.length){parentNode.appendChild(childNode);}
 79                 else{
 80                     parentNode.insertBefore(childNode,parentNode.childNodes[n]);
 81                 }
 82     }//一个插入节点的例子
 83 
 84 
 85     删除节点：removeChild()
 86     该方法在想要删除的节点的父节点上调用
 87         其用法：child.parentNode.removeChild(child);
 88 
 89     替换节点：replaceChild(new,child);
 90         child.parentNode.removeChild(document.createElement(),child);
 91 
 92 8. 使用DocumentFragment
 93     documentFragment是一种特殊的Node，它作为其它节点的一个临时容器
 94     var frag=document.createDocumentFragment();
 95     frag容器存储一系列的node，但是可用作replaceChild,removeChild,insertBefore,appendChild的参数
 96 
 97 9.文档的几何尺寸
 98     document.documentElement{
 99         clientHeight,clientWidth    当前视口的尺寸
100     }
101 
102     offsetLeft,clientLeft,scrollLeft    
103 
104         父级元素未定位时，是offsetparent是body
105         父级元素position:absolute或者relative时，offsetparent就是这个父级元素
106             //absolute和relative的区别:absolute定位不存在与其原定位置，而relative定位会占据其原有位置  从其原有位置开始偏移
107 
108 10.html表单
109     <form>---<input><select><button>
110 
111     form的属性(property)
112     action,encoding,method,target控制了表单是如何来提交数据到web服务器并如何显示的
113     js之前，要用专门的<input type="submit">和<input type="reset">来提交和重置表单
114         不过js给form对象添加了方法 submit()和reset()调用方法可以完成同样的工作
115 
116     表单元素如input，共有的属性
117         type 标识表单元素的类型，只有option没有这个值
118         form 对表单元素的归属表单form的只读引用
119         name 只读的字符串，定义表单元素的name；在与服务器交互时用处很大
120         value 与name属性对应的“值”
121 
122     表单和元素的事件处理程序
123         onsubmit：侦测表单提交，只能通过submit按钮触发，form.submit()函数并不会触发该事件
124         onreset:侦测表单重置，触发也只能通过reset按钮
125 
126         onclick:
127         onchange:当用户改变表单元素的所代表的的值时，他们会触发change事件，值得注意的是，该事件仅在用户输完值并切换焦点focus时才会触发，而不是输入一个值马上触发！
128