1.JS DOM简介
HTML DOM (文档对象模型)，当网页被加载时，浏览器会创建页面的文档对象模型（Document Object Model）。通过HTML DOM，可访问 JavaScript HTML 文档的所有元素。
HTML DOM 模型被构造为对象的树：
通过可编程的对象模型，JavaScript 获得了足够的能力来创建动态的 HTML。
· JavaScript 能够改变页面中的所有 HTML 元素
· JavaScript 能够改变页面中的所有 HTML 属性
· JavaScript 能够改变页面中的所有 CSS 样式
· JavaScript 能够对页面中的所有事件做出反应
通常，通过 JavaScript，需要操作 HTML 元素。为了做到这件事情，您必须首先找到该元素。有三种方法来做这件事：
· 通过 id 找到 HTML 元素
· 通过标签名找到 HTML 元素
· 通过类名找到 HTML 元素
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <title>JS简单学习</title> </head> <body> <p id="demo">你好世界！！！</p> <p>该实例展示了 <b>getElementById</b> 方法!</p> <script> x=document.getElementById("demo"); document.write("<p>文本来自 id 为 demo 段落: " + x.innerHTML + "</p>"); </script> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>JS简单学习</title> </head> <body> <p>你好世界!</p> <div id="main"> <p> DOM 是非常有用的。</p> <p>该实例展示了 <b>getElementsByTagName</b> 方法</p> </div> <script> var x=document.getElementById("main"); var y=document.getElementsByTagName("p"); document.write('id="main"元素中的第一个段落为：' + y[0].innerHTML); </script> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>JS简单学习</title> </head> <body> <p class="intro">你好世界!</p> <p>该实例展示了 <b>getElementsByClassName</b> 方法!</p> <script> x=document.getElementsByClassName("intro"); document.write('<p>文本来自 class 为 "intro" 段落: ' + x[0].innerHTML + "</p>"); </script> </body> </html>
2.通过DOM修改HTML
HTML DOM 允许 JavaScript 改变 HTML 元素的内容。
主要为这几点：改变 HTML 输出流、改变 HTML 内容、改变 HTML 属性。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>JS简单学习</title> </head> <body> <p>在 JavaScript 中，document.write() 可用于直接向 HTML 输出流写内容。</p> <script> document.write(Date()); </script> <hr /> <p>修改 HTML 内容的最简单的方法是使用 innerHTML 属性。</p> <p id="demo1">Hello World!!!</p> <script> var x=document.getElementById("demo1"); x.innerHTML="Hello JS DOM"; </script> <hr /> <p>改变 HTML 元素的属性：document.getElementById(id).attribute=新属性值</p> <img id="demo2" src="img/images/tx.jpg" width="120" height="120" /> <script> document.getElementById("demo2").src="img/images/hetao.jpg"; </script> </body> </html>
3.通过DOM修改CSS
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>JS简单学习</title> </head> <body> <p id="css1">Hello World!!!</p> <p id="css2">Hello World!!!</p> <p id="css3">Hello World!!!</p> <script> document.getElementById("css1").style.color="red"; document.getElementById("css2").style.fontFamily="微软雅黑"; document.getElementById("css3").style.fontSize="xx-large"; </script> <p>以上段落的样式均已通过脚本修改。</p> <hr /> <h2 id="css4">这是一个标题</h2> <button type="button" onclick="document.getElementById('css4').style.color='blue'">点击这里</button> <hr /> <p id="html">这是一个文本。 这是一个文本。 这是一个文本。 这是一个文本。 这是一个文本。 这是一个文本。 这是一个文本。</p> <input type="button" value="隐藏文本" onclick="document.getElementById('html').style.visibility='hidden'" /> <input type="button" value="显示文本" onclick="document.getElementById('html').style.visibility='visible'" /> </body> </html>
