一：Javascript：弱类型脚本语言，是一种动态类型。实现部分动画效果和用户交互等
-- html是骨架（页面结构） css样式 js是行为 --
弱类型体现：
JS代码可以写在body，head中。
如果需要写在body中，但有需要它最后执行 可以先加上window.onload=function(){ alert(1)}
<head>
<script>
window.onload = function(){
alert(1)
}
</script>
</head>
<body>
<script>
alert(2);
console.log("haha");
</script>
</body>
效果 先弹出 2 ，在打印 haha 到控制台 最后弹出 1
类似css的三种样式，行内，元素内，外链
1.行内
<body>
<!--1.行内 单击时弹出窗口 显示 1-->
<div onclick="alert(1)"></div>
</body>
效果
2.元素内
<body>
<!--2.script标签内-->
<script>
alert(2);
console.log("打印在控制台");>
</script>
</body>
效果：先弹窗 2 ，点击确定在 打印到控制台console
3.外链
<body>
<script src="new.js"></script>
</body>
new.js
alert("我先")
console.log("haha")
效果 ： 先出现弹窗 再 打印log haha
定义变量
<body>
<script>
var a=1; // number
var b=1.1; // number
var c="haha"; // string
var x=10,y=11; //同时设置多个值
alert(typeof(a)); // 弹出 a 的类型
alert(x+y) // 弹出 x+y的值
</script>
</body>
可以先定义变量名 不给值 占位 ，需要用它的值再赋值
</script>
var d,f;
d=1;
f=2;
alert(d*f);
</script>
二：获取元素
1.获取独立的标签 document+标签=" 赋值的内容"
document.title=
document.body.innerHTML="将值赋给了整个body，body拥有的其他内容就没了"
document.body.innerHTML+="消除方法 += 。新增加内容"
innerHTML能够解析标签: 将内容加粗 斜体
document.body.innerHTML+="<em><b>消除方法 += 。新增加内容</b></em>"
innerTEXT不能解析标签： 会将加粗斜体标签当作内容显示在浏览器上
document.body.innerHTML+="<em><b>消除方法 += 。新增加内容</b></em>"
<body>
<script>
document.title="改变标题" // 只有title 这样写
// document.body = "body网页上显示的内容" // 报错，除title以外，body后面还得加上innerHTML
// document.body.innerHTML = "body网页上显示的内容" // 将值赋给了整个body，body拥有的其他内容就没了
document.body.innerHTML += "body网页上显示的内容" // 消除方法 += 。新增加内容
</script>
</body>
2.通过id获取元素 document.getElementById
<style>
* {
margin: 0;
padding: 0;
}
div{
width: 100px;
height: 100px;
background: red;
}
</style> </body>
<div id="box1" title="h">我是div</div> /*这儿的title是 鼠标移到div上会显示的内容是h*/
<script>
document.getElementById("box1").innerText="通过id获取元素在改变的"
</script>
</body>
效果 改之前 之后
3.通过标签名获取Tagname， 多个p标签 需要加下标
document.getElementsByTagName("p")
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
* {
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<p>1</p>
<p>2</p>
<p>3</p>
<p>4</p>
<script>
// 通过标签名获取 Tagname 多个p标签 需要加下标
// document.getElementsByTagName("p");
var oP=document.getElementsByTagName("p");
// 查看有几个元素
alert(oP.length); // 弹出窗口显示4 代表有四个P
// 通过下标该值 改第一个P
oP[0].innerHTML+="第一个p";
</script>
</body>
</html>
效果
4.通过classname
// 通过classname
var oClassname=document.getElementsByClassName("box2");
alert(oClassname.length)
oClassname.innerHTML[0]="dff";
</script>
5.通过选择器
<div class="box2">
<p class="p1">1</p>
<p class="p1">2</p>
<p class="p1">3</p>
<p>4</p>
</div>
<1>.// querySelector只选中一个元素
document.querySelector(".box2>.p1").innerHTML="<b>1</b>" // 选择第一个p1
<2>.// querySelector选中多个元素 通过下标选择
oCls=document.querySelectorAll(".box2 .p1");
alert(oCls.length) // 3 p1
oCls[1].innerHTML="改了吗" // 改下标为1的值 第二个p1
三：write方法 有两种情况
<div>
测试write
</div>
<script>
// 1.在文档流关闭之前写入
document.write("在文档流关闭之前写入")
</script>
效果：write之前 之后 新增内容
2.在文档流关闭之后写入
<script>
// 2.在文档流关闭之后写入
window.onload=function () {
document.write("在文档流关闭之后写入")
}
</script>
效果 修改了整个html的内容，只剩下写入的内容了
