javascript DOM的详解及实例代码

JavaScript DOM的详解及实例代码

JavaScript DOM (Document Object Model) 是指将网页文档表示成一个树形结构，每个节点都是一个对象，可以通过修改节点属性和内容，实现对网页的动态操作和改变，从而实现网页动态交互效果的技术。

1. DOM介绍

DOM以树形结构的方式表现网页的各种元素，包括HTML元素，CSS样式，JavaScript等。DOM将每个HTML元素及其属性、文本内容、事件等都看作一个对象，通过这些对象来操作网页。JS与DOM之间的联系是，JS可以操作DOM，通过改变元素属性、HTML 内容、样式等来改变网页的外观和内容。

2. DOM的操作

通过JavaScript，我们可以通过下面几个步骤来操作DOM:

获取一个元素节点

   const element = document.getElementById("myElement"); //获取ID为myElement的元素节点

获取一组元素节点

   const elements = document.getElementsByTagName("div"); //获取所有div元素节点

添加节点

javascript const p = document.createElement("p"); //创建p元素节点 const text = document.createTextNode("Hello World!"); //创建文本节点 p.appendChild(text); //将文本节点添加到p元素中 document.body.appendChild("p"); //将p节点添加到body中

删除节点

   const parent = document.getElementById("parent"); //获取父元素节点
   const child = document.getElementById("child"); //获取子元素节点
   parent.removeChild(child); //从父元素节点中删除子元素节点

3. 示例说明

示例1: 动态添加元素

<!DOCTYPE html>
<html>
<body>

<h2>DOM实例-动态添加元素</h2>

<button onclick="myFunction()">点击添加p元素</button>

<script>
function myFunction() {
  const p = document.createElement("p");
  const text = document.createTextNode("Hello World!");
  p.appendChild(text);
  document.body.appendChild(p);
}
</script>

</body>
</html>

示例2: 动态改变元素样式

<!DOCTYPE html>
<html>
<head>
<style>
    p {
        color: blue;
        font-size: 18px;
        font-weight: bold;
    }
</style>
</head>
<body>

<h2>DOM实例-动态改变元素样式</h2>

<button onclick="myFunction()">点击改变p元素样式</button>

<script>
function myFunction() {
  const p = document.getElementsByTagName("p")[0];
  p.style.color = "red";
  p.style.fontSize = "24px";
  p.style.fontWeight = "normal";
}
</script>

<p>This is a paragraph.</p>
<p>This is another paragraph.</p>

</body>
</html>

以上两个示例演示了如何动态添加元素和动态改变元素样式，通过JS与DOM的交互，使网页更加动态和灵活。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：javascript DOM的详解及实例代码 - Python技术站