JavaScript与DOM关系、JavaScript+DOM能做什么_javascript和dom的关系-优快云博客

本文链接：https://blog.youkuaiyun.com/jiangshangchunjiezi/article/details/87936047

本文深入解析JavaScript与DOM的关系，阐述如何使用DOM获取和操作HTML元素，包括改变元素内容、样式和属性，创建新元素，以及事件监听等。通过实例演示灯开关效果和表单验证，展示JavaScript+DOM的强大功能。

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

一、JavaScript与DOM关系

DOM是HTML和XML文档的编程接口。它定义了文档的逻辑结构和对文档访问操作的方法。具体而言，编程人员可以利用DOM create和build 文档、导航（navigate）结构、操作（增、删、改）元素和内容。任何在HTML或XML文档中的东西使用DOM都可以增、删、改、查（access）。

DOM获取元素的方式：https://blog.youkuaiyun.com/jiangshangchunjiezi/article/details/76735193

注意DOM并不是编程语言，利用DOM获取到要操作的元素，通过编程语言对其操作，比如JavaScript。如果没有DOM，JavaScript不能访问网页上任何内容。也就是说，DOM是JavaScript操作网页的桥梁。

二、JavaScript+DOM能做什么

Change/Remove HTML element in the DOM/on the page
Change & CSS styles to elements
Read & change element attributes(href,src,alt,custom)
Create new HTML elements and insert them into the DOM/page
Attach event listeners to elements(click,keypress,submit)
Navigating the DOM and the Query Selector
Changing the DOM/manipulating HTML elements,content & CSS
Interating with forms & events(submit,click,keypress)
Creating new elements vai JS and insert them into the DOM

三、JavaScript+DOM举例

1.功能：点击操作，实现灯开/关（也就是说修改样式）

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<script>
function changeImage()
{
	element=document.getElementById('myimage')
	if (element.src.match("bulbon"))
	{
		element.src="/images/pic_bulboff.gif";
	}
	else
	{
		element.src="/images/pic_bulbon.gif";
	}
}
</script>
<img id="myimage" onclick="changeImage()" border="0" src="/images/pic_bulboff.gif" width="100" height="180">
<p>点击灯泡 开/关 灯</p>

</body>
</html>

2.校验表单，减少提交服务器的次数（Validation）

比如是否为空、字段是否符合要求

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>

  <title>My JSP 'login.jsp' starting page</title>

</head>

<body>
<script type="text/javascript" >
  function checkall(){

    var username=document.getElementById("un").value;
    var pwd= document.getElementById("pw").value;

    if(username!="" && pwd!="" )
    {

      return true;

    }
    else{
      window.alert("请将信息填写完整");
      return false;
    }


  }
</script>
This is my JSP page. <br>
<form action="login" method="post" onsubmit="return checkall()">
  username:<input type="text" name="username" id="un"><br>
  password:<input type="password" name="pwd" id="pw"><br>
    <input type="submit" value="提交"/>
</form>
</body>
</html>