DOM 文档对象模型

获取元素

根据ID获取

语法
var element = document.getElementById(id);

返回的是一个元素对象object

根据标签名获取

语法
var elements = document.getElementsByTagName(name);

经常会有遇到这么一种情况，需要获取页面中li，但是不同父元素可能会包含多个li标签。
那么我们可以获取某个元素（父元素）内部所有指定标签名的元素

语法
element.getElementsByTagName('标签名')
注意：父元素必须是单个对象（必须指明是哪一个元素对象）
获取的时候不包括父元素自己

通过HTML5新增的方法获取

语法
var elements = document.getElementsByClassName(names); 
返回一个包含了所有指定类名的子元素的类数组对象。
// or:
var elements = document.querySelector('选择器');
根据指定选择器返回第一个元素对象

提问：如果我要选择该类型所有元素呢？
在末尾添加All即可

语法
var elements = document.querySelectorAll('选择器');
根据指定选择器返回指定标签所有元素对象

获取特殊元素 （body，html）

获取body元素

document.body //返回body元素对象

获取html元素

document.documentElement

事件基础

事件三要素

1.事件源
------事件被触发的对象 谁 按钮
2.事件类型
-----如何触发，什么时间，比如鼠标点击还是鼠标经过还是键盘按下
3.事件处理程序
-----通过函数赋值的方式完成

语法案例
var btn = document.getElementById('btn');
btn.onclick = function() {
    alert('点秋香');
};

执行事件的步骤
1.获取事件源
2.注册时间（绑定事件）
3.添加事件处理程序（采取函数赋值的形式）

常见的鼠标事件

操作元素

操作元素内容

innerText
innerHTML （开发中常用）

操作常见元素属性

标签名.属性 = 想赋的值即可
例如src、herf、title、alt等

例
div.style.backgroundColor = 'red';//改变颜色为红色
div.style.display = 'none'    //显示模式为隐藏

操作表单元素属性

例如type、value、disabled等

操作元素样式属性

element.style 适合修改样式较少的对象
className适合修改样式较多的对象 （常用）

排他思想

//例如五个按钮只有选中的才会变粉色
    // 1.获取所有按钮元素
    let btns = document.querySelectorAll('button');
    console.log(btns);
    //btns得到的是伪数组 里面的每一个元素是 btns[i]
    for (var i = 0; i < btns.length; i++) {
        btns[i].onclick = function(){
			for(var i = 0;i<btns.length;i++){
            //(1) 先把所有的按钮背景颜色去掉
            	btns[i].style.backgroundColor = '';
            }
            //(2) 然后再设置当前按钮背景颜色
            this.style.backgroundColor = 'pink';
        }
    }