1.找元素
<body>
<div id="test"></div>
<div class="test"></div>
<span class="test"></span>
<input id="test" name="abc" />
</body>
<script type="text/javascript">
//var a = document.getElementById("test"); //根据ID找,只能找到一个
//var a = document.getElementsByClassName("test"); //根据class名找，可以找到多个，返回数组
//var a = document.getElementsByTagName("div"); //根据标签名找，可以找到多个，返回数组
var a = document.getElementsByName("abc"); //根据Name找，可以找到多个，返回数组，主要针对于表单元素(比如单选按钮)
alert(a[0]);
ID找 
class 找是数组
标签名找也是数组
根据Name找
1
2.复杂点的，了解就好
<body>
<div></div>
<div id="test" >
<div></div>
<span></span>
</div>
</body>
<script type="text/javascript">
var a = document.getElementById("test");
//alert(a.childNodes);//找该元素下的子元素
//alert(a.parentNode); //找到该元素的父级元素
//alert(a.previousSibling); //找同级上面的元素
alert(a.nextSibling); //找同级下面的元素
</script>
3.控制元素
<body>
<div id="test" >
<div></div>
<span></span>
</div>
<div class="test"></div>
<span class="test"></span>
<input type="text" name="uid" id="uid" value="hello" />
</body>
<script type="text/javascript">
var a = document.getElementById("test");
// a.remove();//移除元素
var s = document.createElement("span");//创建元素
a.appendChild(s); //追加子元素
</script>
4.操作内容
先看普通元素的操作
<body>
<div id="test" >
hello
</div>
</body>
<script type="text/javascript">
var a = document.getElementById("test");
alert(a.innerText); //取元素的文本内容
</script>
<body>
<div id="test" >
<span>hello</span>
</div>
</body>
<script type="text/javascript">
var a = document.getElementById("test");
a.innerText = "world"; //给元素赋文本值
</script>
替换了之前的hello
<body>
<div id="test" >
<span>hello</span>
</div>
</body>
<script type="text/javascript">
var a = document.getElementById("test");
alert(a.innerHTML); //取元素的HTML代码内容
</script>
<body>
<div id="test" >
<span>hello</span>
</div>
</body>
<script type="text/javascript">
var a = document.getElementById("test");
a.innerHTML = "<b>加粗</b>";//给元素扔一个HTML代码
</script>
综上整理：
//普通元素 //var a = document.getElementById("test"); //alert(a.innerText); //取元素的文本内容 //a.innerText = "<b>加粗</b>"; //给元素赋文本值 //alert(a.innerHTML); //取元素的HTML代码内容 //a.innerHTML = "<b>加粗</b>";//给元素扔一个HTML代码
下面看表单元素
<body>
<input type="text" name="uid" id="uid" />
</body>
<script type="text/javascript">
var a = document.getElementById("uid");
a.value = "用户名"; //给元素赋值
</script>
<body>
<input type="text" name="uid" id="uid" value="hello" />
</body>
<script type="text/javascript">
var a = document.getElementById("uid");
alert(a.value);//取值
</script>
综上
//表单元素 //var a = document.getElementById("uid"); //a.value = "用户名"; //给元素赋值 //alert(a.value); //取值
5.操作属性
<body>
<div id="test">
</div>
</body>
<script type="text/javascript">
var a = document.getElementById("test");
//a.setAttribute("bs","100"); //添加属性
//alert(a.getAttribute("bs")); //获取属性值
//a.removeAttribute("bs"); //移除属性
</script>
6.操作样式
<body>
<div id="test" style="200px; height:200px;">
hello
</div>
</body>
<script type="text/javascript">
var a = document.getElementById("test");
//a.style.backgroundColor = "red"; //设置样式
//alert(a.style.width); //获取样式,只能获取内联的
//a.style.width = ""; //移除样式,只能移除内联的
</script>