参考资料

1. HTML DOM改变单元格横跨的列数(colspan属性)
2. HTML DOM 返回文档的标题实例
3. HTML DOM添加表格中的行
4. HTML DOM 节点列表长度
5. HTML DOM 返回页面上所有相对URL的基URL 实例
6. HTML DOM 改变一个包含在iframe中的文档的背景颜色
7. HTML DOM弹出下拉列表中所有选项
8. HTML DOM将下拉列表变成多行列表

HTML DOM 访问与格式化

DOM 访问方法

核心方法

• document.getElementById(id) - 通过元素ID获取单个元素

• document.getElementsByTagName(name) - 通过标签名获取元素集合

• document.getElementsByClassName(name) - 通过类名获取元素集合

• document.querySelector(cssSelector) - 通过CSS选择器获取第一个匹配元素

• document.querySelectorAll(cssSelector) - 通过CSS选择器获取所有匹配元素

节点关系访问

• parentNode - 父节点

• childNodes - 子节点集合

• firstChild - 第一个子节点

• lastChild - 最后一个子节点

• nextSibling - 下一个兄弟节点

• previousSibling - 上一个兄弟节点

常用DOM属性

内容属性

• innerHTML - 获取或设置元素的HTML内容

• textContent - 获取或设置元素的文本内容

• value - 获取或设置表单元素的值

样式属性

• style - 访问元素的内联样式

• className - 获取或设置元素的class属性

• classList - 提供class操作方法(add/remove/toggle/contains)

属性方法

• getAttribute(name) - 获取属性值

• setAttribute(name, value) - 设置属性值

• removeAttribute(name) - 移除属性

格式化输出

文本格式化

<p>普通文本</p>
<pre>预格式化文本(保留空格和换行)</pre>
<code>代码片段</code>

列表格式化

<ul>
  <li>无序列表项</li>
</ul>

<ol>
  <li>有序列表项</li>
</ol>

表格格式化

<table>
  <tr>
    <th>表头</th>
    <td>单元格</td>
  </tr>
</table>

CSS扩展

样式操作

// 直接设置样式
element.style.color = "red";
element.style.fontSize = "16px";

// 添加/移除类
element.classList.add("highlight");
element.classList.remove("highlight");

// 切换类
element.classList.toggle("active");

获取计算样式

// 获取元素最终应用的样式
const style = window.getComputedStyle(element);
const color = style.getPropertyValue("color");

实例

动态创建元素

const div = document.createElement("div");
div.innerHTML = "<p>动态创建的内容</p>";
document.body.appendChild(div);

事件监听

document.getElementById("myBtn").addEventListener("click", function() {
  alert("按钮被点击");
});

表单处理

const form = document.querySelector("form");
form.addEventListener("submit", function(e) {
  e.preventDefault();
  const inputValue = document.getElementById("username").value;
  console.log(inputValue);
});

AJAX内容加载

fetch("data.json")
  .then(response => response.json())
  .then(data => {
    document.getElementById("content").innerHTML = data.content;
  });