文档对象模型（Document Object Model，DOM）是一种用于HTML和XML文档的编程接口。它给文档提供了一种结构化的表示方法，可以改变文档的内容和呈现方式。我们最为关心的是，DOM把网页和脚本以及其他的编程语言联系了起来。DOM属于浏览器，而不是JavaScript语言规范里的规定的核心内容。
一，查找元素：
1，直接查找
document.getElementById 根据ID获取一个标签document.getElementsByName 根据name属性获取标签集合document.getElementsByClassName 根据class属性获取标签集document.getElementsByTagName 根据标签名获取标签集合
<div class="c1">哈哈</div>
<div id="l">嘿嘿</div>
<input type="text" name="xin"/>
<p>哈哈</p>
<script>
var ww = document.getElementsByClassName(‘c1‘);
var xx = document.getElementById(‘l‘);
var cc = document.getElementsByName("xin");
var dd = document.getElementsByTagName("p");
</script>
2，间接查找
parentNode // 父节点 childNodes // 所有子节点 firstChild // 第一个子节点 lastChild // 最后一个子节点 nextSibling // 下一个兄弟节点 previousSibling // 上一个兄弟节点 parentElement // 父节点标签元素 children // 所有子标签 firstElementChild // 第一个子标签元素 lastElementChild // 最后一个子标签元素 nextElementtSibling // 下一个兄弟标签元素 previousElementSibling // 上一个兄弟标签元素
实例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.top{
background-color: brown;
color:white;
font-family: 华文隶书;
font-size: 38px;
text-align:center
}
</style>
</head>
<body>
<div id="li" class="top">欢迎武sir莅临指导</div>
<script>
setInterval(function(){
dd = document.getElementById(‘li‘);
dd_text = dd.innerText;
first_char = dd_text[0];
sub_char = dd_text.slice(1,dd_text.length);
new_str = sub_char + first_char;
dd.innerText = new_str;
},1000);
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
ul{
padding: 0;
margin: 0;
}
.hide{
display: none;
}
.menu{
width: 200px;
height: 500px;
background-color: #2459a2;
border: 2px solid #333;
}
.menu .title{
background-color: brown;
cursor: pointer;
}
.menu .content{
background-color: white;
}
</style>
</head>
<body>
<div class="menu">
<div class="item">
<div class="title" onclick="Show(this);">菜单一</div>
<div class="content">
<ul>
<li>内容1</li>
<li>内容1</li>
<li>内容1</li>
</ul>
</div>
</div>
<div class="item">
<!--arg.下一个标签nex-->
<div class="title" onclick="Show(this);">菜单二</div>
<div class="content hide">
<ul>
<li>内容2</li>
<li>内容2</li>
<li>内容2</li>
</ul>
</div>
</div>
<div class="item">
<div class="title" onclick="Show(this);">菜单三</div>
<div class="content hide">
<ul>
<li>内容3</li>
<li>内容3</li>
<li>内容3</li>
</ul>
</div>
</div>
<div class="item">
<div class="title" onclick="Show(this);">菜单四</div>
<div class="content hide">
<ul>
<li>内容4</li>
<li>内容4</li>
<li>内容4</li>
</ul>
</div>
</div>
</div>
<script>
function Show(arg){
arg.nextElementSibling.classList.remove(‘hide‘);
var father = arg.parentElement;
var sons = father.parentElement.children;
for(var i= 0;i<sons.length;i++){
var current_ele = sons[i];
if(current_ele == father){
}else {
current_ele.children[1].classList.add(‘hide‘);
}
}
}
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.hide{
display: none;
}
.c1{
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0,0,0,.5);
z-index: 2;
}
.c2{
position: fixed;
width: 400px;
height: 300px;
background: white;
top: 50%;
left: 50%;
z-index: 3;
margin-top: -150px;
margin-left: -200px;
}
</style>
</head>
<body>
<div>
<input type="button"value="点我"onclick="Shou()"/>
<input type="button"value="点我"onclick="Shou()"/>
</div>
<div id="shade" class="c1 hide"></div>
<div id="modal" class="c2 hide">
<p>用户：<input type="text"/></p>
<p>密码：<input type="password"></p>
<p>
<input type="button" value="确定" onclick="Hide();">
<input type="button" value="取消" onclick="Hide();">
</p>
</div>
<script>
function Shou(){
document.getElementById(‘shade‘).classList.remove("hide");
document.getElementById(‘modal‘).classList.remove("hide");
}
function Hide(){
document.getElementById(‘shade‘).classList.add("hide");
document.getElementById(‘modal‘).classList.add("hide");
}
</script
</body>
</html>
原文：http://www.cnblogs.com/guokaixin/p/5651189.html