HTML DOM (文档对象模型)
当网页被加载时,浏览器会创建页面的文档对象模型(Document Object Model)。
HTML DOM 模型被构造为对象的树。
HTML DOM 树
通过可编程的对象模型,JavaScript 获得了足够的能力来创建动态的 HTML。
- JavaScript 能够改变页面中的所有 HTML 元素
- JavaScript 能够改变页面中的所有 HTML 属性
- JavaScript 能够改变页面中的所有 CSS 样式
- JavaScript 能够对页面中的所有事件做出反应
查找 HTML 元素
通常,通过 JavaScript,您需要操作 HTML 元素。
为了做到这件事情,您必须首先找到该元素。有三种方法来做这件事:
- 通过 id 找到 HTML 元素
- 通过标签名找到 HTML 元素
- 通过类名找到 HTML 元素
改变 HTML 内容
修改 HTML 内容的最简单的方法时使用 innerHTML 属性。
如需改变 HTML 元素的内容,请使用这个语法:
1 document.getElementById(id).innerHTML=new HTML
改变 HTML 属性
如需改变 HTML 元素的属性,请使用这个语法。
注:attribute表示 属性的名字。
1 document.getElementById(id).attribute=new value
改变 HTML 样式
如需改变 HTML 元素的样式,请使用这个语法:
document.getElementById("p1").style.color = "red"; document.getElementById("p2").style.fontFamily="FangSong"; document.getElementById("p2").style.fontSize = "40px";
HTML DOM 事件
HTML 事件的例子:
- 当用户点击鼠标时
- 当网页已加载时
- 当图像已加载时
- 当鼠标移动到元素上时
- 当输入字段被改变时
- 当提交 HTML 表单时
- 当用户触发按键时
鼠标点击:
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>点击事件</title> 6 <script type="text/javascript"> 7 function changeText() { 8 document.getElementById("c1").innerHTML = "谢谢点击"; 9 } 10 </script> 11 </head> 12 <body> 13 <h1 οnclick="this.innerHTML='谢谢'">点击文字试试看</h1> 14 <h2 id="c1" οnclick="changeText();">点击文字试试看</h2> 15 <h3 id="c3" οnclick="changeText1(this);">点击文字试试看</h3> 16 17 <p>点击按钮就可以执行 <em>displayDate()</em> 函数。</p> 18 <button οnclick="displayDate();">点击</button> 19 <button id="b1">点击</button> 20 <p id="demo"></p> 21 <script type="text/javascript"> 22 function changeText() { 23 document.getElementById("c1").innerHTML = "谢谢点击"; 24 } 25 26 function changeText1(id) { 27 id.innerHTML = "也行"; 28 } 29 30 function displayDate() { 31 document.getElementById("demo").innerHTML = Date(); 32 } 33 34 document.getElementById("b1").onclick = function() {play();} 35 function play() { 36 document.getElementById("demo").innerHTML = Date(); 37 } 38 </script> 39 </body> 40 </html>
网页加载onload 和 onunload 事件:
onload 和 onunload 事件会在用户进入或离开页面时被触发。
onload 事件可用于检测访问者的浏览器类型和浏览器版本,并基于这些信息来加载网页的正确版本。
onload 和 onunload 事件可用于处理 cookie。
1 <body οnlοad="checkCookies()">
onchange事件:
onchange 事件常结合对输入字段的验证来使用。
下面是一个如何使用 onchange 的例子。当用户改变输入字段的内容时,会调用 upperCase() 函数。
1 <input type="text" id="fname" οnchange="upperCase()">