参考资料

1. HTML DOM改变表格的cellpadding和cellspacing
2. HTML DOM 返回一个button的value 实例
3. HTML DOM 改变iframe的高度和宽度
4. HTML DOM禁用和启用下拉列表
5. HTML DOM 返回一个iframe中的marginwidth属性的值
6. HTML DOM 被按下的键盘键的keycode？
7. HTML DOM 返回文档中第一个表单的名字
8. HTML DOM 返回一个锚的名字 实例

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