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;
  });