DOM操作

1.webapi介绍

1、api的概念   

API（Application Programming Interface,应用程序编程接口）是一些预先定义的函数，目的是提供应用程序与开发人员基于某软件或硬件得以访问一组例程的能力，而又无需访问源码，或理解内部工作机制的细节。例如：alert()、 prompt()、log()、reverse()、getMonths()

任何开发语言都有自己的API

API的特征输入和输出(I/O)

API的使用方法(console.log())

2、webapi的概念

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

我们可以通过API去操作DOM和BOM

此处的web API特指浏览器提供的API(一组方法)，web API在后面的课程中有其它含义

2.DOM概念

事件基础文档对象模型（Document Object Model，简称DOM）DOM又称为文档树模型

文档：一个网页可以称为文档

节点：网页中的所有内容都是节点（标签、属性、文本、注释等）

元素：网页中的标签

属性：标签(元素)的属性    

3、获取元素的方式

1、根据id获取元素

 document.getElementById("xxx")

2、通过类名获取元素

document.getElementsByClassName("xxx")

3、通过标签名获取元素

 document.getElementsByTagName("xxx")

4、通过name名获取元素

 document.getElementsByName("xxx")

5、通过选择器的querySelector获取元素

 document.querySelector("xxx")

6、通过选择器的querySelectorAll获取元素

querySelectorAll():获取指定选择器的所有的元素，参数就是选择器的名称

3、事件初识

(1)、事件三要素

        事件源:触发(被)事件的元素

        事件类型:事件的触发方式(例如鼠标点击或键盘点击)

        事件处理程序:事件触发后要执行的代码(函数形式)

(2)、事件的基本使用

鼠标单击事件：onclick    浏览器加载完成事件：onload

(3)、事件触发的多种写法

        HTML内部书写所有

        HTML行内触发方法

        HTML外部书写

4、非表单元素的属性操作

href、title、id、src、className width height等等

1、添加src属性值显示图片

imgBox.src = "images/jie.jpg";

2、改变图片大小

imgBox.width = 750;

imgBox.height = 500;

3、通过style改变宽高

imgBox.style.width = 750 + "px";

imgBox.style.height = 500 + "px";

通过样式属性设置宽高、位置的属性类型是字符串，需要加上px

凡是css中这个属性是多个单词的写法,在js代码中DOM操作的时候.把-干掉,后面的单词的首字母大写即可

4、通过类名改变宽度

  imgBox.className = "imgCl";

//className 会覆盖之前设置好的类名！

5、隐藏元素

1、src=""

2、display=none; 不占位置的

3、visibility="hidden

6、this的指向问题

普通函数中，this指向window

 构造函数中，this指向实例化对象

对象函数中，this指向当前的对象

事件函数中，this指向事件源

5、表单元素属性操作

value 用于大部分表单元素的内容获取(option除外)

type 可以获取input标签的类型(输入框或复选框等)

disabled 禁用属性checked 复选框选中属性

selected 下拉菜单选中属性

checked 

6、文本内容属性

(1)、innerText和textContent

设置标签中的文本内容,应该使用textContent属性,谷歌,火狐支持,IE8及以下不支持

设置标签中的文本内容,应该使用innerText属性,谷歌,火狐,IE8都支持

(2)、innerText和innerHTML的区别

使用innerText主要是设置文本的,设置标签内容,是没有标签的效果的

innerHTML是可以设置文本内容

innerHTML主要的作用是在标签中设置新的html标签内容,是有标签效果的

想要设置标签内容,使用innerHTML,想要设置文本内容,innerText或者textContent,或者innerHTML,推荐用innerHTML