请牢记此域名无锡seo优化
知识目标
- 掌握在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);
总结
- 若你想获取包含 HTML 标签的内容，可使用 innerHTML。(内容会包含标签，同时也可给设置标签内容)
- 若只要纯文本内容，innerText 和 textContent 都可以，不过 textContent 会包含隐藏文本。
- 对于表单元素，使用 value 属性获取其值。