javascript总结

根据层次关系访问节点

单词	含义
parentNode	返回节点的父节点
childNodes	返回子节点的集合
firstChild / firstElementChild	返回父节点的第一个字节点
lastChild / lastElementChild	返回父节点的最后一个字节点
nextSibing / nextElementSibing	返回下一个节点
previousSibing / previousElementSibing	返回上一个节点

//获取div
var div=document.getElementById("test");
//获取第一个li中的文本
var str1=div.firstChild.firstChild.innerHTML;
//获取ul标签
var ul=div.firstChild||div.firstElementChild.innerHTML;

节点操作

单词	含义
getAttribute	返回指定属性名的属性值
setAttribute	根据属性名修改属性
createElement	创建一个新节点
appendChild	向节点添加最后一个子节点
insertBefore	在已有的子节点前插入一个新的子节点
cloneNode	复制节点，为true,则改该节点的后代节点也会被克隆，为flase,则只克隆改节点本身
removeChild	删除节点
replaceChild	替换节点

//获取div
var div=document.getElementById("tu");
//删除
//div.removeChild(div.firstChild);
//替换
//div.replaceChild(div.firstChild,div.lastChild);
//创建img标签
var img=document.createElement("img");
//将img存入div中进行显示
//div.appendChild(img);
//根据用户选中的单选按钮决定显示哪一张图片
var r=document.getElementsByName("tu");
if(r[0].checked==true){
    //修改img的src属性
    img.setAttribute("src","img/15F0DED3C3D55D43C5C9CC37C497AE1B.jpg");
}else if(r[1].checked==true){
    //修改img的src属性
    img.setAttribute("src","img/hdImg_0c9cc1fa01ba3247328112f77cc9ead51560750509713.jpg");
}
//替换节点
div.replaceChild(img,div.firstChild);

//获取当前div
var div=document.getElementById("text");
//复制一个新的div
//true:复制当前节点以及所有的子节点
//false:只复制当前节点
var newdiv=div.cloneNode(true);
//改变复制出来的div的背景颜色
newdiv.style.backgroundColor="green";
//将复制以后的div显示在原来div的屁股后面
//document.getElementsByTagName("body")[0].appendChild(newdiv);
//将复制以后的div显示在原来的div前面
document.getElementsByTagName("body")[0].insertBefore(newdiv,div);

获取css样式

单词	含义
style	弹出div的相关的css属性的赋值:所有浏览器都兼容，只可以获取行内css样式的数据
className	设置或返回元素的class属性
getComputedStyle	弹出div的相关的css属性的赋值:火狐和谷歌支持但是低版本IE无效
currentStyle	弹出div的相关的css属性的赋值:火狐谷歌不支持但是IE兼容

//获取div
var div=document.getElementById("cs");
//弹出div的相关的css属性的赋值
//1.使用style:所有浏览器都兼容，只可以获取行内css样式的数据
//alert(div.style.width);
//2.使用getComputedStyle:火狐和谷歌支持但是低版本IE无效
/*var kuan1=document.defaultView.getComputedStyle(div,null).width;
alert(kuan1);*/
//3.使用currentStyle:火狐谷歌不支持但是IE兼容
/*var kuan2=div.currentStyle.width;
alert(kuan2);*/
//兼容火狐、谷歌、IE的方式
var kuan3;
if(div.currentStyle){
    kuan3=div.currentStyle.width;
}else{
    kuan3=document.defaultView.getComputedStyle(div,null).width;
}

单词	含义
onmousemove	鼠标悬浮事件
onmouseover	鼠标移入事件
onmouseout	鼠标移出事件