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方法来添加删除元素
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 对象还包含属性节点和文本节点。
HTML对象
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
