JS HTM DOM
通过可编程的对象模型，JavaScript 获得了足够的能力来创建动态的 HTML。
- JavaScript 能够改变页面中的所有 HTML 元素
- JavaScript 能够改变页面中的所有 HTML 属性
- JavaScript 能够改变页面中的所有 CSS 样式
- JavaScript 能够对页面中的所有事件做出反应
查找 HTML 元素
通常，通过 JavaScript，您需要操作 HTML 元素。
为了做到这件事情，您必须首先找到该元素。有三种方法来做这件事：
- 通过 id 找到 HTML 元素
- 通过标签名找到 HTML 元素
- 通过类名找到 HTML 元素
1.通过id查找HTML元素
如果找到该元素，则该方法将以对象（在 x 中）的形式返回该元素。
如果未找到该元素，则 x 将包含 null。
var x=document.getElementById("intro");
2.通过标签查找
var x=document.getElementById("main");
var y=x.getElementsByTagName("p");
通过类名查找 HTML 元素在 IE 5,6,7,8 中无效。
改变HTML输出流
在 JavaScript 中，document.write() 可用于直接向 HTML 输出流写内容。
绝不要使用在文档加载之后使用 document.write()。这会覆盖该文档。
改变HTML内容
修改 HTML 内容的最简单的方法时使用 innerHTML 属性。
语法：
document.getElementById(id).innerHTML=new HTML;
1 <body> 2 <p id="first">自认惊叹的桥段终沦为老生常谈</p> 3 <h1 id="second">mine mine~</h1> 4 <button onclick="myfunction()">change</button> 5 <script type="text/javascript"> 6 function myfunction(){ 7 document.getElementById("first").innerHTML="石楠小札"; 8 var x=document.getElementById("second"); 9 x.innerHTML="new txt"; 10 } 11 12 </script> 13 </body>
改变HTML属性
语法：
document.getElementById(id).attribute=new value
1 <body> 2 3 <img src="../example/cut/images/img1.jpg" id="img"><br/> 4 <button onclick="myfunction()">change</button> 5 <script type="text/javascript"> 6 7 document.getElementById("img").src="../example/cut/images/icon.jpg"; 8 } 9 10 </script>
改变HTML样式
语法：
document.getElementById(id).style.property=new style
1 <body> 2 <p id="first">自认惊叹的桥段终沦为老生常谈</p> 3 <h1 id="second">mine mine~</h1> 4 <hr/> 5 <img src="../example/cut/images/img1.jpg" id="img"><br/> 6 <button onclick="myfunction()">change</button> 7 <script type="text/javascript"> 8 function myfunction(){ 9 10 document.getElementById("first").style.color="blue"; 11 } 12 13 </script> 14 </body>
显示/隐藏文本
1 <body> 2 <p id="first">自认惊叹的桥段终沦为老生常谈</p> 3 <h1 id="second">mine mine~</h1> 4 <hr/> 5 <img src="../example/cut/images/img1.jpg" id="img"><br/> 6 <button onclick="myfunction()">隐藏文本</button> 7 <button onclick="myfunction2()">显示文本</button> 8 <script type="text/javascript"> 9 function myfunction(){ 10 11 document.getElementById("first").style.visibility="hidden"; 12 } 13 function myfunction2(){ 14 15 document.getElementById("first").style.visibility="visible"; 16 } 17 18 </script> 19 </body>
对事件做出反应
HTML 事件的例子：
- 当用户点击鼠标时
- 当网页已加载时
- 当图像已加载时
- 当鼠标移动到元素上时
- 当输入字段被改变时
- 当提交 HTML 表单时
- 当用户触发按键时
1 <body> 2 <hr/> 3 <h1 onclick="myfunction3(this)">change</h1> 4 <script type="text/javascript"> 5 function myfunction3(id){ 6 id.innerHTML="谢谢!"; 7 } 8 </script> 9 </body>
onload 和 onunload 事件
onload 和 onunload 事件会在用户进入或离开页面时被触发。
onload 事件可用于检测访问者的浏览器类型和浏览器版本，并基于这些信息来加载网页的正确版本。
onload 和 onunload 事件可用于处理 cookie。
1 <!DOCTYPE html> 2 <html> 3 <head> 4 5 <script> 6 function mymessage() 7 { 8 alert("这段消息由 onload 事件触发"); 9 } 10 </script> 11 </head> 12 13 <body onload="mymessage()"> 14 </body> 15 16 </html>
1 <body onload="myfunction()"> 2 <script type="text/javascript"> 3 function myfunction(){ 4 if(navigator.cookieEnable==true){ 5 alert("已经启用cookie"); 6 } 7 else{ 8 alert("未启用cookie"); 9 } 10 } 11 </script> 12 </body>
onchange 事件
onchange 事件常结合对输入字段的验证来使用。
类似于焦点移除？
1 <body > 2 请输入英文字符：<input type="text" id="fname" onchange="myfunction2()"> 3 <script type="text/javascript"> 4 5 function myfunction2(){ 6 var x=document.getElementById("fname"); 7 x.value=x.value.toUpperCase(); 8 9 } 10 11 </script> 12 </body>
onmouseover 和 onmouseout 事件
onmouseover 和 onmouseout 事件可用于在用户的鼠标移至 HTML 元素上方或移出元素时触发函数。
1 <body> 2 <div onmouseover="mOver(this)" onmouseout="mOut(this)" style="background-color:lightgray;height:20px;color:gray;padding:40px;120px;font-size:14px;">请把鼠标移到上面</div> 3 <script type="text/javascript"> 4 5 function mOver(obj){ 6 obj.innerHTML="谢谢"; 7 } 8 function mOut(obj){ 9 obj.innerHTML="请把鼠标移到上面"; 10 } 11 </script> 12 </body>
onmousedown、onmouseup 以及 onclick 事件
onmousedown, onmouseup 以及 onclick 构成了鼠标点击事件的所有部分。首先当点击鼠标按钮时，会触发 onmousedown 事件，当释放鼠标按钮时，会触发 onmouseup 事件，最后，当完成鼠标点击时，会触发 onclick 事件。
1 <!DOCTYPE html> 2 <html> 3 <body> 4 5 <div onmousedown="mDown(this)" onmouseup="mUp(this)" style="background-color:green;color:#ffffff;90px;height:20px;padding:40px;font-size:12px;">请点击这里</div> 6 7 <script> 8 function mDown(obj) 9 { 10 obj.style.backgroundColor="#1ec5e5"; 11 obj.innerHTML="请释放鼠标按钮" 12 } 13 14 function mUp(obj) 15 { 16 obj.style.backgroundColor="green"; 17 obj.innerHTML="请按下鼠标按钮" 18 } 19 </script> 20 21 </body> 22 </html>
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <script> 5 function lighton() 6 { 7 document.getElementById('myimage').src="/i/eg_bulbon.gif"; 8 } 9 function lightoff() 10 { 11 document.getElementById('myimage').src="/i/eg_bulboff.gif"; 12 } 13 </script> 14 </head> 15 16 <body> 17 <img id="myimage" onmousedown="lighton()" onmouseup="lightoff()" src="/i/eg_bulboff.gif" /> 18 <p>按住鼠标不放可以点亮这盏灯！</p> 19 </body> 20 </html>
onfocus
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <script> 5 function myFunction(x) 6 { 7 x.style.background="yellow"; 8 } 9 </script> 10 </head> 11 <body> 12 13 请输入英文字符：<input type="text" onfocus="myFunction(this)"> 14 15 <p>当输入字段获得焦点时，会触发改变背景颜色的函数。</p> 16 17 </body> 18 </html>
常用事件
除了刚才提到的 onclick 事件，还有这些常用的事件：
onclick 单击
ondblclick 双击
onfocus 元素获得焦点
onblur 元素失去焦点
onmouseover 鼠标移到某元素之上
onmouseout 鼠标从某元素移开
onmousedown 鼠标按钮被按下
onmouseup 鼠标按键被松开
onkeydown 某个键盘按键被按下
onkeyup 某个键盘按键被松开
onkeypress 某个键盘按键被按下并松开
JS HTML 元素（节点）
1.创建HTML元素
1 <!DOCTYPE html> 2 <html> 3 <body> 4 5 <div id="div1"> 6 <p id="p1">这是一个段落。</p> 7 <p id="p2">这是另一个段落。</p> 8 </div> 9 10 <script> 11 var para=document.createElement("p");//这段代码创建新的 <p> 元素 12 var node=document.createTextNode("这是新段落。");//如需向 <p> 元素添加文本，您必须首先创建文本节点。这段代码创建了一个文本节点 13 para.appendChild(node);//然后您必须向 <p> 元素追加这个文本节点 14 //最后您必须向一个已有的元素追加这个新元素 15 var element=document.getElementById("div1");//这段代码找到一个已有的元素 16 element.appendChild(para);//这段代码向这个已有的元素追加新元素 17 </script> 18 19 </body> 20 </html>
删除HTML元素
1 <!DOCTYPE html> 2 <html> 3 <body> 4 5 <div id="div1"> 6 <p id="p1">这是一个段落。</p> 7 <p id="p2">这是另一个段落。</p> 8 </div> 9 10 <script> 11 var parent=document.getElementById("div1");//找到 id="div1" 的元素 12 var child=document.getElementById("p1");//找到 id="p1" 的 <p> 元素 13 parent.removeChild(child);//从父元素中删除子元素 14 </script> 15 16 </body> 17 </html>
这是常用的解决方案：找到您希望删除的子元素，然后使用其 parentNode 属性来找到父元素
var child=document.getElementById("p1"); child.parentNode.removeChild(child);