[HTML/CSS/JS] 探索JavaScript元素节点的属性和方法

复制代码
var element = document.getElementById("myElement");

console.log(element.innerHTML); // 输出元素的HTML内容
element.innerHTML = "<p>新的内容</p>"; // 设置新的HTML内容

复制代码
var element = document.getElementById("myElement");
console.log(element.className); // 输出元素的CSS类名
element.className = "highlight"; // 设置新的CSS类名

复制代码
var element = document.getElementById("myElement");
element.style.backgroundColor = "red"; // 设置背景色为红色
element.style.fontSize = "20px"; // 设置字体大小为20像素
element.style.border = "1px solid black"; // 设置边框为1像素的黑色实线

复制代码
var parentElement = document.getElementById("parentElement");
var newElement = document.createElement("p");
newElement.innerHTML = "新的子节点";
parentElement.appendChild(newElement); // 将新的子节点添加到父节点的末尾

复制代码
var parentElement = document.getElementById("parentElement");
var childElement = document.getElementById("childElement");
parentElement.removeChild(childElement); // 从父节点中移除子节点

复制代码
var buttonElement = document.getElementById("myButton");
buttonElement.addEventListener("click", function() {
  alert("按钮被点击了！");
});