一、找到元素
document.getElementById("id"); 根据id找，最多找一个；
var a=document.getElementById("id"); 将找到的元素放在变量中；
document.getElementByName("name"); 根据name找，找出来的是数组；
document.getElementByTagName("name"); 根据标签名找，找出来的是数组；
document.getElementByClassName("name"); 根据classname找，找出来的是数组；
二、操作元素
1、获取内容
2、设置内容
<body> <div id="me"><b>试试吧</b></div> <input type="button" value="提交" onclick="tijiao()"/> </body> </html> <script> function tijiao() { var get=document.getElementById("me"); alert(get.innerHTML); alert(get.innerText); alert(get.outerHTML); get.innerHTML="<font color='red'>hello world</font>"; } </script>
三、操作属性
首先利用元素的id找到该元素，存于一个变量中：var a = document.getElementById("id");
然后可以对该元素的属性进行操作：
a.setAttribute("属性名","属性值"); 设置一个属性，添加或更改都可以
a.getAttribute("属性名"); 获取属性的值
a.removeAttribute("属性名"); 移除一个属性
<body> 新中国成立于哪一年： <input type="text" id="question"/> <input type="button" value="提交" onclick="hanshu()"/> <input type="hidden" value="1949" id="result" /> </body> </html> <script> function hanshu() { var a=document.getElementById("question"); var a1=a.value; var b=document.getElementById("result"); var b1=b.value; if(a1==b1) { alert("答对了"); } else { alert("笨蛋"); } } </script>
四、操作样式
展示图片的自动和手动切换：
@charset "utf-8"; /* CSS Document */ * { margin:0px auto; padding:0px;} #tupian { width:900px; height:600px; background-repeat:no-repeat;} .pages { top:200px; background-color:black; background-position:center; background-repeat:no-repeat; opacity:0.3; width:50px; height:80px;} #p1 { background-image:url(%E6%9C%AA%E6%A0%87%E9%A2%98-1.png); float:left; margin:150px 0px 0px 10px;} #p2 { background-image:url(%E6%9C%AA%E6%A0%87%E9%A2%98-2.png); float:right; margin:150px 10px 0px 0px;}
<body> <div id="tupian" style="background-image:url(1089892.jpg);"> <div class="pages" id="p1" onclick="dodo(-1)"></div> <div class="pages" id="p2" onclick="dodo(1)"></div> </div> </body> </html> <script> var jpg=new Array(); jpg[0]="url(1089892.jpg)"; jpg[1]="url(1073305.jpg)"; jpg[2]="url(1089891.jpg)"; var tjimg=document.getElementById("tupian"); var xb=0; var n=0; function huan() { xb++; if(xb==jpg.length) { xb=0; } tjimg.style.backgroundImage=jpg[xb]; if(n==0) { var id=window.setTimeout("huan()",3000); } } function dodo(m) { n=1; xb=xb+m; if(xb<0) { xb=jpg.length-1; } else if(xb>=jpg.length) { xb=0; } tjimg.style.backgroundImage=jpg[xb]; } window.setTimeout("huan()",3000); </script>
