网页中加载obj模型比较慢_【JavaScript】DOM文档对象模型-CSDN博客

本文链接：https://blog.csdn.net/weixin_39778582/article/details/111275416

本文介绍了如何使用JavaScript的DOM文档对象模型来高效地操作网页元素。包括通过ID、标签名和类名查找元素，改变HTML内容、属性及CSS样式，并探讨了在不同事件触发时进行修改的方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

概述

当网页被加载时，浏览器会创建页面的文档对象模型(Document Object Model)。

通过 HTML DOM，可访问 JavaScript HTML 文档的所有元素。

HTML DOM 模型被构造为对象的树：

JavaScript 能够改变页面中的所有 HTML 元素
JavaScript 能够改变页面中的所有 HTML 属性
JavaScript 能够改变页面中的所有 CSS 样式
JavaScript 能够对页面中的所有事件做出反应

查找 HTML 元素

通常，通过 JavaScript，您需要操作 HTML 元素。为了做到这件事情，您必须首先找到该元素。有三种方法来做这件事：

通过 id 找到 HTML 元素
通过标签名找到 HTML 元素
通过类名找到 HTML 元素

示例：通过id找到HTML元素：

var x=document.getElementById("userID");

示例：通过标签名查找 HTML 元素

//查找 id="main" 的元素，然后查找 id="main" 元素中的所有

元素


var x=document.getElementById("main");
var y=x.getElementsByTagName("p");

示例：通过类名找到 HTML 元素：

var x=document.getElementsByClassName("userClass");

改变HTML

改变 HTML 输出流

<html><body><script>    document.write(Date());script>body>html>

注意：不要在文档(DOM)加载完成之后使用 document.write()，会覆盖该文档。

改变 HTML 内容

语法：

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

示例：

<html>
<body>

<p id="p1">Hello World!p>

<script>
    document.getElementById("p1").innerHTML="新文本!";
script>

body>
html>

改变 HTML 属性

语法：

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

示例：

<html><body><img id="image" src="smiley.gif"><script>    document.getElementById("image").src="landscape.jpg";script>body>html>

改变CSS

语法：

document.getElementById(id).style.property=新样式

示例：

<html><head><meta charset="utf-8"><title>示例title>head><body><p id="p1">Hello World!p><p id="p2">Hello World!p><script>document.getElementById("p2").style.color="blue";document.getElementById("p2").style.fontFamily="Arial";document.getElementById("p2").style.fontSize="larger";script><p>以上段落通过脚本修改。p>body>html>

使用事件修改：

<html><body><h1 id="id1">我的标题 1h1><button type="button"onclick="document.getElementById('id1').style.color='red'">
点我!button>body>html>

显示隐藏元素：

<html><head><meta charset="utf-8"><title>示例title>head><body><p id="p1">这是一个文本。这是一个文本。这是一个文本。这是一个文本。这是一个文本。这是一个文本。这是一个文本。p><input type="button" value="隐藏文本" onclick="document.getElementById('p1').style.visibility='hidden'" /><input type="button" value="显示文本" onclick="document.getElementById('p1').style.visibility='visible'" />body>html>

事件

在事件发生时执行 JavaScript，比如当用户在 HTML 元素上点击时。

HTML 事件常见的有：

当用户点击鼠标时
当网页已加载时
当图像已加载时
当鼠标移动到元素上时
当输入字段被改变时
当提交 HTML 表单时
当用户触发按键时

示例：

<html><body><h1 onclick="this.innerHTML='我在学习js!'">点击文本!h1>body>html>

事件属性

//向 button 元素分配 onclick 事件：
"displayDate()">点这里</button>

使用 HTML DOM 来分配事件

//向 button 元素分配 onclick 事件：