JavaScript自学心得二（DOM对象、事件详解、内置对象、DOM元素控制HTML元素）

一：JavaScript DOM对象

1、DOM简介：当网页被加载时，浏览器会创建页面的文档对象模型（Document Object Model）；JavaScript能够改变页面中的所有（HTML元素、HTML属性、CSS样式、）以及对所有事件做出反应。

2、DOM操作HTML：

①改变HTML输出流（备注：绝对不要在文档加载完成之后使用document.write()；这会覆盖文档）

②寻找元素：通过id找到HTML元素；通过标签名找到HTML元素；通过class找到HTML元素

③改变HTML内容：使用属性innerHTML

④改变HTML属性：使用属性attribute

3、使用DOM操作CSS：

①通过DOM对象改变CSS，基本语法：document.getElementById（id）.style.background=new style;

4、DOM EventListener：向元素添加事件句柄。方法：addEvebtListener(); removeEventListener();

二：JavaScript事件详解

1、事件流：描述的是在页面中接收事件的顺序。

①事件冒泡：有最具体的元素接收，然后逐级向上传播至最不具体的元素节点或文档。

②事件捕获：最不具体的节点先接收事件，而最具体的节点是最后接收事件。

2、事件处理：

①HTML事件处理：直接添加到HTML文档中。

②DOM0级事件处理：把一个函数赋值给一个事件处理程序属性。

③DOM2级事件处理：addEventListener（“事件名”，“事件处理函数”，“布尔值”）；removeEventListener

true：事件捕获  false:（事件冒泡）

④IE事件处理程序（版本<=8）：attachEvent，detachEvent

三：JavaScript内置对象

1、什么是对象：JavaScript中所有的事物都是对象，比如：字符串，数值，数组，函数......，而且每个对象都带有属性和方法。（属性：指的是对象带有的性质，方法：指对象提供的使用方式）

JavaScript允许自定义对象：①定义并创建对象；②使用函数来定义对象，然后创建新的对象实例。

2、String字符串对象：用于处理已有的字符串，字符串可以使用双引号或单引号。

常用的字符串方法：（length属性：得到字符串长度）

①indexOf（）：在字符串中查找当前字符串是否存在（如果存在返回当前位置，不存在返回-1）

②match（）：内容匹配（匹配一个字符串是否存在，如果匹配上直接显示出来、没有就返回null）

③replace（）：替换内容

④toUpperCase()/toLowerCase()：字符串大小写转换

⑤strong>split（）：字符串转为数组

（其他属性：prototype,constructor...）

（其他方法：charAT(),charCodeAt(),concat(),formCharcode().....）

3、Date日期对象：日期对象用于处理日期和时间

①获得当日的日期：Date

②常用方法：getFullYear()；获取年份getTime；获取毫秒setFullYear；设置具体的日期getDay；获取星期

4、Array数组对象：【0】是数组的第一个元素，【1】是数组的第二个元素

数组常用的方法：

①concat():合并数组②sort():排序

③push():末尾追加元素④reverse():数组元素翻转

5、Math对象：执行常见的算数任务

常用的方法：round（）四舍五入，random（）返回0~1之间的随机数，max（）返回最大值

min（）返回最小值，abs（）返回绝对值。

四：JavaScript DOM对象控制HTML元素详解