If(nodes.childNodes[i].nodeType==3&&/^\s+$/.test(nodes.childNodes[i].nodeValue)){
//删除该空白文本节点,根据父节点来删除
nodes.childNodes[i].parentNode.removeChild(nodes.childNodes[i]);
}
}
returnnodes;
}
alert(getNodes(obj).firstChild.nodeName);
12.节点操作方式
insertBefore()方法可在已有的子节点前插入一个新的子节点
语法:
insertBefore(newnode,node);
参数:
newnode要插入的新节点。
node指定此节点前插入节点。
removeChild()方法从子节点列表中删除某个节点。
如删除成功,此方法可返回被删除的节点,如失败,则返回NULL。
注意:
把删除的子节点赋值给x,这个子节点不在DOM树中,但是还存在内存中。
如果要完全删除对象,给x赋null 值。
replaceChild()实现子节点(对象)的替换。
返回被替换对象的引用。
语法:
node.replaceChild(newnode,oldnew)
cloneNode(true/flase)flase:
不复制标签之间的内容,只复制标签
true:
即复制标签又复制内容
//删除空白文本之后再复制第一个子节点
//删除空白节点之后再删除第一个子节点
//新元素插入到指定元素之后。
//编写get_nextSibling 函数,获得指定节点的下一个节点。
functionget_nextSibling(n){
varx=n.nextSibling;
while(x&&x.nodeType!
=1){
x=x.nextSibling;
}
returnx;
}
varx=document.getElementsByTagName("li")[0];
document.write(x.nodeName);
document.write("=");
document.write(x.innerHTML);
vary=get_nextSibling(x);
if(y!
=null){
document.write("
nextsibling:
");
document.write(y.nodeName);
document.write("=");
document.write(y.innerHTML);
}else{
document.write("
已经是最后一个节点");
}
//编写get_previousSibling 函数,获得指定节点的上一个节点。
functionget_previousSibling(n){
varx=n.previousSibling;
while(x&&x.nodeType!
=1){
x=x.previousSibling;
}
returnx;
}
varx=document.getElementsByTagName("li")[1];
document.write(x.nodeName);
document.write("=");
document.write(x.innerHTML);
vary=get_previousSibling(x);
if(y!
=null){
document.write("
previousSibling:
");
document.write(y.nodeName);
document.write("=");
document.write(y.innerHTML);
}else{
document.write("
已经是最后一个节点");
}
13.浏览器窗口可视区域大小
获得浏览器窗口的尺寸(浏览器的视口,不包括工具栏和滚动条)的方法:
①对于IE9+、Chrome、Firefox、Opera、Safari:
window.innerHeight-浏览器窗口的内部高度
window.innerWidth-浏览器窗口的内部宽度
②对于InternetExplorer8\7\6\5:
document.documentElement.clientHeight表示HTML文档所在窗口的当前高度
document.documentElement.clientWidth表示HTML文档所在窗口的当前宽度
或者
document.body.clientHeight
document.body.clientWidth
③解决兼容问题:
Varw=document.documentElement.clientWidth
||document.body.clientWidth;
varh=document.documentElement.clientHeight
||document.body.clientHeight;
14.网页尺寸:
scrollHeight、scrollWidth获取网页内容高度和宽度
①针对IE、Opera:
scrollHeight是网页内容实际高度,可以小于clientHeight。
②针对NS、FF:
scrollHeight是网页内容高度,不过最小值是clientHeight。
也就是说网页内容实际高度小于clientHeight时,scrollHeight返回clientHeight。
③浏览器兼容性:
varw=document.documentElement.scrollWidth
||document.body.scrollWidth;
varh=document.documentElement.scrollHeight
||document.body.scrollHeight;
15.事件触发:
用户在页面上操作时(如点击按钮,鼠标滑过,鼠标点击,鼠标松开,文本框获得焦点,失去焦点等),就是事件触发。
事件模式:
内联模式,脚本模式。
①内联模式:
直接在HTML标签中添加事件。
内联模式调用函数,则函数不能放到window.onload里面,否则会找不到该函数。
内联模式违反了HTML与Javascript代码层次分离的原则。
②脚本模式:
需要先获取到元素节点对象,再针对该节点对象添加事件。
可以采用三种方式来获取节点对象:
getElementById(),getElementsByTagName(),getElementsByName()。
添加事件方式一:
用过匿名函数,可以直接触发对应的代码
box.onclick=function(){alert("nihao");};
添加事件方式二:
通过制定的函数名赋值的方式来执行函数
box.onclick=func;
funcotionfunc(){alert("nihao");}
事件处理函数:
所有的事件处理函数都会有两个部分组成,on+事件名称;
Javascript可以处理的事件种类有三种:
鼠标事件,键盘事件,HTML事件。
①鼠标事件,页面所有元素都可以触发鼠标事件;
onclick单机鼠标按钮并在松开时触发
ondblclick双击鼠标按钮时触发
onmousedown鼠标还未松开时触发
onmouseup释放鼠标按钮时触发
onmouseover鼠标移入某元素那一刻触发
onmouseout鼠标移出某元素那一刻触发
onmousemove鼠标指针在某个元素上移动时触发
②键盘事件,在键盘上按下键时触发的事件(一般由window对象或者document对象调用);
onkeydown按下键盘上某个键触发,如果按住不放,会重复触发。
onkeypress按下键盘上的字符键触发,如果按住不放,会重复触发。
onkeyup释放键盘上的某个键触发
③HTML事件,跟HTML页面相关的事件;
onload当页面完全加载完后触发
onunload当页面完全卸载完后触发
onselect当用户选择文本框(input或textarea)中的内容触发
onchange当文本框(input或textarea)内容改变且失去焦点后触发
onfocus当页面或元素获得焦点时触发
onblur当页面或元素失去焦点时触发
onsubmit当用户点击提交按钮在