DOM操作

知识点一：webAPI介绍

1、API定义

①    应用程序编程接口

②    是一些预先定义的函数   alert()  prompt()  log()  reverse()

2、目的

①    提供应用程序与开发人员基于某软件或硬件得以访问一组例程的能力，而又无需访问源码，或理解内部工作机制的细节

3、注意：

①    任何语言都有自己的API

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

4、webAPI定义:

①    提供的一套操作浏览器功能和页面元素的API----DOM和BOM的一些方法（函数）

5、 js的组成

①    ECMAscript

②    DOM

③    BOM

知识点二：DOM     

1、定义：

①    document object model  

②    文档对象模型

2、节点：

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

3、文档：

①    一个网页可以称为文档

4、元素：

①    网页中的标签

5、 属性：

①    标签(元素)的属性

6、DOM的树的根节点

①    根元素-html             

7、树模型

①   

 

知识点三：事件

1、定义：触发--><--响应

 

2、事件的三要素

①    事件源：被触发的元素

②     事件的类型： (1)鼠标事件：单击、双击、鼠标移入、移出

                            (2)键盘事件：按下、抬起

                              (3)window事件：加载完成、滚动条滚动

③    事件的响应程序：以函数返回

3、事件的写法

①    内部script中书写

1)        事件源.事件类型=function(){}

②    行内元素中添加事件

③    在外部样式表中添加事件

4、单击事件  onclick

5、双击事件 ondblclick

6、浏览器加载完成事件  window.onload()

知识点四：对非表单元素的属性操作

1、思路：

①    获取元素

②    将获取到的元素看成一个对象

③    这个元素的属性也就是对象的属性

2、对象.href=”index.html”

3、对象.src=”images/yang.jpg”

4、对象.width=”300”

5、对象.href=”200”

6、通过CSS的方式

①    对象.style.width=”300px”;

②    对象.style.backgroundColor=”blue”

7、注意：

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

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

知识点四：对表单元素的属性操作

1、思路：

③    获取元素

④    将获取到的元素看成一个对象

⑤    这个元素的属性也就是对象的属性

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

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

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

5、selected 下拉菜单选中属性

知识点五：this的指向

1、在普通函数中，this指向window

2、在对象方法中，this指向对象本身

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

4、在事件函数中，this指向事件源

知识点六：innerText

1、获取设置到元素的文本

①    元素对象.innerText