<!DOCTYPE html> <html> <head> <meta charset="UTF-"> <title>封装getByClass函数</title> <script> //第一个参数为获取的父元素，第二个参数为class属性值。 function getByClass(oParent,aClass){ //空数组可以把找到的所有className都存放在里边，最后返回。 var aResult=[]; //通过标签名获取父元素下所有子元素。标签名不固定，所以设置为*，便于传入。 var aEle=oParent.getElementsByTagName('*'); //循环遍历返回的子元素数组 for(var i=;i<aEle.length;i++){ //如果当前子元素的className等于传入的class属性值，则将其添加到数值中。 if(aEle[i].className==aClass) aResult.push(aEle[i]); } //最后将这个数组返回 return aResult; } </script> </head> <body> <ol> <li>热点</li> <li>美食</li> <li>数码</li> <li>科技</li> <li>社会</li> <li>养生</li> </ol> <script> //封装函数的使用： //先通过id获取父元素 var aOl=document.getElementById('o'); //再调用封装好的函数传入参数，获取的父元素，子元素的class属性值 var oCol=getByClass(aOl,'col'); //最后循环遍历，设置样式 for(var i=;i<oCol.length;i++){ oCol[i].style.background='green'; } </script> </body> </html>
3、DOM操作。
获取到HTML元素之后，就可以进行相应的操作。
(1)、改变HTML
修改HTML内容的最简单的方法时使用 innerHTML 属性。innerHTML顾名思义，inner就是内部的，既然是HTML，那么就可以给里边放HTML。该属性可用于获取和替换HTML元素的内容。
语法：document.getElementById(id).innerHTML = new HTML
<body> <h>原标题</h> <script> //改变原有标题 var aH=document.getElementById('tit'); aH.innerHTML='新标题'; </script> <div></div> <script> //创建HTML内容 var oDiv=document.getElementById('div'); oDiv.innerHTML='<h>我是h标题</h><p>我是一个段落</p>'; </script> </body>
(2)、操作元素属性
修改元素属性最简单的方法就是直接修改，语法：document.getElementById(id).属性名 = new value 比如修改图片src属性的指向路径。
此外还可以通过DOM方法获取、添加、删除元素的属性。
①、getAttribute()
getAttribute()方法通过元素节点的属性名获取属性的值。
语法：elementNode.getAttribute(name) name是想要获取的元素节点的属性名
②、setAttribute()
setAttribute()方法添加一个新属性并指定值，或者把一个现有的属性设定为指定的值。
语法：elementNode.setAttribute(name,value) name是属性名，value是属性值。
③、removeAttribute()
removeAttribute()方法可删除元素的属性。
语法：elementNode.removeAttribute(name) name是属性名。
<!DOCTYPE html> <html> <head> <meta charset="UTF-"> <title>JavaScript实例</title> </head> <body> <input type="text"> <input type="button" value="按钮"> <script> var oTxt=document.getElementById('txt'); var oBtn=document.getElementById('btn'); //获取按钮value属性的值 var a=oBtn.getAttribute('value'); alert(a); //返回：按钮 oBtn.onclick=function (){ //操作元素属性有三种方法： //第一种方法 //oTxt.value='请输入文字'; //第二种方法 //oTxt['value']='请输入文字'; //第三种方法 //修改文本框value属性的值 oTxt.setAttribute('value','请输入文字'); //删除按钮type属性 oBtn.removeAttribute('type'); //删除后默认为文本框 }; </script> </body> </html>
(3)、改变CSS
改变HTML元素的CSS样式可直接使用该语法：document.getElementById(id).style.样式名 = new style
<!DOCTYPE html> <html> <head> <meta charset="UTF-"> <title>JavaScript实例</title> <style> #div{ height:px; width:px; border:px solid black; padding:px; } p{ line-height:px; text-indent:em; } </style> </head> <body> <h>HTML DOM</h> <div> <h>JS可以使网页添加动态效果并实现与用户交互的功能。</h> <p>. JS能够改变页面中所有的 HTML 元素。</p> <p>. JS能够改变页面中所有的 HTML 属性。</p> <p>. JS能够改变页面中所有的 HTML 元素的CSS样式。</p> </div> <input type="button" value="改变颜色"> <input type="button" value="改变宽高"> <input type="button" value="隐藏内容"> <input type="button" value="显示内容"> <input type="button" value="取消设置"> <script> var oDiv = document.getElementById('div'); function color(){ oDiv.style.color = 'white'; oDiv.style.fontFamily = 'Microsoft YaHei'; oDiv.style.backgroundColor = 'green'; } function hig(){ oDiv.style.width = 'px'; oDiv.style.height = 'px'; oDiv.style.border = 'px solid #ccc'; } function none(){ oDiv.style.display = 'none'; } function block(){ oDiv.style.display = 'block'; } //取消设置 function cancel(){ var clean = confirm('确定取消所有设置？'); if(clean == true){ oDiv.removeAttribute('style'); } } </script> </body> </html>
上面的代码，通过style设置的样式，都是行间样式，可以使用火狐的Firebug点击相应的按钮，就能看到所有设置的CSS样式都出现在了行间。