JS基础及DOM

1.定义变量

2.变量使用

3.定义函数

4.调用函数

1.定义变量

基本类型

var aa="Demo"//字符串类型"" ''
var bb=10 //数字
var cc=10.8
var dd=true //布尔类型
var ee  //undefined类型
alert(cc+aa)//

复合类型

1.数组[]通过下标进行访问

var arr =["demo",10,10.9,true,undefined,null,["hello",20],{
name:"李四",
age:50
}

2.对象.属性

key:value

3.函数function定义函数关键字，f方法名，（a,b)参数列表，{}函数体

函数调用与交互相关

onclick点击事件

ondblclick双击

onmouseenter鼠标放上去

onmouseleave鼠标离开

DOME操作

查找

一、根据id值获取元素getElementById()返回符合条件的第一个对象

 

var obj=document.getElementById("aa")

二、根据class值获取元素getElementsByClassName()返回符合条件的所有对象组成的数组

三、根据元素名称获取元素getElementsByTagName()返回符合条件的所有元素组成的数组

四、根据选择器获取元素querySelector()返回符合条件的第一个对象

五、根据选择器获取元素 querySelectorAll()返回符合条件的所有对象组成的数组

// 根据关系查找
// var obj = document.getElementById("aa")
//console.log(obj)
//console.dir(obj)
//console.log(obj.nextsibling)
// console.log(obj.nextElementsibling)
//找父级元素 parentNode parentElement
//找孩子:childNodes children
//第一个孩子:firstchild firstElementchild
//最后一个孩子:lastchild lastElementchild
//上一个:previoussibling previousElementsibling
//下一个:nextsibling nextElementsibling
// 修改
// var obj = document.getElementById("aa" )
//console.log(obj)
//console.dir(obj)
// 改内容
//innerText 当前修改的内容当作文本来处理
//innerHTML 当前修改的内容当作标签来处理
//value 修改input的值
// obj.innerHTML ="<span>hhhh</span>
//console.log(obj.innerText)

//改属性
//原生属性 对象.属性=值
// obi.className = 'blue'
// 自定义属性 setAttribute(属性名，属性值)设置
//getAttribute(属性名)获取
// obj.setAttribute("index","444")
// console.log(obj.getAttribute('index'))
// 改样式
// obj.style.background = "red'
// obj.style.color ='yellow'
// obj.style.fontsize='50px
// obi.style.cssText ="background:red;color:blue;font-size:60px;
// obi.className = 'blue