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元素和样式的各种方法，这些操作都是通过HTML文档对象模型（HTML DOM）来实现的。 首先，创建新的HTML元素是操作HTML文档的基本技能之一。在JavaScript中，创建元素涉及到创建元素...
`test.js`可能是实现这种功能的一个脚本文件，其中包含了动态插入HTML元素的JavaScript代码。 在`Noname1.html`这个文件中，很可能展示了一个使用JavaScript动态插入HTML元素的实际例子。你可以打开这个文件查看其...
这篇教程——"JavaScript学习手册十四：HTML DOM-文档元素的操作（二）"深入探讨了如何使用JavaScript来操纵HTML文档中的元素，进一步提升网页动态性和交互性。 DOM是HTML和XML文档的一种结构化表示，它将网页内容...
- 利用CSS3的`transition`和`animation`属性结合JavaScript操作DOM实现更复杂的动画。 9. **事件冒泡与事件捕获** - 事件冒泡：事件从最深的节点开始，逐级向上层节点传播事件。 - 事件捕获：事件从最外层节点...
这些操作可以通过JavaScript来实现，它能够直接操作DOM（Document Object Model），即文档对象模型，从而改变HTML元素的状态或内容。 #### 常用方法 1. **通过ID获取元素并修改属性** JavaScript提供了多种方式...
JS 动态添加删除 HTML 元素实例 动态添加删除 HTML 元素是前端开发中常见的需求之一，今天我们来探讨如何使用 JavaScript 实现动态添加删除 HTML 元素的实例。 首先，让我们了解一下 HTML 文档对象模型（DOM），它...
JS 操作元素方法是指通过 JavaScript 来访问和处理文档对象模型（DOM）的元素属性和方法。DOM 是面向 HTML 和 XML 文档的 API，为文档提供了结构化表示，并定义了如何通过脚本来访问文档结构。 JS 操作元素方法可以...
首先，让我们了解一下如何通过JavaScript操作HTML元素。在HTML中，每个元素都有一个唯一的ID或类名，JS可以通过`document.getElementById`或`document.querySelector`等方法找到这些元素。例如： ```javascript var...
- DOM是JavaScript操作HTML文档的标准接口，它将HTML或XML文档解析为树形结构，每个节点对应文档的一个部分。 2. **窗口对象**： - `window`对象是JavaScript的全局对象，代表浏览器的整个窗口。 - 子窗口可以...
标题“js实现键盘选择html元素”揭示了一个使用JavaScript来实现在HTML页面中通过键盘导航的交互功能。在网页设计中，这种功能增强了用户体验，特别是对于那些依赖键盘操作的用户，如残障人士或习惯于使用键盘快捷键...
4. DOM操作：演示如何使用JavaScript操作HTML元素。 5. 事件处理：介绍如何响应用户的点击、滚动等行为。 6. AJAX异步通信：讲解如何在不刷新页面的情况下与服务器交换数据。 7. 实例分析：通过实际的网页项目，展示...
**在JOINTJS元素中使用HTML** JointJS是一款强大的JavaScript库，用于构建可交互的图形化建模工具和...这个实践过程不仅加深了对JointJS的理解，也展示了如何在图形界面中集成HTML元素，从而实现更丰富的用户交互。
通过定义特定的class或id，我们可以为每个元素分配独特的样式，同时为JavaScript提供操作的对象。 JavaScript，一种强大的客户端脚本语言，赋予了网页动态交互的能力。在3D元素周期表的项目中，JavaScript发挥着...
在JavaScript编程中，获取HTML元素的位置是一项常见的任务，特别是在构建复杂的网页布局或者进行交互式设计时。本资源包提供了一种解决这个问题的方法，特别适用于处理跨框架（iframe）的情况，而且支持无限级嵌套。...
`scalable.js` 是一个专为此目的设计的JavaScript插件，它能够帮助开发者实现HTML元素根据父元素大小动态缩放的效果。这一特性对于保持网页内容在不同屏幕尺寸下的视觉一致性至关重要。 **1. scalable.js 插件的...
在JavaScript的世界里，HTML DOM（Document Object Model）是网页内容的一种结构化表示，它允许我们通过编程方式操纵HTML元素。本实践项目“js_HTML_Dom操作练习”旨在帮助初学者熟悉DOM的基本操作，包括查找、修改...
DOM 操作：通过 JavaScript 操作 HTML 元素来实现游戏界面的动态展示和用户输入的响应； 数组操作：使用数组来存储游戏所需要的成语数据和用户已经使用过的成语，通过数组方法来进行添加、删除等操作； 条件语句和...
本篇文章将详细探讨如何使用JavaScript来操作HTML元素的样式。 首先，我们需要了解DOM（Document Object Model），它是HTML或XML文档的结构化表示。在JavaScript中，我们可以使用DOM API来查找、访问和修改HTML元素...