一、代码抒写
1.标签内部
2.外部引入
3.写在标签里面
二、 弹窗调试
alert普通弹窗 confirm确认弹窗(很少用) prompt输入弹窗(很少用)
console打印日志
1.调试方法
alert("内容")
console.log("打印日志)
//通常用来排查错误检查代码 使用完之后一定删除
2.系统弹窗
confirm("确定") //警告弹窗
prompt("请输入你的姓名:") //获取判断弹窗
三、获取元素
获取元素.事件=行为
get的性能 > query的性能
1.元素的获取
(1)通过ID名获取
console.log(document.getElementById("content"))
(2)通过class类名获取
console.log(document.getElementsByClassName("wrap")[0])
注意:这个class类名获取在低版本也是具有兼容性的,IE8及以下是不支持这个方法的
(3)通过标签名获取
document.getElementsByTagName("div")[0]
(4)通过name名获取
console.log(document.getElementsByName("list")[0]);
console.log(document.getElementsByName("user")[0]);
console.log(document.getElementsByName("password")[0]);、
(5)通过选择器获取
query是询问的意思 selector是选择的意思
13235
1383978
8
199
//多个标签 默认第一个
console.log(document.querySelector("#wrap"));
console.log(document.querySelector(".content"));
console.log(document.querySelector("#wrap p"));
//获取所有
console.log(document.querySelectorAll(".content")[0])
//指定获取
console.log(document.querySelectorAll("#wrap p")[1]);
注意:这个选择器是H5出来的API,也就是说它是具有兼容性的,在我们的IE浏览器里面低版本不支持这个API
(6)特殊元素获取
console.log(document.documentElement)//获取整个结构文档,html架构
console.log(document.head)//获取我们的头部标签head
console.log(document.body)//获取body标签
console.log(document.title)//获取标题标签
四、事件 DOM0级事件
通过鼠标,键盘来操作元素的过程就是事件,直接链式操作的点后面跟事件是DOM0级事件
1.事件
获取的元素.事件 = 行为
document.getElementsByClassName("wrap")[0].onclick = ? //点击
document.getElementsByClassName("wrap")[0].onmouseover = ? //鼠标移入
document.getElementsByClassName("wrap")[0].onmouseenter = ? //鼠标移出
2.行为(function)
一个元素通过什么事件要做什么事情,就是一个行为,这个行为我们可以称之为一个功能,我们放在函数function(){}中操作
行为(函数体)
function 声明一个函数 函数是执行的功能
function(参数){ 这里的参数是在代码执行体里面使用的
代码执行体
}
document.getElementById("wrap").onclick = function(){
console.log(document.getElementById("wrap"))
}
3.内容属性
直接修改标签的值
获取元素.属性 = 值
innerHTML 改变元素内容 解析标签(读取标签)
innerText 改变元素内容 不解析标签 把标签作为值渲染
document.getElementById("wrap").innerHTML = 456;
document.getElementById("wrap").innerHTML ='
456
'document.getElementById("wrap").innerText ='
456
'