8.DOM

Document Objet Model

节点

表示网络中的连接点，一个网络就是由一些节点构成的

元素节点

DOM的原子就是元素节点

这些元素在文档中的布局形成了文档的结构，每一个标签就是一个元素节点，标签的名字就是元素的名字，而就是一个根元素

文本节点

它就是标签里面的内容

文本节点总是被元素节点包含在内，但并非所有的元素节点都包含文本节点

属性节点

用来对元素(标签)做出更具体的描述，例如title，id,class等

8.1 DOM操作

获取元素

通过ID：getElementById（区分大小写）

document.getElementById(“ID名”);

他是document对象里面特有的函数，在脚本代码里，函数后面必须跟一对圆括号，括号里面是参数，这个参数只有ID值，而且这个ID值必须放在双引号或者单引号里面。

typeof 操作符可以告诉我们数据类型是什么？

获取元素得到的是一个对象Object

格式 typeof 对象名
通过标签

document.getElementsTagName(“标签名”);

得到是一个数组

获取所有标签就可以用到通配符“*”

前面的docuent对象也可以换成别的变量，document是整个文档，其他特定的某个对象可以是你自己创建的对象。

例如：创建一个无序列表
```
 <ul id="purchases">
     <li>洋葱</li>
     <li>茄子</li>
     <li>杏鲍菇</li>
 </ul>
```
为了得到列表中的所有
标签

先通过var shopping = document.getElementById(“purchases”);得到最外部的ul.

再通过var items = shopping.getElementsTagName(“li”); 得到ID为purchases元素里面的所有li标签.
通过类名

document.getElementsClassName(“类名”);

得到的还是一个数组，

参数中可以填写多个类名，中间要用空格隔开，参数的顺序无所谓，只要元素中有就能得到，元素中带有其他更多的类也能得到

IE8以下不支持
通过name属性

Document.getElementsByName(“name”)

8.2 事件

将事件嵌入到标签中，不建议这么写

 <button id="btn" onclick="console.log('123')">
     这是一个按钮
 </button>

将事件绑定函数

 <div>
     <button id="btn">这是一个按钮</button>
 </div>
 <script>
     var btn = document.getElementById("btn");
     btn.onclick = function (){
         console.log(btn.innerHTML);
     }
 </script>

如果需要读取元素属性，使用

元素.属性

除了class属性，要想读取class属性，就需要使用元素.className

innerHTML属性

为当前节点的内容，带标签
innerText 属性

为当前节点的文本内容，不带标签

可以尝试做个案例：

8.3 DOM查询

8.3.1 获取子节点&子元素

获取元素的子节点

childNodes

属性，表示当前节点的所有子节点

会把DOM标签空白会当成子节点，IE8则不会这样，因为他不符合标准
firstNodes

属性，表示当前节点的第一个子节点
lastNodes

属性，表示当前节点的最后一个子节点

获取元素的子元素

children

属性，获取当前节点的所有子元素
firstElementChild IE8及以下不支持

属性，获取当前节点的第一个子元素
lastElementChild IE8及以下不支持

属性，获取当前节点的最后一个子元素

8.3.2 获取父节点&兄弟节点

获取元素的父节点&父元素

parentNodes

属性，获取当前节点的父节点

父节点不可能是空白文本
parentElement

属性，和上面的一样

因为节点只能有一个父节点

获取元素的兄弟节点

previousSibling

属性，获取前一个兄弟节点，也有可能是空白文本
nextiousSiabling

属性，获取后一个兄弟节点，也有可能是空白文本

获取元素的兄弟元素

previousElementSibling

属性，获取前一个兄弟元素，不会是空白文本
nextiousElementSibling

属性，获取后一个兄弟元素，不会是空白文本

8.4 document对象其他的属性和方法

获取页面中所有的元素

document.all;
获取页面中的body元素

document.body;
获取页面中的html元素

document.documentElement;

选择器

Document.querySelector();

需要一个选择器的字符串作为参数，可以根据一个CSS选择器来查询一个元素节点的对象
```
 // 查找类名box1下面的button标签
 var div = document.querySelector(".box1 button");
```
使用该方法总会返回一个元素，如果有多个，只会返回第一个
Document.querySelectorAll();

功能和Document.querySelector()一样，但是他会将结果封装到数组中，一个结果也会封装到数组

8.5 DOM修改

创建一个元素节点对象

document.createElement("标签名");

创建好的对象作为返回值返回
创建文本节点对象

document.createTextNode("文本内容");

作为新的文本节点返回
向父节点中添加子节点

父节点.appendChild(子节点);
在指定的子节点前插入新的子节点

父节点.insertBefore(新节点 , 旧节点);
指定的子节点替换已有的子节点

父节点.replaceChild(新节点 , 旧节点);
删除子节点

父节点.removeChild(子节点);

而前面的父节点通常用子节点的父节点来获取

子节点.parentNode.removeChild(子节点);

8.6 DOM对CSS的操作

8.6.1读取和修改内联样式

读取：

元素.style.样式名

如果样式名中有“-”，则需要使用驼峰命名法将-去掉，然后字母变大写

例如：background-color backgroundColor

修改：

元素.style.样式名 = “样式值”

我们修改的是内联样式，优先级比较高，修改后往往会立即执行

如果样式中写了 !important ，则此时样式会有最高的优先级

即使通过JS也不能覆盖该样式，会导致JS修改样式失败，尽量不要使用他

通过style读取和修改的都是样式表样式，样式表里面的读取不出来

8.6.2读取和修改当前样式

语法：

元素.getComputedStyle(参数1，参数2);

参数1：要获取元素的样式

参数2；可以传递一个伪元素，一般传null

该方法会返回一个对象，对象封装了真实元素的样式值，而不是默认值

它可以用来读取当前元素正在显示的样式。

获得的属性是只读的，要修改还得用style属性

不支持IE8及以下浏览器

变量找不到会报错，对象的属性找不到会返回null

8.6.3其他的样式相关的属性

注意：以下样式都是只读的,未指明偏移量都是相对于当前窗口左上角

都是不带px的，可以直接计算

clientHeight

元素的可见高度，包括元素的内容区和内边距的高度\
clientWidth

元素的可见宽度，包括元素的内容区和内边距的宽度\
offsetHeight

整个元素的高度，包括内容区、内边距、边框\
offfsetWidth

整个元素的宽度，包括内容区、内边距、边框\
offsetParent

当前元素的定位父元素

离他最近的开启了定位的祖先元素，如果所有的元素都没有开启定位，则返回body
offsetLeft & offsetTop

当前元素和定位父元素之间的偏移量\ offsetLeft水平偏移量 offsetTop垂直偏移量
scrollHeight & scrollWidth

获取元素滚动区域的高度和宽度
scrollTop & scrollLeft

获取元素垂直和水平滚动条滚动的距离

判断滚动条是否滚动到底
垂直滚动条

scrollHeight -scrollTop = clientHeight
水平滚动

> scrollWidth -scrollLeft = clientWidth

【懿瑾】JS的学习笔记⑧-DOM