小白教程
所有教程
关于
Search
172.69.59.78
172.69.59.78
参数设置
贡献
退出
操作
编辑
移动
保护
信息
历史
删除
查看“JavaScript HTML DOM”的源代码
本页内容
上一节:
JavaScript_类继承
下一节:
JavaScript_HTML_DOM_改变_HTML_内容
因为以下原因,您没有权限编辑本页:
您请求的操作仅限属于该用户组的用户执行:
用户
您可以查看和复制此页面的源代码。
{{DISPLAYTITLE:DOM 简介}}[[Category:Javascript 教程|49]] = JavaScript HTML DOM = 通过 HTML DOM,可访问 JavaScript HTML 文档的所有元素。 == HTML DOM (文档对象模型) == 当网页被加载时,浏览器会创建页面的文档对象模型(Document Object Model)。 '''HTML DOM''' 模型被构造为'''对象'''的树: == HTML DOM 树 == <sample title="" desc="" lang="html" hererun="1"> </sample> 通过可编程的对象模型,JavaScript 获得了足够的能力来创建动态的 HTML。 * JavaScript 能够改变页面中的所有 HTML 元素 * JavaScript 能够改变页面中的所有 HTML 属性 * JavaScript 能够改变页面中的所有 CSS 样式 * JavaScript 能够对页面中的所有事件做出反应 == 查找 HTML 元素 == 通常,通过 JavaScript,您需要操作 HTML 元素。 为了做到这件事情,您必须首先找到该元素。有三种方法来做这件事: * 通过 id 找到 HTML 元素 * 通过标签名找到 HTML 元素 * 通过类名找到 HTML 元素 == 通过 id 查找 HTML 元素 == 在 DOM 中查找 HTML 元素的最简单的方法,是通过使用元素的 id。 本例查找 id="intro" 元素: <sample title="" desc="" lang="html" hererun="1"> var x=document.getElementById("intro"); </sample> <run name=""> <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>小白教程(xiaobai.wang)</title> </head> <body> <p id="intro">你好世界!</p> <p>该实例展示了 <b>getElementById</b> 方法!</p> <script> x=document.getElementById("intro"); document.write("<p>文本来自 id 为 intro 段落: " + x.innerHTML + "</p>"); </script> </body> </html> </run> 如果找到该元素,则该方法将以对象(在 x 中)的形式返回该元素。 如果未找到该元素,则 x 将包含 null。 == 通过标签名查找 HTML 元素 == 本例查找 id="main" 的元素,然后查找 id="main" 元素中的所有 <p> 元素: <sample title="" desc="" lang="html" hererun="1"> var x=document.getElementById("main"); var y=x.getElementsByTagName("p"); </sample> <run name=""> <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>小白教程(xiaobai.wang)</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=x.getElementsByTagName("p"); document.write('id="main"元素中的第一个段落为:' + y[0].innerHTML); </script> </body> </html> </run> == 通过类名找到 HTML 元素 == 本例通过 '''[[met document getelementsbyclassname|getElementsByClassName]]''' 函数来查找 class="intro" 的元素: <sample title="" desc="" lang="html" hererun="1"> var x=document.getElementsByClassName("intro"); </sample> <run name=""> <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>小白教程(xiaobai.wang)</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> <p><b>注意:</b>Internet Explorer 8 及更早 IE 版本不支持 getElementsByClassName() 方法。</p> </body> </html> </run> == HTML DOM 教程 == 在本教程接下来的篇幅中,您将学到: * 如何改变 HTML 元素的内容 (innerHTML) * 如何改变 HTML 元素的样式 (CSS) * 如何对 HTML DOM 事件做出反应 * 如何添加或删除 HTML 元素
返回至“
JavaScript HTML DOM
”。
上一节:
JavaScript_类继承
下一节:
JavaScript_HTML_DOM_改变_HTML_内容