当前位置：首页 > news >正文

26-JavaScript简介和基本使用（JavaScript）

news 来源：原创 2025/4/21 9:12:44

知识目标

掌握在HTML文档中使用JavaScript的3种方法；
熟练JavaScript的输入输出方法；
了解获取HTML元素并进行内容修改的方式。

1. 简介

JavaScript 是一门跨平台、面向对象的脚本语言，它能使网页可交互（例如，拥有复杂的动画、可点击的按钮、弹出菜单等）。易学易用，属于Web的编程语言。

2. 在HTML中使用JavaScript的3种方法

在HTML文档中使用JavaScript代码有3种方法：在HTML文档中嵌入脚本程序、链接脚本文件和在HTML标签内添加脚本。

2.1 在HTML文档中嵌入脚本程序

JavaScript的脚本程序可以被包括在HTML中（任何位置），使之成为HTML文档的一部分，其格式为

<script type="text/javascript">
        代码代码代码（代码具有大小写之分）
</script>

script元素在页面中的位置中的位置决定了什么时候装载脚本。如果希望在其他所有内容之前装载脚本，就要确保脚本在<head>...</head>标签之间。

2.2 链接脚本文件

如果已经存在一个脚本文件(以.js为拓展名)，则可以使用<script>标签的src属性引用外部脚本文件的URL。

<head>
<script type="text/javascript" src="路径/脚本文件名.js"></script>
<head>

2.3 在HTML标签内添加脚本

在HTML标签内添加脚本，以响应产生的事件。其格式为:

<标签 属性='属性值'  事件="js语言代码;"</标签》

如a元素的单击事件onClick执行JavaScript代码弹出一个提示框，形式为：

<a href="#" onClick="alert("欢迎来到js世界")">点击</a>

3. 输出方法

JavaScript能够以不同方式“显示数据”：

使用 window.alert() 写入警告框，直接用alert也可;
document.write() 写入 HTML 输出 ;
使用 innerHTML，拿到某个标签改变标签里的内容，如document.getElementById(“demo”).innerHTML=‘会拿到id叫demo的标签并将其内容改成=后的值’;
写入 HTML 元素使用 console.log() 写入浏览器控制台。

4. 元素获取

在 JavaScript 中，有多种方式可以获取 HTML 标签元素，以下是常见的几种方法：
注意：如果将js写在head里，去取元素就有可能取不到，此时未创建。

4.1 通过id获取元素

使用 document.getElementById() 方法，它会返回文档中具有指定 ID 的第一个元素，如果没有找到则返回 null。这个方法适用于获取单个元素，因为 ID 在 HTML 文档中是唯一的。

// <div id="uniqueDiv">这是一个具有唯一 ID 的 div。</div>
const element = document.getElementById('uniqueDiv');

4.2 通过类名获取元素

使用 document.getElementsByClassName() 方法，它会返回一个 HTML 集合（类似数组），包含所有具有指定类名的元素。如果没有找到匹配的元素，返回的集合长度为 0。

// HTML 结构
// <p class="exampleClass">这是第一个段落。</p>
// <p class="exampleClass">这是第二个段落。</p>
const elements = document.getElementsByClassName('exampleClass');
for (let i = 0; i < elements.length; i++) {
    console.log(elements[i]);
}

4.3 通过标签名获取元素

使用 document.getElementsByTagName() 方法，它会返回一个 HTML 集合，包含所有指定标签名的元素。同样，如果没有找到匹配的元素，集合长度为 0。

// HTML 结构
// <li>列表项 1</li>
// <li>列表项 2</li>
const listItems = document.getElementsByTagName('li');
for (let i = 0; i < listItems.length; i++) {
    console.log(listItems[i]);
}

4.4 通过CSS选择器获取元素

document.querySelector() 方法会返回文档中匹配指定 CSS 选择器的第一个元素，如果没有找到则返回 null。它可以使用各种 CSS 选择器，如 ID 选择器、类选择器、属性选择器等。

// HTML 结构
// <div id="myDiv">这是一个 div。</div>
const div = document.querySelector('#myDiv');
console.log(div);

document.querySelectorAll() 方法会返回一个 NodeList（类似数组），包含文档中匹配指定 CSS 选择器的所有元素。如果没有找到匹配的元素，NodeList 的长度为 0。

// HTML 结构
// <p class="paragraph">段落 1</p>
// <p class="paragraph">段落 2</p>
const paragraphs = document.querySelectorAll('.paragraph');
paragraphs.forEach((paragraph) => {
    console.log(paragraph);
});

4.5 通过名称获取元素（主要用于表单元素）

使用 document.getElementsByName() 方法，它会返回一个 HTML 集合，包含所有具有指定名称的元素，常用于表单元素。

// HTML 结构
// <input type="radio" name="gender" value="male">男
// <input type="radio" name="gender" value="female">女
const radioButtons = document.getElementsByName('gender');
for (let i = 0; i < radioButtons.length; i++) {
    console.log(radioButtons[i]);
}

5. 更改元素内容

5.1 innerHTML属性

innerHTML属性可获取或设置元素内容的HTML内容，其中包含标签和文本，可对其取值和赋值。

// HTML 结构
// <div id="myDiv">这是 <b>一段</b> 文本。</div>
const divElement = document.getElementById('myDiv');
// 此时获取的内容包括b标签
const content = divElement.innerHTML; // 获取内容
console.log(content); 
// 给内容赋值
divElement.innerHTML = "这是更改后的<b>一段</b>文本"

5.2 innerText属性

innerText 属性用于获取元素内部的纯文本内容，会忽略 HTML 标签。

// HTML 结构
// <div id="myDiv">这是 <b>一段</b> 文本。</div>
const divElement = document.getElementById('myDiv');
// 此时获取的内容不包括b标签
const text = divElement.innerText;
console.log(text);

5.3 textContent属性

textContent 属性也能获取元素内部的纯文本内容，不过它会包含所有文本，即便这些文本被隐藏。

// HTML 结构
// <div id="myDiv">这是 <b>一段</b> 文本。</div>
const divElement = document.getElementById('myDiv');
const textContent = divElement.textContent;
console.log(textContent);

5.4 value属性

针对表单元素（像 input、textarea、select 等），可使用 value 属性获取其值。

// HTML 结构
// <input type="text" id="myInput" value="示例文本">
const inputElement = document.getElementById('myInput');
const inputValue = inputElement.value;
console.log(inputValue);