一、代码抒写
1.标签内部
2.外部引入
<head>
<script src=""></script>
</head>
3.写在标签里面
<div onclick="alert('你好世界')"></div>
二、 弹窗调试
alert普通弹窗 confirm确认弹窗(很少用) prompt输入弹窗(很少用)
console打印日志
1.调试方法
<script>
alert("内容")
console.log("打印日志)
</script>
//通常用来排查错误检查代码 使用完之后一定删除
2.系统弹窗
<script>
confirm("确定") //警告弹窗
prompt("请输入你的姓名:") //获取判断弹窗
</script>
三、获取元素
获取元素.事件=行为
get的性能 > query的性能
1.元素的获取
（1）通过ID名获取
<div id="content" class="wrap"></div>
<script>
console.log(document.getElementById("content"))
</script>
（2）通过class类名获取
<div id="content" class="wrap"></div>
<script>
console.log(document.getElementsByClassName("wrap")[0])
</script>
注意:这个class类名获取在低版本也是具有兼容性的,IE8及以下是不支持这个方法的
（3）通过标签名获取
document.getElementsByTagName("div")[0]
（4）通过name名获取
<div id="wrap" class="content" name="list"></div>
<input type="text" name="user">
<input type="text" name="password">
<script>
console.log(document.getElementsByName("list")[0]);
console.log(document.getElementsByName("user")[0]);
console.log(document.getElementsByName("password")[0]);、
</script>
（5）通过选择器获取
query是询问的意思 selector是选择的意思
<div id="wrap" class="content" name="list">
<p>13235</p>
<p>1383978</p>
</div>
<div class="content">
<p class="text">8</p>
<p class="text">199</p>
</div>
<script>
//多个标签 默认第一个
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]);
</script>
注意:这个选择器是H5出来的API,也就是说它是具有兼容性的,在我们的IE浏览器里面低版本不支持这个API
（6）特殊元素获取
<script>
console.log(document.documentElement)//获取整个结构文档,html架构
console.log(document.head)//获取我们的头部标签head
console.log(document.body)//获取body标签
console.log(document.title)//获取标题标签
</script>
四、事件 DOM0级事件
通过鼠标,键盘来操作元素的过程就是事件,直接链式操作的点后面跟事件是DOM0级事件
1.事件
获取的元素.事件 = 行为
<div class="wrap"></div>
<script>
document.getElementsByClassName("wrap")[0].onclick = ? //点击
document.getElementsByClassName("wrap")[0].onmouseover = ? //鼠标移入
document.getElementsByClassName("wrap")[0].onmouseenter = ? //鼠标移出
</script>
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 ='<P>456</P>'
document.getElementById("wrap").innerText ='<P>456</P>'
