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 元素
通过 id 查找 HTML 元素
在 DOM 中查找 HTML 元素的最简单的方法,是通过使用元素的 id。
实例
本例查找 id= intro 元素:
[html] view plain copy !DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN www.VeVb.com/TR/xhtml1/DTD/xhtml1-transitional.dtd html xmlns= www.VeVb.com/1999/xhtml head meta http-equiv= Content-Type content= text/html; charset=utf-8 / title 无标题文档 /title /head body p id= intro hello /p p 本例演示 strong getElementById /strong 方法 /p script x = document.getElementById( intro document.write( p id= intro 的段落中的文本是: + x.innerHTML + /p /script /body /html
如果找到该元素,则该方法将以对象(在 x 中)的形式返回该元素。
如果未找到该元素,则 x 将包含 null。
通过标签名查找 HTML 元素
实例
本例查找 id= main 的元素,然后查找 main 中的所有 p 元素:
[html] view plain copy html xmlns=www.VeVb.com/1999/xhtml head meta http-equiv= Content-Type content= text/html; charset=utf-8 / title 无标题文档 /title /head body div id= main p The DOM is very useful. /p p 本例演示 b getElementsByTagName /b 方法。 /p /div script var x = document.getElementById( main var y = document.getElementsByTagName( p document.write( id 为 main 的 div 中的第一段落文本是: + y[0].innerHTML); /script /body /html
通过类名查找 HTML 元素在 IE 5,6,7,8 中无效。
【相关推荐】
1. 免费html在线视频教程
2. html开发手册
3. VeVb.com原创html5视频教程
以上就是利用HTML DOM访问 JavaScript 文档元素的实例代码的详细内容,html教程
郑重声明:本文版权归原作者所有,转载文章仅为传播更多信息之目的,如作者信息标记有误,请第一时间联系我们修改或删除,多谢。
新闻热点
疑难解答