参考资料w3school
DOM为Document Object Model缩写，即为文档对象模型。 可以通过DOM访问JS HTML所有的元素。 HTML DOM 模型被构造为对象的树。 DOM 树 通过DOM，JS能动态的改变HTML
JS 改变所有的HTML元素JS改变所有的HTML属性JS改变所有的页面的CSS样式JS能对所有事件作出反应有三种方法
id查找标签名查找类名查找查找id = “JinCheng”的元素
var x = document.getElementById('JinCheng');如果找到，返回改元素，如果没有，返回null。
下列就是查找id = ‘idName’的元素的所有< p >元素
var x = document.getElementById('idName'); var y = x.getElementsByTagName('p')通过类名查找在IE 5-8中无效
1.改变输出流 JS中，document.write()直接向HTML输出流写内容
<script> document.write(Date()); </script>输出当前时间 如 “Sun Aug 06 2017 14:41:15 GMT+0800 (CST)”
2.改变HTML内容 改变HTML元素内容，使用下面的语法
document.getElementById("idName").innerHTML="New text!";3.改变HTML属性 改变HTML属性，使用这个语法
document.getElementById(id).attribute=new value <!DOCTYPE html> <html> <body> <img id = "image" src = "smiley.gif"> <script> document.getElementById<"image">.src = "landscape.jpg"; </script> </body> </html>JS改变HTML元素样式(CSS)
document.getElementById(id).style.property=new style <p id="p2">Hello World!</p> <script> document.getElementById("P2").style.color = "blue"; document.getElementById("p2").style.fontFamliy = "Arial"; </script>1.点击
<h1 onclick = "this.innerHTML = '金城已点击'">快点我</好>2.点击后调用事件
<script> funtion changeText(id){ id.innerTHML = "金城已点击"; } </script> <body> <h1 onclick="changeText(this)">请点击该文本</h1> </body>3.向 button 元素分配 onclick 事件：
<script> document.getElementById("myBtn").onlick = funtion(){ displayDate() }; function displayDate() { document.getElementById("demo").innerHTML=Date(); } </script>4.onload 和onunload事件 onload加入页面触发，检测浏览器类型和版本。 onunload离开页面触发。 他们都可以处理cookie
<!DOCTYPE html> <html> <body onload="checkCookies()"> <script> function checkCookies() { if (navigator.cookieEnabled==true) { alert("已启用 cookie") } else { alert("未启用 cookie") } } </script> <p>提示框会告诉你，浏览器是否已启用 cookie。</p> </body> </html>5.onchange事件 用户改变字段内容，会触发onchange
<input type="text" id="fname" onchange="upperCase()">6.onmouseover 和 onmouseout 事件 onmouseover 鼠标移动到元素时触发 onmouseout 鼠标离开元素时触发
6.onmousedown、onmouseup 以及 onclick 事件 onmousedown 鼠标点击触发 onmouseup 释放鼠标触发 onclick 完成点击
先创建，再添加
<div id="div1"> <p id="p1">这是一个段落</p> <p id="p2">这是另一个段落</p> </div> <script> //创建新的<p>元素 var para=document.createElement("p"); //向<p>元素添加文本，先创建文本节点 var node=document.createTextNode("这是新段落。"); //再添加 para.appendChild(node); //找到已有的元素 var element=document.getElementById("div1"); //向已有的元素添加新元素 element.appendChild(para); </script>删除元素，向获得父元素
supper.removeChild(child); <div id="div1"> <p id="p1">这是一个段落。</p> <p id="p2">这是另一个段落。</p> </div> <script> //找到父元素 var supper=document.getElementById("div1"); //找到子元素 var child=document.getElementById("p1"); //删除 parent.removeChild(child); </script>