前端DOM

DOM是什么?

文档对象模型（Document Object Model，简称DOM），是W3C组织推荐的处理可扩展标记语言（HTML或者XML）的标准编程接口。

W3C已经定义了一系列的DOM接口，通过这些DOM接口可以改变网页的内容、结构和样式。

DOM树

 

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

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

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

DOM把以上内容都看作对象。

如何获取元素?

1.根据ID获取

使用getElementById() 方法获取带有ID的元素对象。

 // get 获得 element 元素 by 通过 驼峰命名法
 // 参数 id 是大小写敏感的字符串
 // 返回的是一个元素对象
 var timer = document.getElementById('time');

2.根据标签名获取

使用getElementByTagName()方法可以返回带有指定标签名的对象的集合。

    // 返回的是获取过来元素对象的集合，以伪数组的形式存储的
    var divs = document.getElementsByTagName('div');

3.通过HTML5新增的方法获取

使用document.getElementByClassName(‘类名’); // 根据类名返回元素对象合集。

// 1、getElementsByClssName 根据类名获取某些元素集合
    var boxs = document.getElementsByClassName('box');

使用document.querySelector(‘选择器’); // 根据指定选择器返回第一个元素对象

  // 2、querySelector 返回指定选择器的第一个元素对象

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

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

    var nav = document.querySelector('li');

使用document.querySelectorAll(‘选择器’);  // 根据指定选择器返回所有对象

    // 3、querySelectorAll() 返回指定选择器的所有元素集合

    var allbox = document.querySelectorAll('.box');

4.特殊元素获取

如：body，html

 // 1、获取body元素
   var body =  document.body;
    // 2、获取html
    var htmlEle = document.documentElement;

事件基础

行为

触发---响应机制

事件由三部分组成

事件源  事件类型  事件处理程序

   // （1）事件源  

    var btn = document.getElementById('btn');

    // （2）事件类型  什么事件，比如鼠标点击（onclick）、鼠标经过等

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

    btn.onclick = function() {

        alert('点秋香');

    }

执行事件的步骤

1. 获取事件源
2. 注册事件（绑定事件）
3. 添加事件处理程序（采用函数赋值形式）

常见的鼠标事件

// onclick   鼠标点击左键触发

 // onmouseover   鼠标经过触发

 // onmouseout 鼠标离开触发

 // onfocus   获得鼠标焦点触发

// onblur 失去鼠标焦点触发

 // onmousemove 鼠标移动触发

 // onmouseup 鼠标弹起触发

 // onmousedown 鼠标按下触发

操作元素

内容、属性修改

1.改变元素内容

第一个： element.innerText

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

// 1、获取元素

    var btn = document.querySelector('button');

    var div = document.querySelector('div');

    // 2、注册事件

    // document.onclick

    btn.onclick = function() {

        div.innerText = '2019-6-6';

    }

第二个： element.innerHTML

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

    var div = document.querySelector('div');

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

   

 

2.常见的属性操作

如：src title

  // 1、获取元素

    var yuto = document.getElementById('yuto');

    var jianzhu = document.getElementById('jianzhu');

    var img = document.querySelector('img');

    // 2、注册事件  处理程序

    yuto.onclick = function() {

        img.src = 'image/1.jpg';

        img.title = '芋头';

    }

3.表单元素的属性操作

如：type\value\checked\selected\disabled

  var btn = document.querySelector('button');

    var input = document.querySelector('input');

    btn.onclick = function() {

        input.value = '你点击了';

        // btn.disabled = true;

        this.disabled = true;

        // this 指向的是事件函数的调用者

    }

 4.样式属性操作

通过js修改元素的大小、颜色、位置等样式

1. element.style 行内样式操作
2. element.className 类名样式操作

    var div = document.querySelector('div');

    div.onclick = function() {

        this.style.backgroundColor = 'purple';

        this.style.width = '600px'

    }

注意

1. JS里面的样式采取驼峰命名法，比如fontSize、backgroundColor
2. JS修改style样式操作，产生的是行内样式，CSS权重比较高