一、使这个模块里面的东西全部没有
box.style.display="none";二、获取id、class、标签
document.getElementsByClassName//类名
document.getElementById
document.getElementsByTagName//标签名，eg：p、div
eg：
var x=document.getElementsByTagName('img')[1];
var x=document.getElementsByClassName('aa')[1];三、
1.获取兄弟节点
var third=second.nextElementSibling||second.nextSibling;
var first=second.previousElementSibling||second.previousibling;//为了兼容的写法2.获取父节点
var box=first.parentNode;3.获取子节点
var first=box.firstElementChild||firstChild;//第一个子节点
var forth=box.lastElementChild||lastChild;//最后一个子节点
var node=box.children;//获取所有子节点四、增删节点
1.增
var fifth=document.createElement("p");//加一个p标签
fifth.innerHTML="fifth child";
//box.appendChild(fifth);//加到队尾
var third=document.getElementById("third");
box.insertBefore(fifth,third);//插到某个元素前面2.删
var second=document.getElementById("second");
second.parentNode.removeChild(second);//父标签
var third=document.getElementById("third");
third.remove();//直接移除五、复制节点
var fifth=forth.cloneNode(true);//然后选择增加节点的方法选择插入位置六、节点属性
var x=img.getAttribute("src");//获得属性
img.setAttribute("src","b.jpg");//改变属性
img.setAttribute("aaa","aaa");//增加属性
img.removeAttribute("src");//删除属性节点例子：
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8">
<script type="text/javascript">
window.onload=function(){
/*获取兄弟节点
var second=document.getElementById("second");
var third=second.nextElementSibling||second.nextSibling;
var first=second.previousElementSibling||second.previousibling;
second.innerHTML="change second";
first.innerHTML="change first";
third.innerHTML="change third";*/
/*获取父节点
var first=document.getElementById("first");
var box=first.parentNode;
box.style.background="pink";*/
/*获取子节点*/
var box=document.getElementById("box");
var first=box.firstElementChild||firstChild;
var forth=box.lastElementChild||lastChild;
first.innerHTML="change first";
forth.innerHTML="change forth";
var node=box.children;
node[1].innerHTML="change second";
node[2].innerHTML="change third";
}
/*********************************增删******************************************************************/
/*window.onload=function(){
增
var box=document.getElementById("box");
var fifth=document.createElement("p");
fifth.innerHTML="fifth child";
//box.appendChild(fifth);//加到队尾
var third=document.getElementById("third");
box.insertBefore(fifth,third);//插到某个元素前面
删
var second=document.getElementById("second");
second.parentNode.removeChild(second);//父标签
var third=document.getElementById("third");
third.remove();//直接移除
}*/
/**********************************节点属性***************************
window.onload=function()
{
var img=document.getElementsByTagName("img")[0];
var x=img.getAttribute("src");
console.log(x);//准确获得a.jpg
console.log(img.src);//获得的是一个地址
img.setAttribute("src","b.jpg");//改变属性
img.setAttribute("aaa","aaa");//增加属性
img.removeAttribute("src");//删除属性
}*/
</script>
</head>
<body>
<div id="box">
<p id="first">first child</p>
<p id="second">second child</p>
<p id="third">third child</p>
<p id="forth">forth child</p>
<img src="a.jpg" alt="">
</div>
</body>
</html>做一个图片切换的小例子
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8">
<script type="text/javascript">
window.onload=function(){
var now=1;
var previous=document.getElementById("previous");
previous.onclick=function(){
var img=document.getElementsByTagName("img")[0];
if(now-1<1){
alert("到顶了！");
return;
}
now--;
img.setAttribute("src",now+".png")
}
var next=document.getElementById("next");
next.onclick=function(){
var img=document.getElementsByTagName("img")[0];
if(now+1>3){
alert("到底了！");
return;
}
now++;
img.setAttribute("src",now+".png")
}
}
</script>
</head>
<body>
<img src="1.png">
<button id="previous" >上一张</button>
<button id="next">下一张</button>
</body>
</html>