本文共 2785 字，大约阅读时间需要 9 分钟。
DOM（Document Object Model，文档对象模型）是描述网页内容的结构化接口。通过DOM，可以用JavaScript对HTML文档中的各个标签进行操作和控制。对于熟悉软件开发的人员而言，DOM可以被视为网页的API，使得JavaScript能够方便地操作和控制网页中的各个元素。
在JavaScript中，为了操作HTML标签，首先需要通过document对象找到目标标签。document对象表示整个HTML文档，已经加载好的网页会自动生成这个对象。
通过id查找元素
使用document.getElementById("id")方法，可以通过标签的id属性快速找到对应的标签对象。例如： var obj = document.getElementById("bt"); 这个方法返回的是一个单一的标签对象。
通过标签名查找元素
使用document.getElementsByTagName("标签名")方法，可以通过标签的标签名返回所有匹配的标签对象集合。例如： var objs = document.getElementsByTagName("input"); 需要注意的是，返回的是一个HTMLCollection对象，无法直接调用方法，必须使用数组方式操作。例如：
objs[0].style.backgroundColor = "red";
通过类名查找元素
使用document.getElementsByClassName("类名")方法，可以通过标签的class属性返回所有匹配的标签对象集合。例如： var objs = document.getElementsByClassName("c1"); 返回的是一个HTMLCollection对象，同样需要使用数组方式操作。
通过name属性查找元素
使用document.getElementsByName("name")方法，可以通过标签的name属性返回所有匹配的标签对象集合。例如： var objs = document.getElementsByName("socre"); 通过document.getElementById("id").属性 = "属性值"的方式，可以改变标签的属性。例如，通过document.body.bgColor可以改变页面的背景颜色。
HTML标签的内容可以通过innerHTML和innerText属性来修改。innerHTML属性返回并修改标签内的全部 HTML 内容，包括子标签和文本；innerText属性仅返回并修改标签内的文本内容，不包括子标签。
使用innerHTML修改内容
var div1 = document.getElementById("div1");div1.innerHTML = "修改后的内容"; 使用innerText修改内容
var div2 = document.getElementById("div2");div2.innerText = div1.innerText; HTML DOM使JavaScript能够响应HTML事件。通过绑定事件处理函数，可以实现对页面交互的操作。
绑定事件处理函数
使用obj.事件名称 =函数的方式可以将函数与事件绑定。例如： document.getElementById("btn").onclick = function() { console.log("按钮被点击");}; 事件处理函数的执行顺序
确保<script>标签放在需要处理事件的标签之前，或者使用onload事件来确保标签加载后再执行绑定函数。 表单验证可以减少后端服务器的负担，避免不正确数据的传输。通过在前端对用户输入的数据进行验证，可以提高用户体验和数据安全性。
form.onsubmit事件来验证表单数据。例如： form.onsubmit = function() { var account = document.getElementById("accountId").value; var pw = document.getElementById("pwId").value; if (account.length === 0) { alert("请输入用户名"); return false; } if (pw.length === 0 || pw.length > 16) { alert("密码越界"); return false; } return true;}; 正则表达式（Regular Expression，简称RegExp）是一种强大的字符串匹配工具，用于描述字符模式。通过正则表达式可以对输入数据进行验证，确保数据格式符合要求。
^：匹配字符串的开头。$：匹配字符串的结尾。*：前面的字符零次或多次出现。+：前面的字符一次或多次出现。{n}：前面的字符恰好出现n次。{n,m}：前面的字符至少出现n次，最多出现m次。.：匹配任意单个字符。\d：匹配数字字符（等价于 [0-9]）。\D：匹配非数字字符（等价于 [^0-9]）。[a-z]：匹配小写字母a到z。[A-Z]：匹配大写字母A到Z。[^a-z]：匹配非小写字母字符。x|y：匹配x或y。\w：匹配字母、数字和下划线（等价于 [A-Z,a-z,0-9,_]）。\W：匹配非字母、非数字和非下划线字符（等价于 [^A-Z,a-z,0-9,_]）。[^\u4e00-\u9fa5]：匹配非中文字符。var reg = /^\d+$/;
var reg = /^[a-z]+$/;
var reg = /^[\u4e00-\u9fa5]{2,10}$/; var reg = /^[a-zA-Z0-9_.+-]+@([a-zA-Z0-9-]+)\.([a-zA-Z0-9-]+)\.[a-zA-Z0-9-]+$/;
通过以上方法，可以在表单输入中添加验证功能，确保数据的准确性和合法性。
转载地址：http://ecfd.baihongyu.com/