JavaScript HTML DOM - 改变 HTML
HTML DOM 允许 JavaScript 改变 HTML 元素的内容。
改变 HTML 输出流
JavaScript 能够创建动态的 HTML 内容:
今天的日期是: <script type="text/javascript">// <![CDATA[ document.write(Date()); // ]]></script> Wed Nov 20 11:48:49 2013
在 JavaScript 中,document.write() 可用于直接向 HTML 输出流写内容。
实例
<!DOCTYPE html> <html> <body> <script> document.write(Date()); </script> </body> </html>
提示:绝不要使用在文档加载之后使用 document.write()。这会覆盖该文档。
改变 HTML 内容
修改 HTML 内容的最简单的方法时使用 innerHTML 属性。
如需改变 HTML 元素的内容,请使用这个语法:
document.getElementById(id).innerHTML=new HTML
实例
本例改变了 <p> 元素的内容:
<html> <body> <p id="p1">Hello World!</p> <script> document.getElementById("p1").innerHTML="New text!"; </script> </body> </html>
实例
本例改变了 <h1> 元素的内容:
<!DOCTYPE html> <html> <body> <h1 id="header">Old Header</h1> <script> var element=document.getElementById("header"); element.innerHTML="New Header"; </script> </body> </html>
例子解释:
- 上面的 HTML 文档含有 id="header" 的 <h1> 元素
- 我们使用 HTML DOM 来获得 id="header" 的元素
- JavaScript 更改此元素的内容 (innerHTML)
改变 HTML 属性
如需改变 HTML 元素的属性,请使用这个语法:
document.getElementById(id).attribute=new value
实例
本例改变了 <img> 元素的 src 属性:
<!DOCTYPE html>
<html>
<body>
<img id="image" src="smiley.gif">
<script>
document.getElementById("image").src="landscape.jpg"; 改变属性src的内容
</script>
</body>
</html>
例子解释:
- 上面的 HTML 文档含有 id="image" 的 <img> 元素
- 我们使用 HTML DOM 来获得 id="image" 的元素
- JavaScript 更改此元素的属性(把 "smiley.gif" 改为 "landscape.jpg")
相关推荐
JavaScript HTML DOM 元素(节点) 创建新的 HTML 元素 如需向 HTML DOM 添加新元素,您必须首先创建该元素(元素节点),然后向一个已存在的元素追加该元素。 实例 <p id=p1>This is a paragraph. <p id=p2>This...
在子窗口通过js操作父窗口中的元素,涉及js、html、dom
在HTML页面中,除了系统支持的HTML元素外,是否可以建立自定义的HTML元素呢?答案是可以的。 自定义的HTML元素与系统自身的HTML元素地位相同,都可以用document.getElementById来获得,区别在于,自定义的HTML元素...
DOM 操作:通过 JavaScript 操作 HTML 元素来实现游戏界面的动态展示和用户输入的响应; 数组操作:使用数组来存储游戏所需要的成语数据和用户已经使用过的成语,通过数组方法来进行添加、删除等操作; 条件语句和...
javascript动态判断html元素并执行不同的操作.docx
本文实例讲述了javascript操作select元素的用法。分享给大家供大家参考。具体分析如下: 这里熟悉一下js对select元素的操作,html页面中建立一个form,其中包含一个select元素和submit按钮。 当选择select中某一项时...
select元素javascript常用操作,实用!
小例子,用js来操作页面元素,例如 表格等等,用到了jquery,和html等等。。。
Webstorm、Text 、Notepad++` 等任意html编辑软件进行运行及修改编辑等操作) HTML静态网页设计作业,采用DIV+CSS布局,共有多个页面,使用CSS排版比较丰富,色彩鲜明有活力,顶部导航及底部 区域背景色为100%宽度...
以下是一个前端开发教程的概述,帮助你了解需要... DOM和BOM:理解文档对象模型(DOM)和浏览器对象模型(BOM)的概念,学习如何通过JavaScript操作HTML元素和浏览器窗口。 事件处理:学习JavaScript的事件处理机制
前言 ...一、添加和删除节点(HTML 元素) 1、创建节点 1)创建该元素(元素节点); 2)向一个已存在的元素追加该元素。 语法:appendChild(newnode) eg: 这是一个段落 这是另一个段落 </div>
主要介绍了JS添加或删除HTML dom元素的方法,结合实例形式分析了javascript针对HTML DOM元素节点的创建、追加、删除等相关操作技巧与注意事项,需要的朋友可以参考下
Webstorm、Text 、Notepad++` 等任意html编辑软件进行运行及修改编辑等操作) HTML静态网页设计作业,采用DIV+CSS布局,共有多个页面,使用CSS排版比较丰富,色彩鲜明有活力,顶部导航及底部 区域背景色为100%宽度...
Webstorm、Text 、Notepad++` 等任意html编辑软件进行运行及修改编辑等操作) HTML静态网页设计作业,采用DIV+CSS布局,共有多个页面,使用CSS排版比较丰富,色彩鲜明有活力,顶部导航及底部 区域背景色为100%宽度...
html、JSP页面使用js操作svg元素实例
<html5+css3+js>文档对象模型,对元素的各种操作
本文实例讲述了javascript操作元素的常见方法。分享给大家供大家参考,具体如下: 获取元素方法一 可以使用内置对象document上的getElementById方法来获取页面上设置了id属性的元素,获取到的是一个html对象,然后将...
Webstorm、Text 、Notepad++` 等任意html编辑软件进行运行及修改编辑等操作) HTML静态网页设计作业,采用DIV+CSS布局,共有多个页面,使用CSS排版比较丰富,色彩鲜明有活力,顶部导航及底部 区域背景色为100%宽度...