<body>
         <div></div><div id="艾迪">
         测试内容
         </div><div class="克拉斯"></div>
         <div class="克拉斯"></div>
         <span ></span>
         <input type="button" name="putong" id="anniu" />

</body>

　　

1.找元素
根据id找元素，只能找一个
var a=document.getElementById("艾迪");
alert(a);
根据class找元素，找一类
var a=document.getElementsByClassName("克拉斯");
alert(a);
根据标签名找元素，找多个
var a= document.getElementsByTagName("div");
alert(a);
根据name名找元素，找多个
var a= document.getElementsByName("putong");
alert(a[0]);

找元素，复杂类型
var a= document.getElementById("艾迪");
子级元素
alert(a.childNodes[1]);
父级元素
alert(a.parentNode);
同级上面的元素
alert(a.previousSibling);
同级下面的元素
alert(a.nextSibling);
2.控制元素
var a= document.getElementById("艾迪");
移除元素
a.remove();
创建元素
var b=document.createElement("span");
追加子元素
a.appendChild(b);
3.操做内容
普通元素
var a= document.getElementById("艾迪");
取元素的文本内容
alert(a.innerText);
给元素赋文本值
a.innerText="<b>加粗</b>";
取元素的html代码内容
alert(a.innerHTML);
给元素一个代码
a.innerHTML="<b>加粗</b>";
表单元素
var a= document.getElementById("anniu")
给元素赋值
a.value="按钮";
取值
alert(a.value)

4.操作属性
var a= document.getElementById("艾迪");
添加属性
a.setAttribute("bs","100");
获取属性
alert(a.setAttribute("bs"));
移除属性
a.removeAttribute("bs");
5.操作样式
var a= document.getElementById("艾迪");
设置样式
a.style.backgroundColor="green"
获取样式，只能获取内联式
alert(a.style.width);
移除样式
a.style.width="";







</script>