前端巩固-4、Javascript基础学习DOM

一、js数据类型

数据和存储空间是有关系的，比如一个瘦的人睡单人床，胖胖的人睡双人床，充分利用。
js是弱类型的语言，var num，是不确定是那种数据类型，要给它赋值才知道

js分为简单数据类型和复杂数据类型
简单数据类型number，Boolean，String，Undefined，Null

（1）NaN是非数字，isNaN()方法判断是否非数字
（2）字符串长度判断length属性
（3）声明变量未赋值，undefined未定义数据类型
（4）typeof检测变量数据类型

二、数据类型转换

1、转成字符串
（1）、a.toString()
（2）、String(a)
（3）、加号拼接字符串

2、转换成数字型
（1）parseInt(str)
（2）parseFloat(str)
（3）Number(str)强制转换
（4）运用运算法则，隐式转换

3、转换成布尔型
（1）Boolean(123)
否定的值都会被转换成false，比如0，nan，null，undefined，其他的都是true

三、代表DOM

1、根据id获取元素，返回值是DOM对象
var a＝document.getElememtsById()
console.dir()查看元素里面的属性和方法

2、根据标签获取元素,返回值是集合
var list=document.getElememtsByTagName()

3、H5新增的方法，H5是IE9后才支持
(1)根据类名来获取某些元素
document.getElememtsByClassName()

(2)返回指定选择器的第一个(选择器得加符号区分，标，签类和id)
var firstBox =document.querySelector(’.box’)
document.querySelector(’#box’)

(3)获取所以的选择器对象合集
document.querySelectorAll()

4、获取特殊元素body和HTML
返回值是元素对象
document.body;
document.documentElement;

四、事件三要素

事件由三部分组成，事件源、事件类型、事件处理程序
事件类型：鼠标点击、鼠标经过、键盘按下

onclick鼠标点击
onmouseseover鼠标经过
onmouseout鼠标离开
onfocus鼠标获得焦点
onblur鼠标失去焦点
onmousemove鼠标移动触发
onmouseup鼠标弹起
onmousedown鼠标按下

操作元素
改变元素内容div.innerText(’’)
div.innerHTML(’’)

改变元素属性
1、element.style.属性（驼峰命名）更改后是属于行内样式 如.style.width=‘200px’
2、element.className 类名样式操作