JavaScript HTML DOM - 改变 HTML

Created2024-12-07|Updated2024-12-07|codejs

|Post Views:

JavaScript HTML DOM - 改变 HTML

HTML DOM 允许 JavaScript 改变 HTML 元素的内容。

改变 HTML 输出流
JavaScript 能够创建动态的 HTML 内容：
今天的日期是：

在 JavaScript 中，document.write() 可用于直接向 HTML 输出流写内容。

实例

<!DOCTYPE html><html>

尝试一下 »

绝对不要在文档(DOM)加载完成之后使用 document.write()。这会覆盖该文档。

改变 HTML 内容
修改 HTML 内容的最简单的方法是使用 innerHTML 属性。
如需改变 HTML 元素的内容，请使用这个语法：

document.getElementById(id).innerHTML=新的 HTML

本例改变了

元素的内容：

实例

Hello World!

尝试一下 »

本例改变了

元素的内容：

实例

<!DOCTYPE html><html>

尝试一下 »

实例讲解：

上面的 HTML 文档含有 id=”header” 的

元素
我们使用 HTML DOM 来获得 id=”header” 的元素
JavaScript 更改此元素的内容 (innerHTML)

改变 HTML 属性
如需改变 HTML 元素的属性，请使用这个语法：

document.getElementById(id).attribute=新属性值

本例改变了元素的 src 属性：

实例

<!DOCTYPE html><html>

尝试一下 »

实例讲解：

上面的 HTML 文档含有 id=”image” 的元素
我们使用 HTML DOM 来获得 id=”image” 的元素
JavaScript 更改此元素的属性（把 “smiley.gif” 改为 “landscape.jpg”）

Author: hory-ai horysk

Link: https://www.hory-ai.com/2024/12/07/js/JavaScriptHTMLDOM-改变HTML/

Copyright Notice: All articles on this blog are licensed under hory-ai.com horysk.com unless otherwise stated.

Related Articles

JavaScript - 测试 Prototype

JavaScript - 测试 Prototype 测试 JavaScript 框架库 - Prototype 引用 Prototype如需测试 JavaScript 库，您需要在网页中引用它。为了引用某个库，请使用标签，其 src 属性设置为库的 URL：引用 Prototype Prototype 描述Prototype 提供的函数可使 HTML DOM 编程更容易。与 jQuery 类似，Prototype 也有自己的 $() 函数。$() 函数接受 HTML DOM 元素的 id 值（或 DOM 元素），并会向 DOM 对象添加新的功能。与 jQuery 不同，Prototype 没有用以取代 window.onload() 的 ready() 方法。相反，Prototype 会向浏览器及 HTML DOM 添加扩展。在 JavaScript 中，您可以分配一个函数以处理窗口加载事件： JavaScript 方式： function myFunction(){var obj=document.getElementById("h01"); ...

HTML DOM Document 对象

HTML DOM Document 对象 HTML DOM 节点在 HTML DOM (Document Object Model) 中 , 每一个元素都是节点: 文档是一个文档节点。所有的HTML元素都是元素节点。所有 HTML 属性都是属性节点。文本插入到 HTML 元素是文本节点。are text nodes。注释是注释节点。 Document 对象当浏览器载入 HTML 文档, 它就会成为 Document 对象。Document 对象是 HTML 文档的根节点。Document 对象使我们可以从脚本中对 HTML 页面中的所有元素进行访问。提示：Document 对象是 Window 对象的一部分，可通过 window.document 属性对其进行访问。浏览器支持所有主要浏览器都支持 Document 对象。 Document 对象属性和方法HTML文档中可以使用以下属性和方法: 属性 /...

JavaScript - 测试 jQuery

JavaScript - 测试 jQuery 测试 JavaScript 框架库 - jQuery 引用 jQuery如需测试 JavaScript 库，您需要在网页中引用它。为了引用某个库，请使用标签，其 src 属性设置为库的 URL：引用 jQuery jQuery 描述主要的 jQuery 函数是 $() 函数（jQuery 函数）。如果您向该函数传递 DOM 对象，它会返回 jQuery 对象，带有向其添加的 jQuery 功能。jQuery 允许您通过 CSS 选择器来选取元素。在 JavaScript 中，您可以分配一个函数以处理窗口加载事件： JavaScript 方式： function myFunction(){var obj=document.getElementById("h01"); obj.innerHTML="Hello jQuery";}onload=myFunction; 等价的 jQuery 是不同的： jQuery 方式： function myFunction(){ ...

JavaScript Array（数组）对象

JavaScript Array（数组）对象数组对象的作用是：使用单独的变量名来存储一系列的值。在线实例创建数组, 为其赋值：实例 var mycars = new Array(); mycars[0] = "Saab"; mycars[1] = "Volvo"; mycars[2] = "BMW"; 尝试一下 » 页面底部你可以找到更多的实例。什么是数组?数组对象是使用单独的变量名来存储一系列的值。如果你有一组数据（例如：车名字），存在单独变量如下所示： varcar1=”Saab”;varcar2=”Volvo”;varcar3=”BMW”; 然而，如果你想从中找出某一辆车？并且不是3辆，而是300辆呢？这将不是一件容易的事！最好的方法就是用数组。数组可以用一个变量名存储所有的值，并且可以用变量名访问任何一个值。数组中的每个元素都有自己的的ID，以便它可以很容易地被访问到。创建一个数组创建一个数组，有三种方法。下面的代码定义了一个名为 myCars的数组对象：1:...

JavaScript Boolean（布尔）对象

JavaScript Boolean（布尔）对象 Boolean（布尔）对象用于将非布尔值转换为布尔值（true 或者 false）。在线实例检查布尔值检查布尔对象是 true 还是 false。完整的 Boolean（布尔）对象参考手册我们提供 JavaScript Boolean 对象参考手册，其中包括所有可用于布尔对象的属性和方法。该手册包含了对每个属性和方法的详细描述以及相关实例。创建 Boolean 对象Boolean 对象代表两个值:”true” 或者 “false”下面的代码定义了一个名为 myBoolean 的布尔对象： var myBoolean=new Boolean();如果布尔对象无初始值或者其值为: 0-0null“”falseundefinedNaN 那么对象的值为 false。否则，其值为 true（即使当变量值为字符串 “false” 时）！

JavaScript Browser 对象实例

JavaScript Browser 对象实例使用JavaScript来访问和控制浏览器对象实例。Window 对象弹出一个警告框弹出一个带折行的警告框弹出一个确认框，并提醒访客点击的内容弹出一个提示框点击一个按钮时，打开一个新窗口打开一个新窗口，并控制其外观打开多个新窗口确保新的窗口没有获得焦点确保新的窗口获得焦点关闭新窗口检查新的窗口是否已关闭返回新窗口的名字传输一些文本到源（父）窗口相对于当前位置移动新窗口移动新窗口到指定位置打印当前页面用像素指定窗口大小指定窗口大小由指定的像素数滚动内容滚动到指定内容处一个简单的时钟用setTimeout() 和 clearTimeout()设置和停止定时器用setInterval() 和 clearInterval()设置和停止定时器更多的Window 对象的例子，在我们的JavaScript 参考手册。 Navigator 对象访问者的浏览器的详细更多的Navigator 对象的例子，在我们的JavaScript 参考手册。 Screen 对象访问者的屏幕的详细更多的Screen...