参考资料

1. HTML DOM改变单元格横跨的列数(colspan属性)
2. HTML DOM 返回一个iframe中的longdesc属性的值
3. HTML DOM 返回文档中第一个图像的ID
4. HTML DOM 返回文档的最后一次修改时间 实例
5. HTML DOM为表格指定规则
6. HTML DOM 返回文档的标题实例
7. HTML DOM 返回一个button的type 实例
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;
  });

声明：本站所有文章资源内容，如无特殊说明或标注，均为采集网络资源。如若本站内容侵犯了原著者的合法权益，可联系本站删除。