6,DOM元素的查找
用id选择元素
用tagName选择元素
用className选择元素
选出所有元素
利用if做筛选
封装为函数
function getByClass(oParent, sClass){
var aEle=oParent.getElementsByTagName('*');
var aResult=[]; //可能存在多个,放在数组中
var i=0;
for(i=0;i
if(aEle[i].className==sClass){
aResult.push(aEle[i]);
}
}
return aResult;
}
window.onload=function (){
var oUl=document.getElementById('ul1');
var aBox=getByClass(oUl, 'box');
var i=0;
for(i=0;i
aBox[i].style.background='yellow';
}
}
7,创建、插入和删除元素
创建DOM元素
createElement(标签名) 创建一个节点
appendChild(节点)
追加一个节点
例子:为ul插入li
window.onload=function (){
var oBtn=document.getElementById('btn1');
var oTxt=document.getElementById('txt1');
var oUl=document.getElementById('ul1');
oBtn.onclick=function () {
var oLi=document.createElement('li');
oLi.innerHTML=oTxt.value;
oUl.appendChild(oLi);
}
}
InnerHTML是一个标签内部的东西
这里是标签内部的东西,存储在innerHTML中
插入元素
insertBefore(节点, 原有节点) 在已有元素前插入
例子:倒序插入li
window.onload=function (){
var oBtn=document.getElementById('btn1');
var oTxt=document.getElementById('txt1');
var oUl=document.getElementById('ul1');
oBtn.onclick=function () {
var oLi=document.createElement('li');
var aLi=oUl.getElementsByTagName('li');
oLi.innerHTML=oTxt.value;
if(aLi.length==0){
oUl.appendChild(oLi);
}
else{
oUl.insertBefore(oLi, aLi[0]);
}
}
}
删除DOM元素
removeChild(节点) 删除一个节点
例子:删除li
window.onload=function (){
var aA=document.getElementsByTagName('a');
var oUl=document.getElementById('ul1');
var i=0;
for(i=0;i
aA[i].onclick=function () {
oUl.removeChild(this.parentNode);
}
}
}
4,事件流
事件像冒泡一样从DOM层次结构的底层往上一级级升
事件处理:避免事件冒泡带来的干扰
window.onload=function (){
var oBtn=document.getElementById('btn1');
var oDiv=document.getElementById('div1');
oBtn.onclick=function (ev){
var oEvent=ev||event;
oDiv.style.display='block';
滚动位置
鼠标跟随改进:
document.onmousemove=function (ev){
var oEvent=ev||event;
var oDiv=document.getElementById('div1');
var scrollTop =document.documentElement.scrollTop || document.body.scrollTop;
var scrollLeft=document.documentElement.scrollLeft || document.body.scrollLeft;
使用鼠标点击留言:
window.onload=function (){
var oBtn=document.getElementById('btn1');
var oTxt1=document.getElementById('txt1');
var oTxt2=document.getElementById('txt2');
弹出自定义右键菜单:
document.oncontextmenu=function (ev){
var oEvent=ev||event;
var oUl=document.getElementById('ul1');
var scrollTop =document.documentElement.scrollTop || document.body.scrollTop;
var scrollLeft=document.documentElement.scrollLeft || document.body.scrollLeft;
侧边栏例子:
window.onscroll=function (){
var oDiv=document.getElementById('div1');
var scrollTop=document.documentElement.scrollTop||document.body.scrollTop;
var t=(document.documentElement.clientHeight-oDiv.offsetHeight)/2;