JavaScript中的DOM

最新推荐文章于 2024-07-16 19:32:16 发布

少年深眸似海^O^

最新推荐文章于 2024-07-16 19:32:16 发布

阅读量446

点赞数 1

文章标签： javascript 前端 html

本文链接：https://blog.csdn.net/qq_52763599/article/details/129947781

版权

这篇文章介绍了DOM的概念，它是网页的文档对象模型，允许JavaScript访问和修改HTML元素。文中详细阐述了通过JavaScript获取元素的三种方法，并展示了如何改变HTML内容，包括文本、属性和样式。此外，还讲解了如何创建、删除和替换HTML元素，如使用appendChild、insertBefore、removeChild和replaceChild等方法。

摘要由CSDN通过智能技术生成

一、什么是DOM

1.DOM是文档对象模型，当网页被加载时，浏览器会创建页面的文档对象模型；

2.通过DOM，可以访问JavaScript HTML的所有元素；

3.DOM模型被构造为对象的树通过可编程的对象模型，JavaScript获得了足够的能力来创建动态的HTML。

4.JavaScript能够改变页面中所有的HTML元素、HTML属性、css样式、且能够对页面中所有的事件作出反应。

二、JS中的DOM改变页面中内容的步骤

1.获取HTML元素(三种方法)

(1)根据id获取HTML元素:document.getElementById("id名")；

(2)根据标签名获取HTML元素:document.getElementByTagName("标签名");

(3)根据类名获取HTML元素:document.getElementByClassName("类名");

2.改变HTML

(1)改变页面中的HTML内容

document.getElementById("id").innerHTML = "新的HTML";

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>通过innerHTML改变HTML内容</title>
</head>
<body>
<p id="p1">大家好!</p>
</body>
<script>
    document.getElementById("p1").innerHTML = "Hello,everyone!";
</script>
</html>

运行结果为:Hello,everyone!

(2)改变页面中的HTML属性

document.getElementById(id).attribute = 新属性值;

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>改变HTML属性</title>
</head>
<body>
<img id="image" src="images/pic1.jpg">
</body>
<script>
    document.getElementById("image").src="images/pic2.jpg";
</script>
</html>

运行结果pic2.jpg

(3)改变页面中的HTML样式

document.getElementById(id).style.property = 新样式;

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>改变HTML样式</title>
</head>
<body>
<p id="p1">大家好</p>
<p id="p2">大家好</p>
</body>
<script>

    document.getElementById("p2").style.color = "blue";
    document.getElementById("p2").style.fontFamily = "Arial";
    document.getElementById("p2").style.fontSize = "30px";
</script>
</html>

运行结果:

3.创建、删除、替换HTML元素

(1)创建HTML元素

appendChild():添加新元素到结尾；

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>appendChild()创建元素</title>
</head>
<body>
<div id="div">
    <p id="p1">熊大</p>
    <p id="p2">熊二</p>
</div>
</body>
<script>

    var ps = document.createElement("p");
    var node = document.createTextNode("光头强");
    ps.appendChild(node);
    var element = document.getElementById("div");
    element.appendChild(ps);

</script>
</html>

运行结果:

insertBefore():添加新元素到开头。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>创建HTML节点</title>
</head>
<body>
<div id="div">
    <p id="p1">这是一个段落。</p>
    <p id="p2">这是另外一个段落。</p>
</div>

<script>
    var ps = document.createElement("p");
    var node = document.createTextNode("这是一个新的段落。");
    ps.appendChild(node);

    var element = document.getElementById("div");
    var child = document.getElementById("ps");
    element.insertBefore(ps, child);
</script>
</body>
</html>

运行结果:

(2)删除HTML节点

removeChild()

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
<div id="div">
    <p id="p1">这是一个段落。</p>
    <p id="p2">这是另外一个段落。</p>
</div>

<script>
    var parent = document.getElementById("div");
    var child = document.getElementById("p1");
    parent.removeChild(child);
</script>
</body>
</html>

(3)替换HTML元素

replaceChild()

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>replaceChild替换HTML元素</title>
</head>
<div id="div">
    <p id="p1">段落一</p>
    <p id="p2">段落二</p>
</div>
<script>
    var ps = document.createElement("p");
    var node = document.createTextNode("这是新段落");
    ps.appendChild(node);

    var parent = document.getElementById("div");
    var child = document.getElementById("p1");
    parent.replaceChild(ps, child);

</script>
</body>
</html>

运行结果:

当创建了一个网页并把它加载到web浏览器中时，DOM就悄然而生。浏览器根据网页文档创建一个文档对象。浏览器为我们提供了当前网页的模型，可通过javascript去读写它。所以DOM(Document Object Model)，文档对象模型，可以简单理解为代表网页文档的一颗树（模型）。需要同学们多多的去理解和使用它。