Javascript入门学习第六篇 js DOM编程第1/2页

在这篇文章中，我们会学习Javascript中的DOM编程，DOM是指文档对象模型（Document Object Model），代表了HTML或XML文档的树形结构。使用DOM编程可以实现在页面中动态修改、添加或删除元素等效果。

DOM介绍

什么是DOM?

DOM 是表示文档的方式，使得程序可以改变文档的内容、样式、或结构。

浏览器中的DOM

浏览器把 HTML 文档解析成一个树形结构。树形结构中的每一个节点都是一个对象。这些对象表示了文档中的各种元素、属性和文档本身。这个对象被称为文档对象模型（DOM）

获取DOM元素

通过id获取DOM元素

可以使用 document.getElementById(id) 方法来获取HTML文档中拥有指定 id 的元素。例如：

// 获取id为"test"的元素
var element = document.getElementById("test");

// 修改元素内容
element.innerHTML = "这是新的内容";

通过标签名获取DOM元素

可以使用 document.getElementsByTagName(tagname) 方法获取 HTML 文档中指定标签名的所有元素。例如：

// 获取所有的段落元素
var pElements = document.getElementsByTagName("p");

// 遍历所有 p 元素并修改内容
for (var i=0; i < pElements.length; i++) {
  pElements[i].innerHTML = "这是新的内容";
}

修改DOM元素

可以使用以下属性和方法修改DOM元素：

innerHTML

innerHTML 属性可以用来读取或修改HTML元素的内容。例如：

// 获取id为"test"的元素
var element = document.getElementById("test");

// 修改元素内容
element.innerHTML = "这是新的内容";

style属性

style 属性可以用来修改元素的样式。例如：

// 获取id为"test"的元素
var element = document.getElementById("test");

// 修改字体颜色为红色
element.style.color = "red";

// 修改背景颜色为黄色
element.style.backgroundColor = "yellow";

示例1: 动态创建元素

可以使用以下代码动态创建一个新的 <p> 元素：

// 创建新的段落元素
var newParagraph = document.createElement("p");

// 给段落添加内容
var text = document.createTextNode("这是新的内容");
newParagraph.appendChild(text);

// 将新段落添加到文档中
document.body.appendChild(newParagraph);

示例2: 删除元素

可以使用以下代码删除id为 "test" 的元素：

// 获取id为"test"的元素
var element = document.getElementById("test");

// 在文档中删除该元素
element.parentNode.removeChild(element);

通过学习以上 DOM 编程的内容，我们可以实现在页面中动态修改、添加、删除元素等效果。