平时jQuery用习惯了，对js真的不是很熟，整理一下，顺便复习一遍。
一,获取html元素
1.getElementById()
通过对元素的id查找dom元素，这是js访问页面中的元素的方法。例子如下：
<div id='myId'>测试</div> <script> var div=document.getElementById("myId"); </script>
如果id在元素中不是唯一的，那么获得的将是第一个id。所以一般id唯一。
2.getElementsByName(name)
仅用于input的radio和checkbox等元素，返回名字为name的元素数组。例子如下：
<div name="a"></div> <input type="radio" name="a" value="1" /> 1 <br/> <input type="radio" name="a" value="2" /> 2 <br/> <input type="radio" name="a" value="3" /> 3 <script> var num=document.getElementsByName("a"); alert (num.length); //获取个数，div并不算，所以为3 </script>
3.getElementsByTagName(tagname)
返回具有tagname的元素列表数组.处理大的DOM结构会用到它。例子如下：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>try</title> <script type="text/javascript"> function getElements() { var x=document.getElementsByTagName("input"); alert(x.length); } </script> </head> <body> <input name="myInput" type="text" size="20" /><br /> <input name="myInput" type="text" size="20" /><br /> <input name="myInput" type="text" size="20" /><br /> <br /> <input type="button" onclick="getElements()" value="How many input elements?" /> </body> </html>
可是也有一些浏览器不支持，可以用以下代码重写这个方法。
function getElementsByTagName(node, tagName) { var elements = [], i = 0, anyTag = tagName === "*", next = node.firstChild; while ((node = next)) { if (anyTag ? node.nodeType === 1 : node.nodeName === tagName) elements[i++] = node; next = node.firstChild || node.nextSibling; while (!next && (node = node.parentNode)) next = node.nextSibling; } return elements; };
二,DOM操作
1.appendChild(node)
向当前对象追加节点。例子如下：
<div id="test">123</div> <script> var newdiv=document.createElement("div"); var newtext=document.createTextNode("A new div"); newdiv.appendChild(newtext); document.getElementById("test").appendChild(newdiv); </script>
上面的功能用document.getElementById("test").innerHTML="测试一下"也可实现。遗憾的是，innerHTML不属于DOM.
2,removeChild(childreference)
移除当前节点的子节点,并返回节点。例子如下：
<div id="father"><div id="child">A child</div></div> <script type="text/javascript"> var childnode=document.getElementById("child"); var removednode=document.getElementById("father").removeChild(childnode); </script>
3.cloneNode(deepBoolean)
复制并返回当前的复制节点，由于复制了原节点的id属性，所以在document树中要改ID属性，以确保ID唯一性。
4,insertBefore(newElment,targetElement) 插入新的节点
在当前节点插入一个新节点，如果targetElement为null，那新节点为最后节点。例子如下：
<body> <span id="lovespan">熊掌我所欲也!</span> </body> <script type="text/javascript"> var lovespan=document.getElementById("lovespan"); //获取id var newspan=document.createElement("span"); var newspanref=document.body.insertBefore(newspan, lovespan); newspanref.innerHTML="鱼与"; </script>
三,DOM Element常用属性
1、childeNodes
返回所有子节点对象，例子如下：
<ul id="mylist"> <li>美国</li> <li>意大利</li> <li>加拿大</li> </ul> <script> var msg="" ; var mylist=document.getElementById("mylist") for (i=0; i<mylist.childNodes.length; i++){ var li=mylist.childNodes[i]; msg+=li.innerText; } alert (msg); </script>
2,innerHTML
这是一个标准，但它并不书DOM。例子如下：
<div id="bbb"><span id="aaa">我拉</span></div> <input type=button value="点击看看"> <script language="javascript"> function change(){ document.getElementById("aaa").innerHTML= "修改修改"; } </script>
3,style
这是一个极其重要的属性，可以获取并修改每个单独的样式。例子如下：
document.getElementByTagName("body")[0].style.backgroundColor="#cccccc"
4、firstChild
返回第一个子节点
lastChild
返回最后一个子节点
parentNode
返回父节点的对象。
nextSibling
返回下一个兄弟节点的对象
previousSibling
返回前一个兄弟节点的对象
nodeName
返回节点的HTML标记名称，使用英文的大写字母，如P, FONT
5,click()
执行元素的一次点击，可以用于通过脚本来触发onClick函数来设置DIV的属性setAttribute方法:
var a=document.createElement("div"); //新建一个DIV a.id="div1"; //给新加的DIV命名 a.style.setAttribute("zIndex",2); //设置DIV叠放次序 a.style.setAttribute("textAlign",Dalign); //对齐方式 a.style.setAttribute("border","#e6e7e8 1px solid"); //边框颜色 a.style.width=divwidth; //DIV宽度 a.style.height=Dheight; //DIV高度 a.setAttribute("position","absolute"); a.style.backgroundColor=Dbgcolor; //DIV背景 a.setAttribute("z-index","2"); //DIV叠放次序 a.style.top = divtop+"px"; //DIV上边距 a.style.left = divleft+"px"; //DIV左边距 a.setAttribute("innerHTML",info10[0].firstChild.data+"<br>"+info11[0].firstChild.data); document.body.appendChild(a); //新建DIV结束 document.getElementById（'a'）.style.display="none"; //隐藏div document.getElementById（'a'）.style.disabled="true"; //不可操作
document.getElementById（'a'）.style.readOnly="true" //只读