JS的基础语法 结构(dom元素）

1、js的基础语法 结构

2、dom操作      操作我们的       document    html    body   div     Image
3、bom操作      操作浏览器 定时 弹窗.... 

 

 

dom：document 学习dom的关键词
dom操作的三个步骤：

1、事件源（先找到dom元素）

2、事件类型（对元素进行怎样的操作：点击、移入）

3、事件的执行程序（样式、内容）。。。

例如：

1 先找到div元素

var aa = document.getElementById("aa")

2 事件类型 --点击 移入移出
aa.onclick = function(){
 }
3 事件执行程序
aa.onclick = function(){
this.style.backgroundColor = "red"
}

获取元素：

通过id名找元素 唯一
var aa = document.getElementById('aa')
console.log(aa)

通过标签名找元素

var li_list = document.getElementsByTagName("li")
li_list[2].style.color = "red"

 

通过class名找元素
var bb = document.getElementsByClassName("bb")
console.log(bb)

querySelector()             查找符合条件的第一个元素

var newaa = document.querySelector("#aa")

console.log(newaa)
var newli = document.querySelector("li")

querySelectorAll()        查找所有符合条件的元素

var newlist = document.querySelectorAll("li")
 console.log(newlist)
var newbb = document.querySelectorAll(".bb")
console.log(newbb)

特殊元素的选取：   body      html
var by = document.body             选择body元素
var ht = document.documentElement              选择html元素
console.log(ht)