DOM复习——事件基础与操作元素

前言

继上一个笔记复习完通过js获取元素的方法后，我们一起来继续来学习有关事件基础和操作元素的知识。

事件概述：JavaScript是我们有能力创建动态页面，而事件则是可以被JavaScript侦测到的行为。
触发——响应机制

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

2.事件基础

2.1 事件三要素

1. 事件源
2. 事件类型
3. 事件处理程序

以下来分别说明：

事件源

	事件被触发的对象 谁

事件类型

	如何触发 什么事件

事件处理程序

	通过一个函数赋值的方式 完成

2.2 执行事件的步骤

1.获取事件源
2.注册时间（绑定事件）
3.添加事件处理程序

3.操作元素

3.1 改变元素内容

	element.innerText

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

	element.innerText

从起始位置到终止位置的内容，包括html标签，同时保留空格和换行。
两者的区别：

1. innerText不识别html标签 去除空格和换行 非标准
2. innerHTML识别html标签 保留空格和换行 W3C标准 比较常用

**共同点：**两个属性都是可读写的 可以获取元素里面的内容

3.2 常用的属性操作

1. innerText，innerHTML改变元素内容
2. src、href
3. id、alt、title

3.3 表单元素的属性操作

利用DOM可以操作如下表单元素的属性：

	type、value、checked、selected、disabled

    <button>搜索</button>
    <input type="text" value="输入内容">
    <script>
        var btn=document.querySelector('button');
        var input=document.querySelector('input');
        btn.onclick=function(){
   
            this.value='i love qian duan ';//改变框内的值
            this.disabled=true;//禁用按钮的点击
        }
    </script>

3.4 样式属性操作

1.element.style 行内样式操作 //适用于少量的更改
2.element.className 类名样式操作 //适用于大量的更改
注意：
1.JS里面的样式采取驼峰命名法 比如fontSize backgroundColor
2.JS修改style样式操作，产生的是行内样式，CSS权重比较高。
3.className会直接更改元素类名，会覆盖原先的类名

以下是三种情况
1.使用element.style时

<!--当我们使用element.style时-->
		<style>