DOM、BOM相关方法及属性

来源：互联网发布：淘宝短信轰炸机编辑：程序博客网时间：2024/06/03 18:50
01 getElementsByClassName-1

1.getElementsByClassName
<!DOCTYPE html><html><head><meta charset="UTF-8"><title>1.getElementsByClassName</title></head><body><ul id="ul1"><li>keke</li><li class='box'>zoe</li><li>jame</li><li class='box box2'>ande</li></ul><ul id="ul2"><li>keke</li><li class='box'>zoe</li><li>jame</li><li class='box box2'>ande</li></ul><div id="div1"><p class="box">xp</p></div><script type="text/javascript">//页面元素加载完毕时，执行的操作window.onload=function(){var oUl1=document.getElementById('ul1');var oUl2=document.getElementById('ul2');var aLi=getElementsByClassName(document,'li','box');//获取页面中所有的元素alert(aLi.length);//打印元素中box的个数//循环当前的for(var i=0;i<aLi.length;i++){aLi[i].style.background='red';}function getElementsByClassName(parent,tagName,className){var aEls=parent.getElementsByTagName(tagName);//获取页面中所有的元素var arr=[];//定义一个数组存储页面中的元素for (var i=0;i<aEls.length;i++) {//1.判断如果元素用className=box，即追加//if(aEls[i].className==className){//arr.push(aEls[i]);//}//2.解决类名包含box和其他类样式的问题var aClassName=aEls[i].className.split(' ');for (var j=0;j<aClassName.length;j++) {if(aClassName[j]==className){arr.push(aEls[i]);}}}return arr;}}</script></body></html>

02 addClass,removeClass方法
<!DOCTYPE html><html><head><meta charset="UTF-8"><title>addClass,removeClass的用法</title></head><body><div id="div1" class="box"></div><div id="div2" class="box"></div><script type="text/javascript">window.onload=function(){var oDiv=document.getElementById('div1');addClass();function addClass(obj,className){if(obj.className==''){obj.className=className;}else{var arrClassName=obj.className.split('');var _index=arrIndexof(arrClassName,className);if(_index==-1){//如果要添加的class在原来的class中不存在obj.className+=' '+className;}//如果要添加的class在原来的class中存在}}function removeClass(obj,className){//如果原来有classif (obj.className!='') {var arrClassName=obj.className.split('');var _index=arrIndexof(arrClassName,className);//如果有我们要移除的classif(_index!=-1){arrClassName.splice(_index);obj.className=arr.className.join(' ');}}//如果原来没有class}function arrIndexof(arr,v){for (var i=0;i<arr.length;i++) {if (arr[i]==v) {return i;} }return -1;}}</script></body></html>

03 表格操作
1.表格的操作
<!DOCTYPE html><html><head><meta charset="UTF-8"><title>3.表格的操作</title></head><body><table border="1px" id="tab1" width="100%"><thead><tr><th>编号</th><th>姓名</th><th>性别</th><th><a href="javascript:;">操作</a></th></tr></thead><!--tbody不写会默认添加上去的--><tbody><tr><td>1</td><td>leo</td><td>男</td><td><a href="javascript:;">删除</a></td></tr><tr><td>2</td><td>mini</td><td>女</td><td><a href="javascript:;">修改</a></td></tr></tbody></table><script type="text/javascript">window.onload=function(){var oTab=document.getElementById('tab1');//获取表格元素//获取第二个tr中第二个td的值//alert(oTab.children[0].children[1].children[1].innerHTML);//mini/* 属性 tHead   :表格头 tBodies :表格正文 tFoot :表格尾 rows :行 cells:列 */alert(oTab.tBodies[0].rows[1].cells[1].innerHTML);//mini}</script></body></html>

1.表格数据的操作
<!DOCTYPE html><html><head><meta charset="UTF-8"><title>表格的操作</title></head><body><table border="1px" id="tab1" width="100%"><thead><tr><th>编号</th><th>姓名</th><th>性别</th><th>操作</th></tr></thead><tbody></tbody></table><script type="text/javascript">window.onload=function(){var data=[{id:1,username:'leo',sex:'男'},{id:2,username:'小美',sex:'女'},{id:3,username:'森森',sex:'男'},{id:4,username:'老司机',sex:'男'},];var oTab=document.getElementById('tab1');//获取表格元素var oTbody=oTab.tBodies[0];for (var i=0;i<data.length;i++) {var oTr=document.createElement('tr');//创建tr标签var oTd=document.createElement('td');//创建td标签oTd.innerHTML=data[i].id;oTr.appendChild(oTd);//隔行变色if (i%2==0) {oTr.style.background='white';} else{oTr.style.background='gray';}//添加姓名var oTd=document.createElement('td');//创建td标签oTd.innerHTML=data[i].username;oTr.appendChild(oTd);//添加性别var oTd=document.createElement('td');//创建td标签oTd.innerHTML=data[i].sex;oTr.appendChild(oTd);//添加性别var oTd=document.createElement('td');//创建td标签//oTd.innerHTML=' ';oTr.appendChild(oTd);var oA=document.createElement('a');oA.innerHTML='删除';oA.href='javascript:;';oA.onclick=function(){oTbody.removeChild(this.parentNode.parentNode);for (var i=0;i<oTbody.rows.length;i++) {if (i%2==0) {oTbody.rows[i].style.background='white';} else{oTbody.rows[i].style.background='gray';}}}oTd.appendChild(oA);oTbody.appendChild(oTr);}}</script></body></html>

04 表单操作
<!DOCTYPE HTML><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>表单元素的获取操作</title></head><body><form id="form1">    <input type="text" id="text1" name="username" value="" />    <input type="radio" name="sex" value="男" />男        <input type="radio" name="sex" value="女" checked />女                <input type="checkbox" name="aihao" value="电影" />电影        <input type="checkbox" name="aihao" value="音乐" checked />音乐        <input type="checkbox" name="aihao" value="体育" />体育 <select name="city" value="">        <option>请选择城市</option>            <option value="北京">北京</option>            <option value="上海" selected>上海</option>            <option value="广州">广州</option>            <option value="深圳">深圳</option>       </select>        <input type="button" value="按钮" id="btn" />        <input type="submit" value="提交" /></form>    <script>window.onload = function() {var oForm = document.getElementById('form1');//alert( oForm.username.value );//onchange ：当值发生改变的时候触发/* * username:当光标离开的时候如果内容有变化就触发 * radio:标准下点击的时候值变了就会触发 *  非标准下焦点离开的时候如果离开了 */oForm.username.onchange=function(){alert(this.value);}oForm.sex[0].onchange=function(){alert(this.value);}//与被选中的值相关alert(oForm.city.value);oForm.city.onchange=function(){alert(this.value);}oForm.btn.onclick=function(){alert(oForm.sex[0].checked);//radiofor (var i=0;i<oForm.sex.length;i++) {if (oForm.sex[i].checked) {alert(oForm.sex[i].value+'选中了');} else{alert(oForm.sex[i].value+'未选中');}}for (var i=0;i<oForm.aihao.length;i++) {if (oForm.aihao[i].checked) {alert(oForm.aihao[i].value+'选中了');} else{alert(oForm.aihao[i].value+'未选中');}}}}</script></body></html>
05 表单事件
<!DOCTYPE HTML><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>表单事件</title><script>window.onload = function() {var oForm = document.getElementById('form1');//onsubmit : 当表单被提交的时候触发oForm.onsubmit = function() {if(this.username.value == '') {alert('请填写用户名');return false;}}//onreset : 当表单要重置的时候触发oForm.onreset = function() {//alert(1);//confirm('你确定要重置？');//alert( confirm('你确定要重置？') );//return true;/*if ( confirm('你确定要重置？') ) {return true;} else {return false;}*/return confirm('你确定要重置？');}confirm('你确定要重置？');document.title = 1;}</script></head><body><form id="form1" action="http://www.baidu.com"><input type="text" name="username" /><input type="password" name="password" /><!--<input type="button" value="提交" />--><input type="submit" value="提交" /><input type="reset" value="重置" /></form></body></html>
06 BOM的概念及窗口事件
<!DOCTYPE HTML><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>BOM介绍</title></head><body><input type="button" value="打开新窗口" />    <input type="button" value="关闭窗口" />    <input type="button" value="关闭新窗口" />    <script type="text/javascript">    window.onload=function(){    var aInput=document.getElementsByTagName('input');    var opener=null;    /*     * open(页面的地址url,打开的方式):打开一个新窗口     * 如果url为空，则默认打开一个空白页面     * 如果打开方式为空，默认为新窗口方式打开     * 返回值：返回新打开的窗口的window对象     */    aInput[0].onclick=function(){    window.open('http://www.baidu.com','_self');    opener=window.open();    alert(opener==window);    open.document.body.style.background='red';    }    /*     * close()方法：关闭窗口     */    aInput[1].onclick=function(){window.close();//1.firefox:默认无法关闭 chrome:默认直接关闭    }    /*     * 关闭新窗口     */    aInput[2].onclick=function(){    opener.close();//可以关闭在本窗口中通过js方法打开的新窗口    }    }    </script></body></html>BOM常用属性window.navigator.userAgent：打印浏览器信息window.location：浏览器地址信息window.location.href = window.location内容window.location.search = url?后面的内容window.location.hash = url#后面的内容
07 文档宽高及窗口事件
<!DOCTYPE HTML><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>文档宽高及窗口事件</title></head><body style="height:2000px;"><div id="div1" style="width:100px;height:100px;border: 1px solid red; overflow: -auto; padding: 10px;"><div style="height: 600px;width: 90px; background: red;"></div></div><script>window.onload = function() {alert('可视区的高度' + document.documentElement.clientHeight);alert('可视区的高度' + document.documentElement.clientWidth);document.onclick = function() {//滚动距离//alert( document.documentElement.scrollTop );//alert( document.body.scrollTop );//document.documentElement.scrollTop = 100//var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;//alert(scrollTop)var oDiv = document.getElementById('div1');//scrollHeight : 内容实际宽高alert(oDiv.scrollHeight);}}</script></body></html>文档的高度document.documentElement.offsetHeightdocument.body.offsetHeightoffsetHeight和offsetWidth，获取网页内容高度和宽度(包括滚动条等边线，会随窗口的显示大小改变)。a)值offsetHeight = clientHeight + 滚动条 + 边框。b)浏览器兼容性var w= document.documentElement.offsetWidth    || document.body.offsetWidth;var h= document.documentElement.offsetHeight    || document.body.offsetHeight;
0 0