JavaScript-DOM简介

之前我们说过JavaScript有三部分组成ECMAscript,BOM,DOM,之前我们都在了解JavaScript的语法即ECMAScript，今天我们开始了解DOM(文档对象模型（Document object Model），操作网页上的元素的API）

什么是DOM

DOM：Document Object Model，文档对象模型。DOM 为文档提供了结构化表示，并定义了如何通过脚本来访问文档结构。目的其实就是为了能让js操作html元素而制定的一个规范。

DOM就是由节点组成的。

节点（Node）：构成 HTML 网页的最基本单元。网页中的每一个部分都可以称为是一个节点，比如：html标签、属性、文本、注释、整个文档等都是一个节点。

虽然都是节点，但是实际上他们的具体类型是不同的。常见节点分为四类：

文档节点（文档）：整个 HTML 文档。整个 HTML 文档就是一个文档节点。
元素节点（标签）：HTML标签。
属性节点（属性）：元素的属性。
文本节点（文本）：HTML标签中的文本内容（包括标签之间的空格、换行）。

节点的类型不同，属性和方法也都不尽相同。所有的节点都是Object。

解析过程： HTML加载完毕，渲染引擎会在内存中把HTML文档，生成一个DOM树，getElementById是获取内中DOM上的元素节点。然后操作的时候修改的是该元素的属性。

DOM的作用

DOM可以做什么？

找对象（元素节点）
设置元素的属性值
设置元素的样式
动态创建和删除元素
事件的触发响应：事件源、事件、事件的驱动程序

DOM节点的获取

想要操作元素节点，必须首先要找到该节点。有三种方式可以获取DOM节点：

var div1 = document.getElementById("box1"); //方式一：通过 id 获取 一个 元素节点（为什么是一个呢？因为 id 是唯一的）var arr1 = document.getElementsByTagName("div"); //方式二：通过 标签名 获取 元素节点数组，所以有svar arr2 = document.getElementsByClassName("hehe"); //方式三：通过 类名 获取 元素节点数组，所以有s

DOM的节点并不是孤立的，因此可以通过DOM节点之间的相对关系对它们进行访问，节点的访问关系，是以属性的方式存在的

父节点	兄弟节点	子节点	所有子节点
parentNode	nextSibling	firstChild	childNodes
	nextElementSibling	firstElementChild	children
	previousSibling	lastChild
	previousElementSibling	lastElementChild

	节点.parentNode  //获取父节点下一个兄弟节点 = 节点.nextElementSibling || 节点.nextSibling前一个兄弟节点 = 节点.previousElementSibling || 节点.previousSibling节点自己.parentNode.children[index];  //随意得到兄弟节点第一个子元素节点 = 节点.firstElementChild || 节点.firstChild最后一个子元素节点 = 节点.lastElementChild || 节点.lastChild子节点数组 = 父节点.childNodes;   //获取所有节点。

DOM节点的操作

上一段的内容：节点的访问关系都是属性。

本段的内容：节点的操作都是函数（方法）。

创建节点

	新的标签(元素节点) = document.createElement("标签名");

<script type="text/javascript">var a1 = document.createElement("li");   //创建一个li标签var a2 = document.createElement("adbc");   //创建一个不存在的标签console.log(a1);console.log(a2);console.log(typeof a1);console.log(typeof a2);
</script>

插入节点

插入节点有两种方式，它们的含义是不同的。

方式1：

	父节点.appendChild(新的子节点); //如果新的子节点在页面上存在 则是会把节点移动到里面

解释：父节点的最后插入一个新的子节点。

方式2：

	父节点.insertBefore(新的子节点,作为参考的子节点)

解释：

在参考节点前插入一个新的节点。
如果参考节点为null，那么他将在父节点里面的最后插入一个子节点。

删除节点

格式如下：

	父节点.removeChild(子节点);

解释：用父节点删除子节点。必须要指定是删除哪个子节点。

如果我想删除自己这个节点，可以这么做：

	node1.parentNode.removeChild(node1);

复制节点

格式如下：

	要复制的节点.cloneNode();       //括号里不带参数和带参数false，效果是一样的。要复制的节点.cloneNode(true);

括号里带不带参数，效果是不同的。解释如下：

不带参数/带参数false：只复制节点本身，不复制子节点。
带参数true：既复制节点本身，也复制其所有的子节点。

我们可以获取节点的属性值、设置节点的属性值、删除节点的属性。

我们就统一拿下面这个标签来举例：

	<img src="images/1.jpg" class="img" title="hahah" alt="seeyou" id="a1">

获取节点属性

元素节点.属性名;
元素节点[属性名];
元素节点.getAttribute("属性名称");

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><img src="images/1.jpg" class="img" title="hahah" alt="seeyou" id="a1"><script>var myNode = document.getElementsByTagName("img")[0];console.log(myNode.src);console.log(myNode.className);   console.log(myNode.title);console.log("------------");console.log(myNode["src"]);console.log(myNode["className"]);console.log(myNode["title"]);</script>
</body>
</html>

设置节点属性

    myNode.src = "images/2.jpg"   //修改src的属性值myNode.className = "image2-box";  //修改class的name元素节点.setAttribute("属性名", "新的属性值");

删除节点属性

	元素节点.removeAttribute(属性名);myNode.removeAttribute("class");myNode.removeAttribute("id");

注意

innerHTML和innerText的区别

value：标签的value属性。
innerHTML：双闭合标签里面的内容（包含标签）。
innerText：双闭合标签里面的内容（不包含标签）。（老版本的火狐用textContent）

这里讲一下nodeType属性。

nodeType == 1 表示的是元素节点（标签）。记住：在这里，元素就是标签。
nodeType == 2 表示是属性节点。
nodeType == 3 是文本节点。

style属性

在DOM当中，如果想设置样式，有两种形式：

className（针对内嵌样式）
style（针对行内样式）

style是一个对象，只能获取行内样式，不能获取内嵌的样式和外链的样式

    元素.style.样式名元素.style["属性"];  //格式box.style["width"];  //举例元素.style.样式名 = 样式值;

我们通过style属性设置的样式都是行内样式，而行内样式有较高的优先级。但是如果在样式中的其他地方写了!important，则此时!important会有更高的优先级。

style属性的注意事项

style属性需要注意以下几点：

（1）样式少的时候使用。

（2）style是对象。我们在上方已经打印出来，typeof的结果是Object。

（3）值是字符串，没有设置值是“”。

（4）命名规则，驼峰命名。

（5）只能获取行内样式，和内嵌和外链无关。

（6）box.style.cssText = “字符串形式的样式”。

style的常用属性包括：

backgroundColor
backgroundImage
color
width
height
border
opacity 设置透明度 (IE8以前是filter: alpha(opacity=xx))

注意DOM对象style的属性和标签中style内的值不一样，因为在JS中，-不能作为标识符。比如：

DOM中：backgroundColor
CSS中：background-color

事件

事件简介

事件就是文档或浏览器窗口中发生的一些特定的交互瞬间。对于 Web 应用来说，有下面这些代表性的事件：点击某个元素、将鼠标移动至某个元素上方、关闭弹窗等等。JavaScript 是以事件驱动为核心的一门语言。JavaScript 与 HTML 之间的交互是通过事件实现的。

事件的三要素：

事件源：引发后续事件的html标签。
事件：js已经定义好了（见下图）。
事件驱动程序：对样式和html的操作。也就是DOM。

也就是说，我们可以在时间对应的属性中写一些js代码，当事件被触发时，这些代码将会执行。

代码书写步骤如下：

（1）获取事件源：document.getElementById(“box”); // 类似于Android里面的findViewById
（2）绑定事件：事件源box.事件onclick = function(){ 事件驱动程序 };
（3）书写事件驱动程序：关于DOM的操作。

<body><button id="target1" type="submit" onclick="fun1()"> click me</button><script type="text/javascript"  >var div = document.getElementById("target1");function fun1() {alert("hahahah")}</script></body>

常见的事件如下

事件名	描述
onclick	鼠标点击触发
ondbclick	鼠标双击触发
onkeyup	按下并释放某个按键时触发
onchange	文本内容或者下拉菜单选项改变时触发
onfocus	获得焦点时触发
onblur	失去焦点时触发
onmouseover	鼠标悬停时触发
onmouseout	鼠标移出时触发
onload	页面加载时触发
onunload	关闭网页时触发
onsubmit	提交时触发
onreset	重置表达时触发

绑定事件的方式

直接绑定

<body><button id="target1" type="submit" > click me</button><script type="text/javascript"  >var div = document.getElementById("target1");div.onclick = function() {alert("hahahahah")}</script></body>// 或者用下面的方式div1.onclick = fn;   //注意，这里是fn，不是fn()。fn()指的是返回值。//单独定义函数function fn() {alert("hahaha");}

行内绑定

<body><button id="target1" type="submit" onclick="fun1()"> click me</button><script type="text/javascript"  >var div = document.getElementById("target1");function fun1() {alert("hahahah")}</script></body>