DOM相关方法————————————————————-
自定义getElementsByClssName—————————–
1.利用getElementsByTagName获取所有元素
2.利用split函数将得到的元素的className通过空格截断为数组,然后一一判断是否和所找的className元素相等
3.第一次找到后就退出内循环,以免给返回的数组push重复的元素
function getElementsByClassName(parent,tagname,classname){
var aElems=parent.getElementsByTagName(tagname);
var resArr=[];
for(var i = 0;i < aElems.length;i++)
{
var aClassName=aElems[i].className.split(' ');
for(var j = 0;j < aClassName.length;j++)
{
if(aClassName[j]==classname)
{
resArr.push(aElems[i]);
break;
}
}
}
return resArr;
}
//正则方法
function getByClassName(obj,classname){
var pattern = new RegExp('\\b'+classname+'\\b','i');
var aElem = obj.getElementsByTagName('*');
var result = [];
for(var i = 0; i < aElem.length; i++)
{
if(pattern.test(aElem[i].className) === true)
{
result.push(aElem[i]);
}
}
return result;
}
class的添加和删除方法————————————————————————
function arrIndexOf(arr,key){
for(var i=0;i<arr.length;i++)
{ if(arr[i]===key)
{
return i;
}
}
return -1;
}
function addClass(obj,classname){
var oldClassName=obj.className;
//obj的class是空的时候,直接赋值
if(obj.className==='')
{
obj.className=classname;
}
//obj还有其他的className的时候
else{
//判断是否和之前就有的class重复
var arrOldClass=oldClassName.split(' ');
if(arrIndexOf(arrOldClass,classname)===-1)
{//当新增class并不存在的时候
obj.className+=' '+classname;
}
//当class已存在的时候就什么都不干
}
}
function removeClass(obj,classname){
var oldClassName=obj.className;
//obj的class是空的时候,什么都不做
if(obj.className===''){}
//obj还有其他的className的时候
else{
//判断要删除的class是否存在于原来的className中
var arrOldClass=oldClassName.split(' ');
var _index=arrIndexOf(arrOldClass,classname);
if(_index!==-1)
{//如果存在,去掉数组中的这个值,然后重新拼接成字符串赋值给obj.className
arrOldClass.splice(_index,1);
obj.className=arrOldClass.join(' ');
}
//如果不存在也不用干任何事
}
}
表格元素属性———————————————————————————–
tHead : 表格头
tBodies : 表格正文
tFoot : 表格尾
rows : 行
cells : 列
用法
alert(oTab.tBodies[0].rows[1].children[0].innerHTML);
表单元素操作————————————————————————
表单中的input元素一般可以通过name属性操作
如<input type="text" name="text1" />
获取:oForm.text1 //该种方式兼容浏览器
oInp.onchange = function(){alert();}
onchange : 当值反生改变时触发
text : 在编辑完内容后,如果值改变了,才响应
radio、checkbox : 标准下点击的时候只要值变了那么就会触发
非标准下焦点【离开】的时候如果值变了就会触发
select :
单选radio : 要把供选择的radion input的name设置一致
对于单选radio多个元素同name的情况下 oForm[radioNme]返回的是一个数组
select元素 : oForm[selectName].value返回的是选中的值(有Selected属性)
判断radio、checkbox有没有被选中的值 oForm[name].checked
表单事件———————————————————————————————
onsubmit : 事件 当提交表单的时候触发 return false;能阻止触发
oForm.submit();表单提交方法
onreset : 表单重置事件
confirm( '您确定?');确认方法,弹出一个对话框,有确定和取消,会阻止后续代码
BOM相关方法及属性—————————————————————-
BOM : Browser Object Model 浏览器对象模型
window.open(窗口地址url,打开方式) 方法 打开一个新的窗口 (页面)
如果url地址为空,默认打开一个空白页
如果代开方式为空,默认为新窗口方式打开
返回值:新打开窗口的window对象
window.close(); 方法 关闭窗口
1.fiefox:默认无法关闭
2.chrome:默认直接关闭
3.IE:默认询问关闭
可以关闭本窗口中通过jS创建的窗口对象
window.navigator.userAgent ->浏览器信息 返回字符串
可用window.navigator.userAgent.indexOf('')来判断浏览器
window.location : 浏览器地址信息
window.location.href : url
window.location.search : url?后面的内容
window.location.hash : url#后面的内容
窗口尺寸———————————————————————————————–
document.documentElement//该元素是可视区
//可视区尺寸
document.documentElement.clientWidth
document.documentElement.clientHeight
//滚动条滚动距离
document.documentElement.scrollTop //非chrome
document.body.scrollTop //chrome
//兼容性方案
var scrollTop=document.documentElement.scrollTop||document.body.scrollTop;
obj.scrollHeight : 内容实际宽高(和可视宽高区别开)
ie : 如果内容没有可视区高,那么文档高就是可视区
alert( document.documentElement.offsetHeight );
window的两个事件——————————————————————————–
onscroll : 当滚动条滚动的时候触发,滚动时5ms触发一次
onresize : 当窗口大小发生变化的时候触发