一、DOM

 

文档对象模型（简称DOM），是W3C组织推荐的处理可扩展标记语言（HTML或者XML）的标准编程接口。W3C已经定义了一系列的DOM接口，通过这些DOM接口可以改变网页的内容、结构和样式。

 

二、DOM树

 

DOM把以上内容都看做是对象，我们获取过来的DOM元素是一个对象（object），所以称为文档对象模型。

 

文档：一个页面就是一个文档，DOM中使用document表示。

 

元素：页面中的所有标签都是元素，DOM中使用element表示。

 

节点：网页中的所有内容都是节点（标签、属性、文本、注释等），DOM中使用node表示。

 

三、DOM操作

 

1·1 获取元素

 

获取页面中元素可以使用以下几种方式：

 

根据ID获取，getElementById（'ID名'）；

 

根据标签名获取，getElementsByTagName（'标签名'）；

 

通过HTML5新增的方法获取，getElementsByClassName（'类名），document.querySelector（'（。/#）选择器'），document.querySelectorAll（'（。/#）选择器'）；

 

特殊元素获取，document.body;（获取body元素），document.documentElement;（获取html元素）；

 

注意：

 

通过标签名获取：因为得到的是一个对象的集合，所以我们想要操作里面的元素就需要遍历，得到元素对象是动态的。

 

根据ID获取元素是唯一的。

 

H5新增方法：根据类名返回的是元素对象集合。根据指定选择器返回的是第一个元素对象。

 

1·2 事件基础

 

事件概述：JavaScript使我们有能力创建动态页面，而事件是可以被JavaScript侦测到的行为。

 

简单理解：触发——响应机制。

 

网页中的每个元素都可以产生某些可以触发JavaScript的事件。

 

事件是有三部分组成 ：事件源 事件类型 事件处理程序 我们也称为事件三要素

 

例如：

 

<script>

 

        //点击一个按钮，弹出对话框

 

        //1、事件是有三部分组成 事件源 事件类型 事件处理程序 我们也称为事件三要素

 

        //（1）事件源 事件被触发的对象 谁 按钮

 

        var btn = document.getElementById（'btn'）;

 

        //（2）事件类型 如何触发 什么事件 比如鼠标点击（onclick）还是鼠标经过 还是键盘按下

 

        //（3）事件处理程序 通过一个函数赋值的方式 完成

 

        btn.onclick = function（） {

 

            alert（'点秋香'）;

 

        }

 

</script>

 

执行事件的步骤：

 

 例如：

 

<script>

 

        //执行事件步骤

 

        //点击div，控制台输出，我被选中了

 

        //1、获取事件源

 

        var div = document.querySelector（'div'）;

 

        //2、绑定事件 注册事件

 

        //div.onclick

 

        //3、添加事件处理程序

 

        div.onclick = function（） {

 

            console.log（'我被选中了'）;

 

        }

 

</script>

 

1·3 鼠标事件

 

 补充鼠标事件：

 

mouseenter：移入事件。

 

mouseleave：移出事件。

 

contextmenu：右键事件。

 

selectstart：禁止鼠标选中。

 

1·4 键盘事件

 

 例如：

 

<script>

 

        // 常用的键盘事件

 

        //1. keyup 按键弹起的时候触发 

 

        // document.onkeyup = function（） {

 

        //         console.log（'我弹起了'）;

 

        //     }

 

        document.addEventListener（'keyup', function（） {

 

            console.log（'我弹起了'）;

 

        }）

 

        //3. keypress 按键按下的时候触发  不能识别功能键 比如 ctrl shift 左右箭头啊

 

        document.addEventListener（'keypress', function（） {

 

                console.log（'我按下了press'）;

 

            }）

 

            //2. keydown 按键按下的时候触发  能识别功能键 比如 ctrl shift 左右箭头啊

 

        document.addEventListener（'keydown', function（） {

 

                console.log（'我按下了down'）;

 

            }）

 

            // 4. 三个事件的执行顺序  keydown -- keypress -- keyup

 

</script>

 

1·5 操作元素

 

JavaScript的DOM操作可以改变网页内容、结构和样式，我们可以利用DOM操作元素来改变元素里面的内容、属性等。

 

1·5·1 改变元素内容

 

element.innerText;从起始位置到终止位置的内容，但它去除html标签，同时空格和换行也会去掉

 

element.innerHTML;起始位置到终止位置的全部内容，包括html标签，同时保留空格和换行

 

例如：

 

<script>

 

        //innerText 和 innerHTML的区别

 

        //1、innerText 不识别html标签 非标准 去除空格和换行

 

        var div = document.querySelector（'div'）;

 

        //div.innerText='<strong>今天是：</strong> 2019';

 

        //2、innerHTML 识别html标签 W3C标准 保留空格和换行

 

        div.innerHTML = '<strong>今天是：</strong> 2019';

 

        //这两个属性是可读写的 可以获取元素里面的内容

 

        var p = document.querySelector（'p'）;

 

        console.log（p.innerText）;

 

        console.log（p.innerHTML）;

 

</script>