HTML DOM（文档对象模型） 当网页被浏览器加载时，浏览器会创建文档对象模型（Document Object Model）。 HTML DOM 会被结构化成为一个对象树： 通过这个对象模型，javaScript 可以获取到页面中的所有元素并对元素对象进行操作： JavaScript 能改变页面中的所有 HTML 元素 JavaScript 能改变页面中的所有 HTML 属性 JavaScript 能改变页面中的所有 CSS 样式 JavaScript 能删除已有的 HTML 元素和属性 JavaScript 能添加新的 HTML 元素和属性 JavaScript 能对页面中所有已有的 HTML 事件作出反应 JavaScript 能在页面中创建新的 HTML 事件 HTML DOM 能够通过 JavaScript 进行访问。 在 DOM 中，所有 HTML 元素都被定义为对象。 可以通过改变对象的属性来改变元素状态 也可以使用DOM方法来添加删除元素 查找 HTML 元素 document.getElementById(id) 通过元素 id 来查找元素 document.getElementsByTagName(name) 通过标签名来查找元素 document.getElementsByClassName(name) 通过类名来查找元素 如果您需要查找匹配指定 CSS 选择器（id、类名、类型、属性、属性值等等）的所有 HTML 元素，请使用 querySelectorAll() 方法。(querySelectorAll() 不适用于 Internet Explorer 8 及其更早版本。) 改变 HTML 元素 element.innerHTML = new html content 改变元素的 inner HTML element.attribute = new value 改变 HTML 元素的属性值 element.setAttribute(attribute, value) 改变 HTML 元素的属性值 element.style.property = new style 改变 HTML 元素的样式 HTML 表单验证可以通过 JavaScript 完成。 如果表单域 (fname) 为空，该函数会提示一条消息，并返回 false，以防止表单被提交： JavaScript 实例 function validate() { let value = document.forms["firstForm"]["txtname"].value; if (value == "") { Console.log("Name cannot be null"); return false; } } 提交表单时可以调用该函数： HTML 表单实例 <form name="firstForm" action="/action_page.php" onsubmit="return validate()" method="post"> Name: <input type="text" name="txtname"> <input type="submit" value="Submit"> </form> HTML 约束验证 HTML5 引入了一种新的 HTML 验证概念，称为约束验证。 HTML 约束验证基于： 约束验证 HTML input 属性 约束验证 CSS 伪选择器 约束验证 DOM 属性和方法 比较常用的事件类型有： Onclick 点击事件 onload 页面加载事件 onunload 页面离开事件 onchange 内容改变事件 onmousedown 按钮点击事件 onmouseup 按钮释放事件 onfocus 元素获得的焦点事件 还可以通过element.addEventListener(event, function, useCapture)的语法为元素添加事件 useCapture”参数来规定传播类型。false，将使用冒泡传播，如果该值设置为 true，则是使用捕获传播。默认是false。 var x = document.getElementById("myBtn"); if (x.addEventListener) { // 针对主流浏览器，除了 IE 8 及更正版本 x.addEventListener("click", myFunction); } else if (x.attachEvent) { // 针对 IE 8 及更早版本 x.attachEvent("onclick", myFunction); } parentNode 父亲节点 childNodes[nodenumber] 孩子节点 firstChild 第一个孩子节点 lastChild 最后一个孩子节点 nextSibling 下一个兄弟节点 previousSibling 前一个兄弟节点 节点的操作方法 createTextNode 创建文本节点 appendChild 追加孩子节点 insertBefore 在某个节点前添加节点 removeChild 删除孩子节点 replaceChild 替换孩子节点 例如通过getElementsByTagName() 方法获取到的就是 HTMLCollection 对象即集合。 childNodes属性返回的就是NodeList对象即节点列表 HTMLCollection 与 NodeList 的区别 HTMLCollection是 HTML 元素的集合。 NodeList 是DOM节点的集合。 HTMLCollection 和 NodeList 对象都是对象列表（集合）。 它们都有项目数的 length 属性。 它们都可以通过索引访问每个项目。 可以通过名称、id 或索引号 来访问HTMLCollection中的各个对象。 NodeList只能通过索引号访问。 NodeList 对象还包含属性节点和文本节点。 document.anchors 返回拥有 name 属性的所有 <a> 元素。 document.applets 返回所有 <applet> 元素（HTML5 不建议使用） document.baseURI 返回文档的绝对基准 URI document.body 返回 <body> 元素 document.cookie 返回文档的 cookie document.doctype 返回文档的 doctype document.documentElement 返回 <html> 元素 document.documentMode 返回浏览器使用的模式 document.documentURI 返回文档的 URI document.domain 返回文档服务器的域名 document.domConfig 废弃。返回 DOM 配置 document.embeds 返回所有 <embed> 元素 document.forms 返回所有 <form> 元素 document.head 返回 <head> 元素 document.images 返回所有 <img> 元素 document.implementation 返回 DOM 实现 document.inputEncoding 返回文档的编码（字符集） document.lastModified 返回文档更新的日期和时间 document.links 返回拥有 href 属性的所有 <area> 和 <a> 元素 document.readyState 返回文档的（加载）状态 document.referrer 返回引用的 URI（链接文档） document.scripts 返回所有 <script> 元素 document.strictErrorChecking 返回是否强制执行错误检查 document.title 返回 <title> 元素 document.URL 返回文档的完整 URL
DOM元素
表单验证
事件
节点关系
集合和节点列表
HTML对象