JavaScript进阶（事件+获取元素+操作元素）

事件基础

事件组成

执行事件的步骤

获取元素

根据ID获取元素

根据标签名获取元素

获取ol中的小li

类选择器（html5新增的I9以上支持）

获取body和html

操作元素

innerText和innerHtml

表单标签

样式属性操作

操作元素总结

事件基础

事件组成

事件有三部分组成，1.事件源2，事件类型3.事件处理程序

1.事件源指事件被触发的对象(获取对象的方式)

2.事件类型包括鼠标点击（onclick）,鼠标经过，键盘按下等等

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

执行事件的步骤

JavaScript组成

API alert就是一个浏览器的api

Web API是浏览器提供的一套操作浏览器功能(BOM)和页面元素(DOM)的API。

DOM：是一个接口，处理HTML，或者XML（作用）网页内容的动态变化。

DOM树

DOM把以上内容都看做实对象。对象有属性和方法

这里推荐一个网站 https://developer.mozilla.org/zh-CN/

js特点，往前看，看前面有没有标签

获取元素

根据ID获取元素

根据标签名获取元素

返回的是伪数组(collection[i])的形式。参数要为数组[i]，即数组元素

获取ol中的小li

第一个ol是ol[0]。父元素是ol

比如ol[0]变为ol是不对的。父元素就是上一级元素

类选择器（html5新增的I9以上支持）

只能拿第一个。比如拿到的是首页，而不是产品。.是类，#是id.

document.querySelectorAll能拿全部

获取body和html

操作元素

innerText和innerHtml

当我们点击了按钮，div里面的文字会发生变化

元素也可以不用添加事件。通过innerText进行内容修改。

innerHtml

innertext和innerHTML都是可读写的可以获取元素里面的内容

innertext不识别html标签，即结果显示没有span,去除空格和换行。

innerHTML识别html标签，不去除空格和换行。标准，所以他使用的比较多。

常用元素的属性操作

操作元素，修改这个元素的属性。例如，在进行界面跳转的时候，可以在function里面，对已经写好了的img.src属性进行操作。

eg1.在邮箱经常可以看到这种情况。

表单标签

type,disabled（这个表单是否被使用）


<body>
<button>按钮</button>
<input type="text" value="输入内容" >
<script>var btn =document.querySelector('button');var input=document.querySelector('input');btn.onclick=function (){input.value='备点记录';this.disabled=true;}</script>
</body>

this指向的是当前调用者，即btn;

eg2.

点击按钮将密码框切换为文本框，首先是div，div里面有文本框，label控制图片按钮。

<style>.box{width:400px;border: 1px solid greenyellow;margin:100px auto;}.box input{width:370px;height: 30px;border: 0;outline: none;}.box img{position: absolute;top:1px;right:2px;width:24px;}</style>

样式属性操作

行内样式，驼峰命名法。Js行内样式比css权重高，当有js行内样式操作属性时，css的对应操作属性会被覆盖掉。

类名样式操作

声明好class,修改div的className,通过在function函数当中对类名进行修改this.className='类名'。=<div class='类名'>.我们可以通过修改元素的className更改元素的样式，适用于样式较多或功能较为复杂，className会覆盖原本的类名。如果想要保留原来的类名，可以通过多类名选择器，即this.className='原本名字空格新的名字'来保留原来的类名。