Javascript基础

1. ID的限制：

• ID必须唯一：在同一个HTML文档中，每个id属性的值必须是唯一的。id的设计初衷就是为页面上的每个元素提供一个独特的标识符，便于JavaScript精确操作。

如果ID重复会发生什么？

• 当有多个元素使用相同的id时，document.getElementById()只会返回第一个匹配的元素，后面的会被忽略。

示例：

  



  
Duplicate ID

JavaScript:

var duplicateElement = document.getElementById("sameid");
console.log(duplicateElement);  // 只会输出第一个

结果：
控制台只会返回第一个元素，后面的

无法被访问到。这会导致代码不可预测，尤其在需要操作特定元素时。

解决方法：
如果需要多个元素具有类似的标识符，建议使用class代替id，并通过document.getElementsByClassName()或querySelectorAll()获取多个元素。

---

2. 能有ID吗？

可以！
HTML中的任何元素都可以设置id，包括。

示例：

This is important!

JavaScript：

var textSpan = document.getElementById("highlightText");
textSpan.style.color = "red";  // 将文本变为红色

常用于内联文本的部分格式化或交互，设置id方便修改样式或绑定事件。

---

3. 是HTML创建的还是JS创建的？

• 可以在HTML中直接创建，也可以通过JavaScript动态创建。

HTML创建按钮：

Click Me!

JavaScript操作：

var btn = document.getElementById("myButton");
btn.onclick = function() {
  alert("Button clicked!");
};

JavaScript动态创建按钮：

var newButton = document.createElement("button");  // 创建一个按钮元素
newButton.id = "dynamicBtn";  // 设置ID
newButton.innerText = "Dynamically Created";  // 设置按钮文本
document.body.appendChild(newButton);  // 将按钮添加到页面中

// 给新按钮绑定点击事件
newButton.onclick = function() {
  alert("Dynamically created button clicked!");
};

---

按钮的功能如何设置？

1. 通过HTML的onclick属性：

Click Me!

1. 通过JavaScript绑定事件：

var btn = document.getElementById("myButton");
btn.addEventListener("click", function() {
  alert("Button clicked!");
});

1. 通过函数调用：

HTML：

Start Game

JavaScript：

function startGame() {
  console.log("Game Started!");
}

---

总结：

• ID必须唯一，同一文档中不能重复，否则getElementById只会选取第一个匹配元素。
• 可以有id，并能像其他元素一样通过JavaScript操作。
• 按钮可以在HTML中直接定义，也可以通过JavaScript动态创建，功能通过onclick或addEventListener绑定。
  
   

---

使用class选择多个元素

---

例子1：使用 getElementsByClassName() 获取多个元素

HTML：

First highlighted text
Second highlighted text
Third highlighted text

JavaScript：

// 获取所有 class 为 'highlight' 的元素
var highlightedElements = document.getElementsByClassName("highlight");

// 遍历所有获取到的元素，修改样式
for (var i = 0; i < highlightedElements.length; i++) {
  highlightedElements[i].style.color = "red";  // 修改文字颜色为红色
  highlightedElements[i].style.fontWeight = "bold";  // 加粗文字
}

结果：
所有带有highlight类的元素（

、

、）文字都会变成红色并加粗。

---

例子2：使用 querySelectorAll() 选择多个元素

querySelectorAll() 使用类似CSS选择器的语法，功能更强大，可以选择更复杂的元素组合。

HTML：

  
Item 1
  
Item 2
  
Item 3 (Special)
  
Item 4

JavaScript：

// 获取所有 class 为 'item' 的元素
var items = document.querySelectorAll(".item");

// 修改所有 .item 元素的背景色
items.forEach(function(item) {
  item.style.backgroundColor = "#f0f0f0";
});

// 只选择 class 同时为 'item' 和 'special' 的元素
var specialItem = document.querySelectorAll(".item.special");

specialItem.forEach(function(item) {
  item.style.backgroundColor = "yellow";  // 特别项背景设为黄色
  item.style.fontSize = "18px";  // 放大字体
});

结果：

• 所有class="item"的
• 元素背景变为灰色。
• 具有class="item special"的Item 3背景变为黄色，字体变大。

---

比较：getElementsByClassName() vs querySelectorAll()

特性	getElementsByClassName()	querySelectorAll()
选择方式	只能通过class名选择	支持任意CSS选择器语法（如.class, #id, tag, 组合选择器等）
返回类型	HTMLCollection（实时更新）	NodeList（静态快照）
支持遍历方法	不支持forEach()，需用for循环或转换为数组	支持直接使用forEach()
兼容性	所有现代浏览器均支持	所有现代浏览器均支持

---