本文已参与「新人创作礼」活动，一起开启掘金创作之路。
一.JS的书写方式
与css类似，分为三种：
1.行内样式加上JS
例如：给button按钮加上onclick点击事件
<!--onclick:点击单击事件-->
<!--alert():表示弹框-->
<!--点击按钮就会出现hello world的弹框-->
<button onclick="alert('hello world')">按钮</button>
2.内部样式
在body标签结束之前添加script标签 例如：
<body>
<script>
// 没有引入JS文件时可以写代码
alert(123)
</script>
</body>
3.引入外部的JS文件
在body标签结束之前添加script标签,在src中添加引入路径
<!--引入外部JS文件:引入相对路径-->
<script src="01JS的书写方式.js">
// 引入之后这里不能再写JS代码
</script>
二、JS获取标签元素
1.getElementById：通过id获取标签
//通过id获取标签,在console里面查看,document表示当前文档
console.log(document.getElementById("btn"))
//或者通过变量接收获取的标签
var obtn=document.getElementById("btn")
2.getElementsByClassName：通过class来获取标签,这里加了s，因为类名可以有多个 所以要加下标来表示获取的是哪个
这里简单介绍一下JS修改文本： 1）innerText：用来修改文本内容 2）innerHTML：可以通过传入标签的方式进行修改
// 获取的是两个标签，要指明是哪个p标签
// 1）通过变量名传下标的方式
var ap=document.getElementsByClassName("p1")
ap[1].innerText="我是被修改的p标签"
ap[1].innerHTML="<h2>我是被修改的按钮</h2>"
// 2）获取元素时传入下标名
var ap=document.getElementsByClassName("p1")[0]
3.getElementsByName：通过name属性获取标签，后面加了s，所以要加下标
var adiv=document.getElementsByName("div1")[0]
adiv.innerText="我是被修改的div"
4.getElementsByTagName：通过标签名去获取标签
var op1=document.getElementsByTagName("p")[1]
op1.innerText="今天"
5.querySelector：通过css选择器获取元素 id用#表示 class用.表示
// 默认获取第一个元素
console.log(document.querySelector("#btn"));
// 通过name属性获取
console.log(document.querySelector("div[name='div1']"));
// 以集合的方式获取多个
console.log(document.querySelectorAll("P"));
