时间:2021-07-01 10:21:17 帮助过:1人阅读
全局事件属性:HTML 4 增加了使事件在浏览器中触发动作的能力,比如当用户点击元素时启动 JavaScript。
a. Window 事件属性,针对 window 对象触发的事件(应用到 <body> 标签),常用的为onload。
b. Form事件,由 HTML 表单内的动作触发的事件(应用到几乎所有 HTML 元素,但最常用在 form 元素中):常用的为onblur、onfocus、onselect、onsubmit。
c. keybord事件
d.Mouse事件,由鼠标或类似用户动作触发的事件:常用的为onclick、onmouseover、onmouseout。
e. Media事件,由媒介(比如视频、图像和音频)触发的事件(适用于所有 HTML 元素,但常见于媒介元素中,比如 <audio>、<embed>、<img>、<object> 以及 <video>)。
动态创建html标记
a. 两个传统的方法
document.write方法和innerHTML属性,两者都不是标准化的DOM(W3C标准)所支持的方法和属性,它们都是html的专有属性。
document.write方法可以很方便的插入元素标签,尤其是字符串。但是它与网页设计应将行为(脚本)和结构(html标签)分离的原则相背。
innerHTML适合将一大段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.createTextNode
追加节点(元素):element.appendChild
插入(将一个节点插入到另一个节点之前):parentEelement.insertBefore(newElement, targetElement)
很有用的属性:element.parentNode(获取父节点)、element.nextSibling(获取兄弟节点)
上面用innerHTML属性插入HTML的效果用dom方法照样可以实现:
利用上面的dom方法写一个将一个节点插入到另一个节点之后的函数:
以上就是javascript动态创建html标记的方法实例总结的详细内容,更多请关注Gxl网其它相关文章!