DOM 文档对象模型+事件基础+操作元素+节点操作（上）

DOM 文档对象模型

通过DOM接口可以改变网页的内容、结构和样式

• 文档：一个页面就是一个文档，DOM使用document表示
• 元素：页面中所有标签都是元素，DOM中使用element表示
• 节点：网页中所有内容都是节点（标签、属性、文本、注释等），DOM中使用node表示
  DOM把以上内容都看做是对象

获取元素

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

• 根据ID获取
• 根据标签名获取
• 通过HTML5新增的方法获取
• 特殊元素获取

根据ID获取

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

Document的方法 getElementById()返回一个匹配特定 ID的元素. 由于元素的 ID 在大部分情况下要求是独一无二的，这个方法自然而然地成为了一个高效查找特定元素的方法。

• element是一个 Element 对象。如果当前文档中拥有特定ID的元素不存在则返回null.
• id是大小写敏感的字符串，代表了所要查找的元素的唯一ID.

返回的是一个元素对象object

根据标签名获取

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

1.返回一个包括所有给定标签名称的元素的HTML集合
以伪数组形式存储，得到的元素是动态的
2.依次打印里面的元素对象可以采取遍历的方式
3.如果只有一个li 返回还是伪数组的形式
4.如果页面没有这个元素 返回的是空的伪数组的形式

经常会有遇到这么一种情况，需要获取页面中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

---

事件基础

JavaScript使我们有能力创建动态页面，而事件是可以被JavaScript侦测到的行为
简单理解：触发—响应机制

事件三要素

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

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

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

常见的鼠标事件

鼠标事件	触发条件
onmouseover	鼠标经过触发
onmouseout	鼠标离开触发
onfocus	获得鼠标焦点触发
onblur	失去鼠标焦点触发
onmousemove	鼠标移动触发
onmouseup	鼠标弹起触发
onmousedown	鼠标按下触发
onmouseover	鼠标移入触发
onmouseout	鼠标离开触发

操作元素

操作元素内容

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';
        }
    }