Javascript，获取元素，write方法

提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

一：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.行内

效果

2.元素内

<body>

<script>
alert(2);
console.log("打印在控制台");>
</script>
</body>

效果：先弹窗 2 ，点击确定在打印到控制台console

3.外链

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

效果改之前之后

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>