DOM

DOM

1.什么是DOM

1）DOM --> Document Object Model(文档对象模型)
2）DOM 定义了表示和修改文档所需的方法（对象、这些对象的行为和属性以及这些对象之间的关系。）
DOM 对象即为宿主对象，由浏览器厂商定义，用来操作html和xml功能的一类对象的集合。
也有人称 DOM 是对 HTML 以及 XML 的标准编程接口。
xml --> xhtml --> html
xml 是最早的版本，xml 里面的标签是可以自定义的，不过标签无实际含义
注意：dom 不能改变 css 样式表,可以间接改变行间样式的 css

2.DOM基本操作(大部分都是类数组)

1）方法类操作

查看元素节点

document 代表整个文档（如果给 html 标签上面再套一层标签就是 document）

document.getElementById()

元素 id 在 Ie8 以下的浏览器，不区分 id 大小写，而且也返回匹配 name 属性的元素，
通过 id 标识我们来选择这个元素，一 一对应
eg:

<div name="only">123</div>
<script>
var div = document.getElementById('only');
</script>

getElementsByTagName()

标签名，这是一个类数组
eg:把页面里所有的div选出来

<div id="only"></div>
    <script>
        var div = document.getElementsByTagName('div')
    </script>

选择第一个 p 的方式:

<div>
    <p></p>
</div>
<p></p>
<script>
    var p = document.getElementsByTagName('p')[0];
</script>

getElementsByName()

IE 不支持需注意，只有部分标签 name 可生效（表单，表单
元素，img，iframe），不是在所有的浏览器都能用——开发一般不用

querySelector()和querySelectorAll()

querySelector()：css 选择器，只能选一个，在 ie7 和 ie7 以下的版本中没有
querySelectorAll()：css 选择器，全选，选一组，在 ie7 和 ie7 以下的版本中没有
querySelectorAll()和.querySelector()选出来的元素不是实时的（是静态的）

2）非方法类操作

遍历节点树（不常用）

parentNode → 父节点 (最顶端的 parentNode 为#document);
childNodes → 子节点们（直接的节点数）节点包括文本节点，属性节点
firstChild → 第一个子节点
lastChild → 最后一个子节点
nextSibling →后一个兄弟节点
previousSibling → 前一个兄弟节点

节点的类型

后面的数字是调用 nodeType 返回的数字
元素节点 —— 1
属性节点 —— 2 （基本没用，）
文本节点 —— 3
注释节点 —— 8
document —— 9
DocumentFragment —— 11

基于元素节点树的遍历（不含文本节点）

parentElement -> 返回当前元素的父元素节点 (IE 不兼容)
children -> 只返回当前元素的元素子节点
eg:

    <div>
        123
        <strong></strong>
        <span></span>
    </div>
    <script>
        var div = document.getElementsByTagName('div')[0];
    </script>
    控制台：
    div.children
    ->[strong,span]

node.childElementCount === node.children.length 当前元素节点的子元素节点个数(IE 不兼容)——基本不用，因为与 length 相等

firstElementChild -> 返回的是第一个元素节点(IE 不兼容)
lastElementChild -> 返回的是最后一个元素节点(IE 不兼容)

nextElementSibling / previousElementSibling ->返回后一个/前一个兄弟元素节点
（IE 不兼容)

每一个节点的四个属性

a.nodeName
元素的标签名，以大写形式表示，只读，不能写
b.nodeValue
Text 文本节点或 Comment 注释节点的文本内容,可读写
c.nodeType
该节点的类型，只读返回这个标签的所有的元素节点（具体数字上面节点类型已经说明）
d.attributes
Element 节点的属性集合

节点的一个方法：
Node.hasChildNodes()——用于判断括号里有没有子节点，返回值是 true 或 false

3）增，插入，删，替换

增：
document.createElement() 增加或创建元素节点（标签）
插入：
PARENTNODE.appendChild()
删：
第一种方式：
parent.removeChild() 被剪切出来了
第二种方式：
child.remove() 完全删除
替换：
parent.replaceChild(new, origin) 用新的 new 去置换旧的 origin

3.DOM接口

dom 结构树代表的是一系列继承关系

document 继承自 HTMLDocument.prototype。
HTMLDocument.prototype 继承自 Document.prototype

HTMLDocument.prototype 定义了一些常用的属性
eg:body,head,分别指代 HTML 文档中的"body,head"标签。

Document.prototype上定义了 documentElement 属性，指代文档的根元素，在 HTML文档中，他总是指代html元素

4.定时器

介绍定时器之前，先对如何获取时间方式进行了解：
var date = new Date()大写的 Date 是系统提供的一个构造函数，通过 new Date 的方法会给我们返回一个对象，这个对象就是一个日期对象。日期对象有很多属性和方法。小的 date 代表此时此刻的时间。用小的 date 调用方法，如 date.getDate( )

1）setInterval()

注意
setInterval(“func()”,1000) 定时循环器
意思是每1000毫秒执行一次这个函数
如果先定义 1000 毫秒，在后面改成 2000 毫秒，程序仍按 1000 毫秒执行，因为他只识别一次，不能通过改变 time 改变 setInterval 的快慢

注意setInterval()是 window的方法，在全局上就算不写 window. setInterval();他也会上全局的 GO 里面查找，所以不写 window.也行。
每一个 setInterval();都会返回一个一个数字，作为唯一的标识，有唯一标识就可以把他清除掉（利用 clearInerval 清除）

2）clearInterval()

能让 setInterval 停止
一般写了 setInterval 就要写 clearInterval

        var i = 0;
        var timer = setInterval(function () {
            console.log(i++);
            if (i > 10) {
                clearInterval(timer);
            }
        }, 10);

3）setTimeout();

隔了一段时间后再执行（起推迟作用），并且只执行一次
可以运用在动画试看期，然后停止

4）clearTimeout();

清除 setTimeout();让他停止执行
例：这种写法，setTimeout();还没执行就被清除了，就执行不了

        var timer = setTimeout(function () {
            console.log('a');
        }, 1000);
        clearTimeout(timer);

setInterval();setTimeout();clearInterval();clearTimeout();这四个都是全局对象，都是window 上的方法，内部函数 this 指向 window

5.事件（所有事件都是用的小写）

1) 何为事件

就是一个动作，没效果也是事件

重要性：
他是交互体验的核心功能，交互是你对页面做出操作，页面给一个反馈

2）如何绑定事件

ele.onxxx = function (event) {}

兼容性很好，但是一个元素只能绑定一个事件处理程序

ele.addEventListener(type, fn, false);里面可以填三个参数

IE9 以下不兼容，可以为一个事件绑定多个处理程序
事件有一个事件监听机制:
eg:

    <div style="width: 100px;height: 100px;background-color: skyblue;"></div>
    <script>
        var div = document.getElementsByTagName('div')[0];

        div.addEventListener('click', function () {
            console.log('a');
        }, false);

        div.addEventListener('click', function () {
            console.log('b');
        }, false);
    </script>

当点击后在控制台显示a,b;
若 console.log 两个都是(‘a‘)打印出来是两个 a。这是两个处理函数，是两个地址
若改成这样，则为一个a;因为是一个地址

    <div style="width: 100px;height: 100px;background-color: skyblue;"></div>
    <script>
        var div = document.getElementsByTagName('div')[0];
        var div = document.getElementsByTagName('div')[0];
        
        div.addEventListener('click',test,false);
        function() {
            console.log('a');
        }
    </script>

注意：
ele.addEventListener 不能给同一个函数绑定多次，重复的绑定一个函数就不能正常使用

ele.attachEvent(‘on’ + type, fn);

IE 独有，一个事件同样可以绑定多个处理程序，同一个函数绑定多次都可以
例如：
div.attachEvent(‘on’ + 事件类型，处理函数);
div.attachEvent(‘onclick’ ，function（）{});

3）事件处理程序的运行环境

ele.onxxx = function (event) {}
程序 this 指向是 dom 元素本身（指向自己）
eg:

    <div style="width: 100px;height: 100px;background-color: skyblue;"></div>
    <script>
        var div = document.getElementsByTagName('div')[0];

        div.onclick = function () {
            console.log(this);
        }
    </script>

obj.addEventListener(type, fn, false);
程序 this 指向是 dom 元素本身（指向自己）
eg:

    <div style="width: 100px;height: 100px;background-color: skyblue;"></div>
    <script>
        var div = document.getElementsByTagName('div')[0];

        div.addEventListener('click', function () {
            console.log('this');
        }, false);
    </script>

obj.attachEvent(‘on’ + type, fn);
程序 this 指向 window

4）解除事件处理程序

ele.onclick = false/‘’/null; --> 解除 ele.onxxx = function (event) {}
ele.removeEventListener(type, fn, false);–>解除 addEventListener(type, fn, false)
ele.detachEvent(‘on’ + type, fn); --> obj.attachEvent(‘on’ + type, fn);
注:若绑定匿名函数，则无法解除

5）事件处理模型 — 事件冒泡、捕获

注意：事件冒泡、捕获不能同时存在

事件冒泡：

结构上（非视觉上）嵌套关系的元素，会存在事件冒泡的功能，即同一事件，自子元素冒泡向父元素。（自底向上）

事件捕获：（只有谷歌有，最新火狐有）：

结构上（非视觉上）嵌套关系的元素，会存在事件捕获的功能，即同一事件，自父元素捕获至子元素（事件源元素）。（自底向上）

obj.addEventListener(type, fn, true);第三个参数为 true 就是事件捕获

触发顺序，先捕获，后冒泡

同一个对象的一个事件处理类型，上面绑定了两个事件处理，分别执行事件冒泡和事件执行

注意：focus，blur，change，submit，reset，select 等事件不冒泡

取消冒泡以及阻止默认事件

取消冒泡

a. W3C 标准 event.stopPropagation();但不支持 ie9 以下版本
b. event.cancelBubble = true;

阻止默认事件

默认事件 — 表单提交，a 标签跳转，右键菜单等

a. return false;
兼容性非常好，以对象属性的方式注册的事件才生效
eg:

    <div class="wrapper"></div>
    <script>
        document.oncontextmenu = function () {
            console.log('a');
            return false;
        }
    </script>

b. event.preventDefault();
W3C 标注，IE9 以下不兼容
eg:

    <div class="wrapper"></div>
    <script>
        document.oncontextmenu = function (e) {
            console.log('a');
            e.preventDefault();
        }
    </script>

c. event.returnValue = false;
兼容 IE
eg:

    <div class="wrapper"></div>
    <script>
        document.oncontextmenu = function (e) {
            console.log('a');
            e.returnValue = false;
        }
    </script>