DOM（Document Object Model——文档对象模型）
DOM 介绍
介绍:什么是DOM，简单的说DOM是一套对文档的内容进行抽象和概念化的方法。DOM（Document Object Model——文档对象模型）是用来呈现以及与任意 HTML 或 XML文档交互的API。DOM 是载入到浏览器中的文档模型，以节点树的形式来表现文档，每个节点代表文档的构成部分（例如:页面元素、字符串或注释等等）。DOM 是万维网上使用最为广泛的API之一，因为它允许运行在浏览器中的代码访问文件中的节点并与之交互。节点可以被创建，移动或修改。节点可以关联上事件处理器，一旦某一事件被触发了，那些事件处理器就会被执行。
DOM主要用于操作网页的标签内容,标签样式,标签属性,以及标签(增删改查)
DOM学习的最终目的 完成一些常见网页特效 轮播图 选项卡...
注意：DOM既不是HTML的一部分,也不是JavaScript一部分,而是浏览器厂商都实现了的一些独立的规则，并允许JavaScript可以访问和操作存储在DOM中的内容（DOM 也可以使用其他的语言来实现）
什么是DOM
文档对象模型（Document Object Model，简称DOM），是 W3C 组织推荐的处理可扩展标记语言（html或者xhtml）的标准编程接口。
W3C 已经定义了一系列的 DOM 接口，通过这些 DOM 接口可以改变网页的内容、结构和样式。
事件基础
事件概述
JavaScript 使我们有能力创建动态页面，而事件是可以被 JavaScript 侦测到的行为。
简单理解: 触发--- 响应机制。
网页中的每个元素都可以产生某些可以触发 JavaScript 的事件，例如，我们可以在用户点击某按钮时产生一个 事件，然后去执行某些操作。
事件三要素
事件源（谁）:触发事件的元素
事件类型（做什么）: 例如 onclick 点击事件
事件处理程序（怎么做）:事件触发后要执行的代码(函数形式)，事件处理函数
事件的绑定方式
事件的绑定方式有二种:动态绑定与行内绑定
动态绑定事件
说明: 在JS代码里面,动态给指定DOM元素绑定事件
动态事件绑定的步骤如下:
第一步:获取事件源(获取DOM对象)
第二步:注册事件(绑定事件)
第三步:添加事件处理程序(一般是一个匿名函数)
动态绑定语法
dom对象.on事件类型 = 匿名函数 或者 有名函数名
btn1.onmouseover = function () {
console.log(2222);
}
function fn() {
console.log(3333);
}
btn1.onmouseout = fn;
行内绑定事件
说明:所谓的行内绑定事件 是将事件写在HTML标签里面
HTML标签中自带一些事件属性 比如 onclick onmouseover等
DOM元素获取
DOM把整个页面当做一个文档, DOM中最大的对象就是document对象
console.log(document);
如果想更好的查看某个对象的方法和属性, 可以使用console.dir()方法 dir是directory目录的简写
console.dir(document);
获取DOM元素的方法有如下:
根据ID获取元素
document.getElementById("id属性值"); 返回值 单个DOM对象或者null
var oneDiv = document.getElementById("one");
console.log(oneDiv);
console.log(document.getElementById("two"));
根据标签名获取元素
document.getElementsByTagName("标签名") 返回值是一个伪数组(类数组对象)
var objDivs = document.getElementsByTagName("div");
console.log(objDivs);
console.log("");
console.log(Array.isArray(objDivs));
console.log(objDivs.constructor === Array);
console.log(objDivs instanceof Array);
console.log("");
console.log(objDivs[0]);
console.log(objDivs[1]);
console.log(objDivs[2]);
console.log("");
console.log(objDivs.length);
根据标签的name属性获取元素 返回值是一个伪数组
document.getElementsByName("name属性值")
var username = document.getElementsByName("username");
console.log(username);
var usersex = document.getElementsByName("usersex");
console.log(usersex);
H5新增获取元素方式 IE低版本浏览器不支持(IE678)
document.getElementsByClassName("class属性值") 返回值是一个伪数组
var objTwos = document.getElementsByClassName("two");
console.log(objTwos);
document.querySelector("带符号的css选择器") 找到"第一个"符合CSS选择器的元素 🧡
console.log(document.querySelector("#one"));
console.log(document.querySelector(".two"));
console.log(document.querySelector("input[name='usersex']"));
console.log(document.querySelector("div"));
console.log(document.querySelector("ul li"));
document.querySelectorAll("带符号css选择器") 找到"所有"符合CSS选择器的元素 🧡
console.log(document.querySelectorAll("ol li"));
console.log(document.querySelectorAll("dl dd"));
console.log(document.querySelectorAll("div"));
console.log(document.querySelectorAll(".two"));
console.log(document.querySelectorAll("#one"));
另外, document对象可以尝试换成其他dom父对象, 表示从指定的dom父对象里面查找元素
var objUl = document.querySelector("ul");
console.log(objUl.querySelectorAll("li"));
获取特殊元素( body,html )
获取body标签 document.body
console.log(document.body);
获取html标签 document.documentElement
console.log(document.documentElement);
常用事件
onchange事件
概念: onchange事件当用户更改、