第九章.Dom文档模型

一、获取dom里面的元素方法

第一种方式：

    

    // getElementsByTagName（'标签名'） 表示通过标签名获取元素

    // 1.返回的是 获取过来元素对象的集合 以伪数组的形式存储

    let lis = document.getElementsByTagName('li');

    console.log(lis);

    console.log(lis[0]);

    //2.我们想要依次打印里面的元素对此我们可以采取遍历的方式

    for (let i = 0; i < lis.length; i++) {

        console.log(lis[i]);

    }

   //3.如果页面中只有一个li，返回的也是伪数组的形式

   //4.如果页面中没有这个元素返回的空的伪数组的形式

   //5.document.getElementsByTagName('标签名');

   // 如何获取某个父元素内部所有的子元素

   //方法一

   //let ol=document.getElementsByTagName('ol');

   //console.log(ol[0].getElementsByTagName('li'));

   //方法二

   let ol=document.getElementById('ol');

   console.log(ol.getElementsByTagName('li'));

   

   第二种方式：

   //document.getElementsByTagName('标签名');

   // 如何获取某个父元素内部所有的子元素

   //方法一

   //let ol=document.getElementsByTagName('ol');

   //console.log(ol[0].getElementsByTagName('li'));

   //方法二

   let ol=document.getElementById('ol');

   console.log(ol.getElementsByTagName('li'));

   

第三种方式：

//1. 通过getElementByClassName('类名') 根据元素类名获取元素

let boxs=document.getElementsByClassName('box');

console.log(boxs);

第四种方式：

//1. document.querySelector('选择器') 获取指定选择器的第一个元素 既可以获取id名称 也可以获取类名 还可以获取标签名

    // 获取类选器里面的指定的第一个元素

    let firstBox = document.querySelector('.box');

    console.log(firstBox);

    // 获取id选择器里面的指定的第一个元素

    let nav = document.querySelector('#nav');

    console.log(nav);

    // 获取标签名里面的指定的第一个元素

    let li = document.querySelector('li');

    console.log(li);

    //2.document.querySelectorAll('选择器') 获取指定选择器的所有元素对象集合

    // 获取类里面的所有元素

    let allBox = document.querySelectorAll('.box');

    console.log(allBox);

    // 获取标签名里面的所有元素

    let lis = document.querySelectorAll('li');

    console.log(lis);

 

 

二、Dom操作节点

总结:

    （一)、操作元素节点：

    节点类型：nodeType,元素节点：1，属性节点：2，文本节点：3alue

    节点名称：nodeName

    节点值：nodeValue

   1. parentNode 父节点 （重点）

   2. childNodes 子节点 所有的子节点包含元素节 点文本节点等等都被获取过来

   3. children 获取所有的子元素节点也是我们实际开发常用的 (重点)

   4. firstChild 第一个子节点不管是文本节点，还是元素节点都被获取过来

   5. lastChild  最后一个子节点不管是文本节点，还是元素节点被获取过来

   6. firstElementChild 返回第个子元素节点

   7. lastElementChild 返回最后个子元素节点

   8. children[0]  （获取到第一个元素） 获取所有子节点用下标来获取里面的值（重点）

   9. console.log(ol.children[ol. children. length - 1] 表示获取最后一个元素 首先是元素的长度-1获取到下标

   10. nextSibling 下一个兄弟节点包含 元素节点 或者文本节点等等

   11. previousSibling 上一个兄弟节点包含 元素节点 或者文本节点等等

   12. nextElementSibling 得到下一个兄弟元素节点 没有元素返回 null （重点）

   13.previousElementSibling  得到上一个兄弟元素节点 没有元素返回 null （重点）

   

   (二)、创建元素节点和添加元素节点：

   1. 添加节点node . appendChild(child) node 父级child是子级后面追加元素 类似于数组中的push

   1. reateElement 先创建元素节点 再添加 appendChild （重点）

   2.node.insertBefore( child,指定元素) 在某个元素前面添加节点  （重点）

 

 

  (三)、删除元素和节点

   1. removeChild()方法从DOM中删除一个子节点 ,返回删除的节点。（重点）

   

 

   (四)、复制节点

   // 1.node. cloneNode();括号为空或者里面是false浅拷贝只复制标签不复制里面的内容

   // 2. node. cloneNode(true); 括号为true深拷贝复制标签复制里面的内容

   // 3.node. cloneNode()方法返回调用该方法的节点的一个副本。 也称为克隆节点/拷贝节点

 

 

三、DOM核心重点

 关于dom操作,我们主要针对于元素的操作。主要有创建、增、删、改、查、属性操作事件操作。

(一)、创建

1. document.write

2. innerHTML

3. createElement

(二)、增（添加）

1.appendChild 在元素面后添加

2.insertBefore 在元素前面添加

(三)、删

1.removeChild

(四)、改

主要修改dom元素的属性，dom元素的内容，属性，表单的值等

1.修改元素的属性：src、href title等

2.修改普通元素的内容:innerHTmL,inerText

3.修改表单里面的元素:value、type、disable等

4.修改元素的样式:style、className

(五)、查（获取）

主要获取查询dom的元素

1.dom提供的API方法：getElemnetById(以id名获取)、getElemnetsByTsgName(以标签名来获取)、getElemnetsClass(以类名来获取)

2.H5提供的新方法:querySlelctor(获取标签中的某个父元素)、querySlelctorAll(获取标签中全部的属性) 重点用这个

3.利用节点操作获取元素:parentNode(父元素节点)、children(子元素节点)、lastElementChild(返回最后一个子元素节点)、fristElementChild(返回第一个子元素节点)、previousElementSbling(上相邻兄弟节点)、nextElementSibling(下相邻兄弟节点)

(六)、属性操作

主要针对与自定义属性

1.setAttribute:设置dom的属性值

2.getAttribute:得到dom的属性值

3.romoveAttribute:移出属性值

思维导图：

 

 

四、鼠标事件

（一）、注册事件操作（绑定事件）

addEventListener：事件监听方式

格式:document.addEventListener(type,listener{,useCapture})

●type: 事件类型字符串,比如click. mouseover , 注意这里不要带on

●listener :事件处理函数,事件发生时,会调用该监听函数

●useCapture :可选参数,是一个布尔值,默认是false.

1.onclick：鼠标点击触发事件

2.onmouseover：鼠标经过触发事件

3.onmouseout：鼠标离开触发事件

4.onfocus：鼠标获得焦点触发事件

5.onblur:鼠标失去焦点触发事件

6.onmousemove：鼠标移动触发事件

7.onmouseup：鼠标弹起触发事件

8.onmousedown:鼠标按下触发事件

 

（二）、删除事件

 l et div = document.querySelectorAll("div");

    div[0].onclick = function () {

        alert("22");

  // 1.传统的删除事件的方法

        div[0].onclick = null;

    }

  // 2.preventDefault 删除事件的方法

    div[0].onclick = function() {

        alert(44);

        div[0].preventDefault=null;

    }

   //3. addEventListener  删除点击事件

    div[1].addEventListener('click', fn)//里面的fn不需要加小括号

    function fn() {

        alert('22');

        div[1].removeEventListener('click', fn)

    }

 

 

（三）、dom的事件流与阻止事件冒泡

// dom 事件流 三个阶段 事件流就是事件传播的过程

    // 1.js 代码中只能执行捕获或者冒泡阶段的其中一个

    // 2.onclick 和attachEvent（it只能得到冒泡阶段）

    // 3.捕获阶段 如果 addEventListener 第三个参数是true 那么则处于捕获阶段 document->html->body->father->son

    //  获取里面的元素

      let son = document.querySelector(".son");

     son.addEventListener('click', function () {

         alert('son');

     }, true)

 

     let father = document.querySelector(".father");

     father.addEventListener('click', function () {

         alert('father');

     }, true)

 

    // 4. 冒泡阶段 如果 addEventListener 第三个参数是false 那么则处于冒泡阶段 son->father->body->html->document

    let son = document.querySelector(".son");

    son.addEventListener('click', function (e) {

        alert('son');

        //第一种方式： 阻止事件冒泡

        e.stopPropagation();

        // 阻止默认事件

        e.preventDefault()

    }, false)

    let father = document.querySelector(".father");

    father.addEventListener('click', function () {

        alert('father');

    }, false)

    document.addEventListener('click',function(){

        alert("你好")

    })

（四）、鼠标事件对象

//鼠标事件对象MouseEvent

    document.addEventListener('click', function (e) {

        //1. e.clientX,clientY表示的是鼠标在可视区的x和y

        console.log(e.clientX);

        console.log(e.clientY);

        //2.e.pageX和,pageY 表示页面在文档距离

        console.log(e.pageX);

        console.log(e.pageY);

    })

 

 

（五）、鼠标坐标

1.e.clientX:返回鼠标相对于浏览器窗口可视区的X坐标

2.e.clientY:十返回鼠标相对于浏览器窗口可视区的Y坐标

3.pageX:返回鼠标相对于文档页面的X坐标IE9+ 支持

4.pageY:返回鼠标相对于文档页面的Y坐标IE9+ 支持

5.screenX:返回鼠标相对于电脑屏幕的X坐标

6.screenY:返回鼠标相对于电脑屏幕的Y坐标

 

五、键盘事件

  // 常用的键盘事件

    // 1.keyup 键盘按键弹起的时候才触发 addEventListener用这个事件监听可以省略事件的on

    // 能识别功能键的 Ctrl，shift Alt 左右箭头

    document.addEventListener('keyup',function() {

        console.log('keyup');

    })

    // 2.盘按键被按下是才触发

    document.addEventListener('keydown',function(){

        console.log('keydown');

    })

    // /3.keypress 键盘按键被按下是才触发 不能识别功能键的 Ctrl，shift Alt 左右箭头

    document.addEventListener('keypress',function(){

        console.log('keypress')

    })

    // 三个事件的执行顺序： keydown, keypress ,keyup

 

案列1:

 //1.当按钮1按下的时候触发“个键 盘事件onkeydown某个按键被按下

    /* btn1.onclick = function () {

        //调用事件对象事件 对象.事件名=fn

        window.onkeydown = function (e) {

            // 如何获取按键值

            let { key } = e

            console.log(key);

        }

    } */

 

六、元素位置大小

（一）、client可视区系列

（二）、scroll滚动系列

（三）、offset偏移量系列

（四）、三大系列比较

（五）、offset与style区别

 

七、正则表达式

    let s = "abc cde abc eft cde"

    //1.如何创建正则表达式 字面量方式

    let reg = /^abc/;

    // 2.正则表达式对象的使用 test()

    // reg.test(字符串) 返回值为true：符合格式 false：不符合格式

    console.log(reg.test(s));

    /*

    ^:表示匹配开始

    $: 表示匹配结尾

    //:字面量格式

    i:忽略大小写

    g:表示全局

    */

    let reg2 = /ABC/i;//忽略大小写之后，可以和s中的abc匹配，返回true

    console.log(reg2.test(s));

    // 第二种方法

    // 字符串方法search(可以放正则表达式)

    let reg3 = /abc/ig;

    console.log(s.search(reg3));

    console.log(s.replace(reg3, '呵呵'));

    // 第二种方法

    // 3.构造函数方式创建正则表达式

    let reg4 = new RegExp(/ABC/, 'ig')

    console.log(s.replace(reg4, '哈哈'));

    /*

    正则表达式的格式:

    1. \d:表示0-9

    2. \w:表示大小写字母 和 0-9 和 __

    3. \s:表示空格 tab

    4. \D:表示非数字 a,A,&,_,.

    5. W:表示非\W & @,中

    6. \S:非空格，非tabl键

    7. . : 匹配单个字符

    8. * :匹配0或多次

    9.  +:匹配1或多次

    10. ?:匹配0或1次

     */

 

    //  5.指定范围出现的字符[]

    let s2 = "abc123@com.cn";

    let emailReg = /^[a-zA-Z]+\d+@[a-zA-Z]+.[a-zA-Z]+$/;

    console.log(emailReg.test(s2));

    //6.指定出现的次数{m,n}例如: { 0, 1 } ---> ?

    let emailReg2 = /^[a-zA-Z]{1,}\d+@[a-zA-Z]{1,}.[a-zA-Z]{1,}$/;

    console.log(emailReg2.test(s2));

    //7.中文汉字[\u4E00-\u9FA5] 常用汉字的Unicode编码范围

    let s3 = '北大青马';

    let titleReg = /[\u4E00-\u9FA5]{1,}/;

    console.log(titleReg.test(s3));

    //8.或者 | 注意: 竖线之间不要空格

    let age = 140;

    let ageReg = /^(([1-9])|([1-9]\d)|(1[0-2]\d))$/g;//1-120

    console.log(ageReg.test(age));

导图：