整理了一下JS的DOM操作语法，这里记录一下。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>js的DOM操作</title>
<style type="text/css">
.dvClass{
width: 300px;
height: 400px;
background-color: red;
} .divHide{
width: 500px;
height: 300px;
background-color: red;
margin: 0 auto;
} .divBorder{
width: 200px;
height: 150px;
float: left;
border: 1px solid #000; /*#000是黑色*/
margin-left: 20px;
text-align: center;
line-height: 165px;
font-size: 19px;
} #querySel{ }
</style>
</head>
<body>
<input type="button" value="确定" id="btn">
<input type="button" value="确定">
<input type="button" value="确定"> <div id="dv">你好</div>
<div id="dv3"><p>新年好</p></div>
<div>大家好</div> <img src="" id="picture"> <img src="desk.jpg" id="picture2"> <a href="desk.jpg" id="aid"><img src="deskSmall.jpg" id="srcid"></a> <div class="divHide" id="dv2"></div>
<input type="button" value="显示" id="show">
<input type="button" value="隐藏" id="hide">
<input type="button" value="隐藏" name="" id="showAndHide"> <input type="text" name="" id="tx">
<input type="button" name="" value="只读" id="btn1"> <a href="www.baidu.com" id="a1">百度</a> <ul id="ul1">
<li>隔行变色</li>
<li>隔行变色</li>
<li>隔行变色</li>
<li>隔行变色</li>
</ul>
<hr>
<ul>
<li>隔行变色</li>
<li>隔行变色</li>
<li>隔行变色</li>
<li>隔行变色</li>
</ul>
<input type="button" name="" value="点击变色" id="btn2"> <ul id="ul2">
<li>隔行变色</li>
<li>隔行变色</li>
<li>隔行变色</li>
<li>隔行变色</li>
</ul> <div class="divBorder">111</div>
<div class="divBorder">222</div>
<div class="divBorder">333</div> <input type="text" name="" value="请输入内容" id="getFocus"> <div id="querySel">12345</div>
<input type="button" name="" value="选择器获取元素" id="btn3"> <div>aaa</div>
<div>bbb</div>
<div>ccc</div>
<input type="button" name="" value="setAttribute" id="setAtt"> <div id="dv4">
<p id="p1">11</p>
<span>22</span>
<ul>
<li>33</li>
<li>44</li>
<li>55</li>
</ul>
</div>
<input type="button" name="" value="创建" id="create"> <div id="uu"></div>
<input type="button" name="" value="创建" id="create2"> <div id="delDiv">
<p>11</p>
<span>22</span>
<p>33</p>
<span>中国</span>
</div>
<input type="button" name="" value="删除" id="del"> <script type="text/javascript">
/*获取元素对象的方法*/
document.getElementById("id的值");
document.getElementsByTagName("标签名"); //返回的是数组
document.getElementsByTagName("name的值"); //返回的是数组
document.getelementsByClassName("class的值"); //返回的是数组
document.getElementById("btn3").onclick=function(){
var obj=document.querySelector("#querySel"); //根据选择器名（id选择器、类选择器）获取元素，并给元素内属性赋值
obj.style.width="300px";
obj.style.height="200px";
obj.style.backgroundColor="red";
} /*鼠标点击事件*/
//点击按钮，弹出对话框
var btnClick=document.getElementById("btn"); //通过document.getElementById()方法返回一个document对象，getElementById("btn")的作用是找到值为btn的id
btnClick.onclick=function(){ //定义一个点击事件
alert("hello world!"); //弹出框
} //点击按钮，通过标签id，改变div标签里面的内容
document.getElementById("btn").onclick=function(){
document.getElementById("dv").innerText="你好，世界";
//document.getElementById("dv3").innerText="新年好啊"; //因为dv3的内容是写在p标签里的，所以不能用innerText，否则p标签会消失
document.getElementById("dv3").innerHTML="新年好啊啊啊";
} //点击按钮，通过标签id，改变div标签的样式
document.getElementById("btn").onclick=function(){
//第1种方法
var obj=document.getElementById("dv");
obj.style.width="300px";
obj.style.height="300px";
obj.style.backgroundColor="#000"; //#000是黑色
obj.style.marginTop="20px"; //设置div上边距为20px //第2种方法（通过将标签的class属性，改成style里面的类选择器名）
obj.className="dvClass"; //这里可以同时赋多个className，用空格分隔，比如obj.className="dvClass dvClass2";
} //点击按钮，通过标签id，在img标签里，显示图片
document.getElementById("btn").onclick=function(){
document.getElementById("picture").src="desk.jpg";
} //点击图片，通过this关键字，改变img标签里，图片的宽和高
document.getElementById("picture2").onclick=function(){
this.width="300"; //图片的长宽比较特殊，所以不加px
this.height="300";
} //点击按钮，通过标签名字，获取到所有标签
document.getElementById("btn").onclick=function(){
var arr=document.getElementsByTagName("div"); //因为标签可能重复，所以通过标签名字获取到的是数组形式
for(var i=0;i<arr.length;i++){
arr[i].innerText="全部改变";
}
} //点击按钮，通过标签id，和this关键字，改变按钮的内容
document.getElementById("btn").onclick=function(){
this.value="点击";
} //排他功能（即点击按钮后，按钮内容改变，再点击其他按钮，已经改变的按钮内容恢复）
var arr=document.getElementsByTagName("input"); //通过标签名字获取到的是数组
for(var i=0;i<arr.length;i++){
arr[i].onclick=function(){
for(var j=0;j<arr.length;j++){
arr[j].value="确定";
}
this.value="点击";
}
} //点击超链接，使图片不在新页面打开，而在当前页面打开
document.getElementById("srcid").onclick=function(){
this.src=document.getElementById("aid").href;
return false; //必须要有这个
} //点击两个按钮，显示和隐藏div
document.getElementById("hide").onclick=function(){
document.getElementById("dv2").style.display="none";
}
document.getElementById("show").onclick=function(){
document.getElementById("dv2").style.display="block";
} //点击一个按钮，显示和隐藏div
document.getElementById("showAndHide").onclick=function(){
if(this.value=="隐藏"){
document.getElementById("dv2").style.display="none";
this.value="显示";
}else if(this.value=="显示"){
document.getElementById("dv2").style.display="block";
this.value="隐藏";
}
} //点击“只读”按钮，让文本框不可编辑
document.getElementById("btn1").onclick=function(){
document.getElementById("tx").disabled=true;
} //点击超链接，禁止跳转到链接的界面
document.getElementById("a1").onclick=function(){
return false; //这句是禁止跳转的功能
} //列表各行变色
document.getElementById("btn2").onclick=function(){
var arr=document.getElementById("ul1").getElementsByTagName("li"); //只要第一个列表中的行变色
for(var i=0;i<arr.length;i++){
if(i%2==0){
arr[i].style.backgroundColor="red";
}
}
} /*鼠标悬停和离开事件*/
//鼠标移到行上，行的颜色改变
var arr=document.getElementById("ul2").getElementsByTagName("li");
for(var i=0;i<arr.length;i++){
arr[i].onmouseover=function(){ //鼠标悬停事件
this.style.backgroundColor="red";
} arr[i].onmouseout=function(){
this.style.backgroundColor="#FFF"; //鼠标离开事件，#FFF是白色
}
} //div边框高亮显示
var arr=document.getElementsByTagName("div");
for(var i=0;i<arr.length;i++){
arr[i].onmouseover=function(){
this.style.border="1px solid red";
}
arr[i].onmouseout=function(){
this.style.border="1px solid #000";
}
} /*获取焦点和失去焦点事件*/
//获取到焦点，使文本框内容消失
document.getElementById("getFocus").onfocus=function(){
if(this.value=="请输入内容"){ //防止已经输入内容，再次修改时，内容被清空
this.value="";
}
} // //失去焦点，使文本框内容恢复
document.getElementById("getFocus").onblur=function(){
if(this.value==""){ //避免输入内容后，失去焦点，输入的内容被清空
this.value="请输入内容";
}
} /*标签属性*/
document.getElementById("setAtt").onclick=function(){
//设置属性
document.getElementsByTagName("div")[0].setAttribute("class","divBorder"); //[0]代表返回数组中的第一个元素，setAttribute里面分别是属性名和属性值
//获取属性
var obj=document.getElementsByTagName("div")[0].getAttribute("class"); //getAttribute里面填属性名就返回属性值，填属性值就返回属性名，没有就返回null
alert(obj);
//删除属性
document.getElementsByTagName("div")[0].removeAttribute("class");
} /*节点
类型：nodeType，值1为标签节点，2为属性节点，3为文本节点
名字：nodeName，大写的标签名——标签类型，小写的属性名——属性类型，#text——文本类型
节点的值：nodeValue，null——标签类型，属性值——属性类型，文本内容——文本类型*/
//获取标签的父节点
var obj=document.getElementById("p1").parentNode; //获取父节点
console.log(obj); //输出<div id="dv4">，说明P1所在标签的父元素为<div>
console.log("节点的类型："+obj.nodeType+"，节点的名字："+obj.nodeName+"，节点的值："+obj.nodeValue); //获取父级元素
console.log(document.getelement("dv4").parentElement); //获取子节点
var obj1=document.getElementById("dv4").childNodes; //返回的是数组
console.log(obj1); //输出：NodeList(7) [ #text, p#p1, #text, span, #text, ul, #text ]，所以一共有7个节点 //获取第一个子节点
console.log(document.getelement("dv4").firstChild); //获取最后一个子节点
console.log(document.getelement("dv4").lastChild); //获取子元素
var obj2=document.getElementById("dv4").children;
console.log(obj2); //HTMLCollection { 0: p#p1, 1: span, 2: ul, length: 3, … }，所以一共有3个子元素 //获取第一个子元素
console.log(document.getElementById("dv4").firstElementChild); //获取最后一个子元素
console.log(document.getElementById("dv4").lastElementChild); /*创建标签*/
//方法1
document.getElementById("create").onclick=function(){
document.write("<p>增加的标签</p>"); //这种方式会将html里面其他标签都清空，只留这个增加的
} //方法2
document.getElementById("create").onclick=function(){
document.getElementById("dv4").innerHTML="<p>哈哈哈哈</p>"; //这种方式会将dv4所在标签内的，子标签都清空，只留增加的
} //方法3
document.getElementById("create").onclick=function(){
var obj=document.createElement("p"); //先创建一个p标签
document.getElementById("dv4").appendChild(obj); //然后添加，这种方式不清空之前的标签，只增加
} //创建图片标签
document.getElementById("create").onclick=function(){
document.getElementById("dv4").innerHTML="<img src=desk.jpg/>";
} //根据数组创建列表标签
document.getElementById("create2").onclick=function(){
var arr=["新闻标题1","新闻标题2","新闻标题3","新闻标题4","新闻标题5","新闻标题6"];
var str="<ul>";
for(var i=0;i<arr.length;i++){
str+="<li>"+arr[i]+"</li>";
}
str+="</ul>";
document.getElementById("uu").innerHTML=str;
} /*删除元素*/
document.getElementById("del").onclick=function(){
document.getElementById("delDiv").removeChild(document.getElementById("delDiv").firstElementChild); //删除第一个元素
document.getElementById("delDiv").removeChild(document.getElementById("delDiv").lastElementChild); //删除第一个元素
}
</script>
</body>
</html>
。