HTML的事件屬性
全域事件屬性:HTML 4 增加了使事件在瀏覽器中觸發動作的能力,例如當使用者點擊元素時啟動 JavaScript。
a. Window 事件屬性,針對 window 物件觸發的事件(套用到
標籤),常用的為onload。b. Form事件,由 HTML 表單內的動作觸發的事件(應用到幾乎所有 HTML 元素,但最常用在 form 元素中):常用的為onblur、onfocus、onselect、onsubmit。
c. keybord事件
d.Mouse事件,滑鼠或類似使用者動作觸發的事件:常用的為onclick、onmouseover、onmouseout。
e. Media事件,由媒介(如視訊、影像和音訊)觸發的事件(適用於所有HTML 元素,但常見於媒介元素中,例如
動態建立html標記
<!DOCTYPE html> <html> <head> <meta chaset="utf-8" /> <title>document.write</title> <body> <script> <!--可以很方便的插入元素标签,尤其是字符串.但是它与网页设计应将行为(脚本)和结构(html标签)分离的原则--> document.write("<p>This is inserted by document.write</p>"); </script> </body> </head> </html>
<p id="testp"> </p> window.onload = function() { var testp = document.getElementById("testp"); testp.innerHTML = "<p>This is inserted by <em>innerHTML</em></p><en>"; }
b. 更精細的dom方法-取得dom節點樹和改變dom節點樹
檢索節點(元素):document.getElementById和element.getElementsByTagName
建立節點(元素): document.createElement,document。
## 很有用的屬性:element.parentNode(取得父節點)、element.nextSibling(取得兄弟節點)
上面用innerHTML屬性插入HTML的效果用dom方法可以實現:
window.onload = function() { var testp = document.getElementById("testp"); var para = document.createElement("p"); testp.appendChild(para); var context1 = doument.createTextNode("This is inserted by "); para.appendChild(context1); var emphasis = document.createElement("em"); para.appendChild(emphasis); var context2 = document.createTextNode("method of domcore"); emphasis.appendChild(context2); }
function insertAfter(newElement, targetElement) { var parent = targetElement.parentNode; if (parent.lastChild == targetElement) { parent.appendChild(newElement); } else { targetElement.inserBefore(newElement, targetElement.nextSibling); } }
以上是javascript動態建立html標記的方法實例總結的詳細內容。更多資訊請關注PHP中文網其他相關文章!