JavaScript HTML DOM 学习笔记

最新推荐文章于 2025-08-23 02:53:08 发布

转载最新推荐文章于 2025-08-23 02:53:08 发布 · 63 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/liangdecha/p/9675860.html

文章标签：

#javascript #ui #ViewUI

本文详细介绍了如何使用JavaScript通过HTML DOM模型操作网页元素，包括查找、改变内容、属性和样式，以及响应事件的方法。提供了多种查找元素的示例，如通过ID、标签名和类名，并展示了如何修改元素的内容、属性和样式。

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

HTML DOM (文档对象模型) 概述列表传送门

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

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

通过可编程的对象模型，JavaScript 获得了足够的能力来创建动态的 HTML。

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

查找HTML元素

document.getElementById("id"); 通过id查找

document.getElementsByTagName("tag"); 通过标签名查找

document.getElementsByClassName("class"); 通过类名查找

----------实例---------

查找id="main"元素中的所有p元素

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

改变HTML元素内容

document.getElementById("id").innerHTML = new content; //只能通过查找id修改

----------实例----------

<div class="alert01" id="yd">
    <p id="yp" class="yp">HAHAHA</p>
</div>


var y = document.getElementById("yp");
y.innerHTML = "修改内容";

改变HTML元素属性

document.getElementById("id").attribute = 新属性;

----------实例----------

<div>
    <img src="图片ui/456.jpg" alt="" id="image">
</div>

document.getElementById("image").src = "图片ui/222.jpg";
document.getElementById("image").width = 300;

改变 HTML元素样式

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

----------实例---------

在实例中样式显示的优先等级为

 width: 100px !important;  >  document.getElementById("image").width = 300;  >  document.getElementById("image").style.width = 500;  >  width:100px;

<style type="text/css">
   #p1{
        background: #000;
        color: #000 !important; /*优先*/
    }
    #image{
        width: 100px !important; /*优先*/
    }
</style>

---------------------------------------------------------------

<div id="ex">
    <img src="图片ui/456.jpg" alt="" id="image">
    <p id="p1" style="background:#666;">改变样式</p>
</div>

----------------------------------------------------------------

<script type="text/javascript">
      document.getElementById("image").src = "图片ui/222.jpg";
      document.getElementById("image").width = 300;  

      document.getElementById("image").style.width = 500;

      var p1 = document.getElementById("p1");
      p1.style.background = "#99cccc";
      p1.style.color = "#fff";

      document.getElementById("ex").style.textAlign = "center";
</script>