JavaScript的引用以及获取HTML元素_js $version-优快云博客

本文链接：https://blog.youkuaiyun.com/opo77_/article/details/105788324

本文介绍了如何在JavaScript中引用HTML元素以及进行元素操作，包括将不同类型的值转换为字符串，设置和获取innerHTML属性，以及通过控制台输出数据。还提及了数组类型、对象类和格式占位符等内容。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

那就看看我一开始弄了个神马东西吧。

<html>

<head>
    <meta charset="UTF-8">
    <title>为什么学习JavaScript</title>
</head>

<body>

    <script src="JS1.js">
    </script>
</body>

</html>

就是简单的输出了那句话而已。万一有和我一样笨笨的呢。
上面说的是HTML引用是怎样引用的
下面的都是在我在我的“JS1”文件里写的了
然后（）

alert("1+1不等于3！请重新输入！");
// alert警告提示，实现网页对用户的提示
// document.write("I Love coding!");

就会显示这个样子
在这里插入图片描述
将写入所有类型转换成字符串类型弹出（例如：对象类型的如下）

person = { name: "zhang", age: 23 };
alert(person);

在这里插入图片描述

还有就是把HTML标签放在JS文本中输入，同样保持标签属性

document.write("<h1>这是我的第一个JavaScript小程序<h1>");

效果就不放了，就是那个那个那个样子的（）

下面就讲了一些关于变量啊算法什么的，就很无聊（学完这几个后面会写具体的）

只有浮点数
var name=“Amy”；
alert（“我的名字是”+name）；
数值和字符串加号连接，数值会被转换成字符串**类型
减号连接两个字符串就会显示“NaN”

1.“ 获取HTML元素及值”

<html>

<head>
    <meta charset="UTF-8">
    <title>为什么学习JavaScript</title>
</head>

<body>
    第一个数字：<input type="text" id="num1" value="10"> 第二个数字：
    <input type="text" id="num2" value="20">
    <script src="JS1.js">
    </script>
</body>

</html>

 `var number1 = document.getElementById("num1").value;
alert(number1);`

在这里插入图片描述
上边说的是js获取HTML元素。获取到的值是字符串类型的。

2.写入HTML元素

<html>

<head>
    <meta charset="UTF-8">
    <title>为什么学习JavaScript</title>
</head>

<body>
    <p id="replace">这里是将要被替换的内容</p>
    <script src="JS1.js">
    </script>
</body>

</html>

在这里插入图片描述

var rep = document.getElementById("replace");
rep.innerHTML = "这里是替换的内容";

在这里插入图片描述

等号左边是变量rep去调用它的一个属性innerHTML，用法:.innerHTML=“要写入的内容或别的HTML标签元素”
第二行“这里是替换的内容”；效果就是: 这里是替换的内容

上述是把自定义内容插入到指定的元素对象中去
下边这个是从指定的元素对象中获取内容：

var rep = document.getElementById("replace");
alert(rep.innerHTML);

在这里插入图片描述
如果HTML里标签中嵌套其他标签，获取到的里边的嵌套标签是原样输出的
innerHTML属性值是：从起始标签到结束标签之间的内容，不包含标签。

第三种输出方式-----控制台输出
（输出的数据不会都转化成字符串，可以接受占位符。）

console.log("Hello World!");

右键审查元素找到控制台
在这里插入图片描述
数组类型：

var arr = [1, 2, 3, 4, 5, ];
console.log(arr);

在这里插入图片描述
对象类：

person = { name: "wyw", age: "4", eyecolor: "black" };
console.log(person);

在这里插入图片描述
格式占位符：

var a = "wyw";
var b = 4;
console.log(" %s is %d years old", a, b);

在这里插入图片描述
下一个更新事件。。稍后。。。