简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Rumah > hujung hadapan web > Soal Jawab bahagian hadapan > teks badan

怎么用JavaScript修改DOM节点

PHPz
Lepaskan： 2023-04-19 14:34:34
asal
1327 人浏览过

随着Web应用程序的发展，JavaScript已成为不可或缺的一部分。JavaScript可以用来修改网页内容并实现动态效果。其中，修改DOM是非常重要的一部分，因为它是与网页交互的关键。

什么是DOM？
DOM是文档对象模型，它是HTML文档的树形结构表示。在该文档中，每个HTML元素都是一个节点，例如：，，

等等。这些节点可以有子节点和属性，如节点

可以包含子节点 ，它也可以拥有属性，如 class，id 等等。JavaScript通过操作这些节点来改变网页的内容。

如何选择节点？
要操作DOM，我们需要选择节点。这可以通过多种方式来实现，主要有以下几种方法：

  1. 通过id选择节点

使用 document.getElementById() 方法可以根据指定的id选择一个节点。如下所示：

var myNode = document.getElementById("myNode");
Salin selepas log masuk

上述代码将选择一个带有id="myNode"的HTML元素。

  1. 通过class选择节点

选择一个或多个class属性相同的节点，可以使用getElementsByClassName() 方法。如下所示：

var myNodes = document.getElementsByClassName("classNode");
Salin selepas log masuk

上述代码将选择所有 class 属性等于"classNode"的HTML元素。

  1. 通过标签名选择节点

选择所有指定标签名的节点可以使用getElementsByTagName() 方法。如下所示：

var myNodes = document.getElementsByTagName("p");
Salin selepas log masuk

上述代码将选择文档中的所有

标签。

DOM节点属性的操作
DOM节点具有许多属性，如：id、class、title 等等。我们可以通过JavaScript来修改或获取这些属性的值。以下是一些常用的DOM节点属性操作方法：

  1. 获取或设置innerHTML属性

可以使用 getInnerHTML() 方法获取节点的innerHTML属性。也可以使用 setInnerHTML() 方法来设置节点的innerHTML属性。如下所示：

var myNode = document.getElementById("myNode");

// 获取节点的innerHTML属性
var myNodeInnerHTML = myNode.innerHTML;

// 设置节点的innerHTML属性
myNode.innerHTML = "新的HTML内容";
Salin selepas log masuk
  1. 获取或设置innerText属性

获取innerText属性可以用 getInnerText() 方法，设置innerText属性可以使用 setInnerText() 方法。如下所示：

var myNode = document.getElementById("myNode");

// 获取节点的innerText属性
var myNodeInnerText = myNode.innerText;

// 设置节点的innerText属性
myNode.innerText = "新的文本内容";
Salin selepas log masuk
  1. 获取或设置nodeType属性

nodeType 属性返回当前节点的类型，可以使用 getNodeType() 方法获取节点的nodeType属性。也可以使用 setNodeType() 方法来设置节点的nodeType属性。如下所示：

var myNode = document.getElementById("myNode");

// 获取节点的nodeType属性
var myNodeType = myNode.nodeType;

// 设置节点的nodeType属性
myNode.nodeType = 1;
Salin selepas log masuk
  1. 获取或设置nodeName属性

nodeName 属性返回节点的名称，可以使用getnodeName() 方法获取节点的nodeName属性。也可以使用 setnodeName() 方法来设置节点的nodeName属性。如下所示：

var myNode = document.getElementById("myNode");

// 获取节点的nodeName属性
var myNodeName = myNode.nodeName;

// 设置节点的nodeName属性
myNode.nodeName = "span";
Salin selepas log masuk
  1. 获取或设置nodeValue属性

nodeValue 属性返回或设置节点的值。可以使用 getNodeValue() 方法获取nodeValue属性。要设置属性值可以使用 setNodeValue() 方法。如下所示：

var myNode = document.getElementById("myNode");

// 获取节点的nodeValue属性
var myNodeValue = myNode.nodeValue;

// 设置节点的nodeValue属性
myNode.nodeValue = "新的节点内容";
Salin selepas log masuk
  1. 获取或设置className属性

className 属性返回或设置节点的类名。可以使用getclassName() 方法获取className属性。要设置属性值可以使用setclassName() 方法。如下所示：

var myNode = document.getElementById("myNode");

// 获取节点的className属性
var myClassName = myNode.className;

// 设置节点的className属性
myNode.className = "newClass";
Salin selepas log masuk
  1. 获取或设置id属性

id 属性返回或设置节点的id。可以使用getId() 方法获取id属性。要设置属性值可以使用setId() 方法。如下所示：

var myNode = document.getElementById("myNode");

// 获取节点的id属性
var myId = myNode.id;

// 设置节点的id属性
myNode.id = "newNode";
Salin selepas log masuk

DOM节点的创建和插入
除了修改DOM节点属性外，还可以创建DOM节点并将其插入现有DOM结构中。

创建DOM节点
要创建一个DOM节点，可以使用createElement() 方法。如下所示：

// 创建一个新的 
 元素
var newNode = document.createElement("p");

// 设置元素的内容
newNode.innerHTML = "新的 HTML 内容";

// 将新元素添加到文档中
document.body.appendChild(newNode);
Salin selepas log masuk

插入DOM节点
有以下几点可以插入DOM节点：

  1. 插入父节点
    使用appendChild() 方法可以将元素添加到父节点的末尾。如下所示：
var parent = document.getElementById("parent");

// 创建新的 
  •  元素
var newNode = document.createElement("li");

// 设置元素的内容
newNode.innerHTML = "新的列表项";

// 将新元素添加到父节点的末尾
parent.appendChild(newNode);
    • Salin selepas log masuk
    1. 插入兄弟节点
      使用insertBefore() 方法可以将一个新的节点插入到另一个节点之前。如下所示：
    var newNode = document.createElement("li");

// 设置元素的内容
newNode.innerHTML = "新的列表项";

// 将新元素添加到 "node" 元素之前
parent.insertBefore(newNode, node);
    Salin selepas log masuk
    1. 替换节点
      使用 replaceChild() 方法可以替换一个节点。如下所示：
    var newNode = document.createElement("li");

// 设置元素的内容
newNode.innerHTML = "新的列表项";

// 替换父节点下的第二个子节点
parent.replaceChild(newNode, parent.childNodes[1]);
    Salin selepas log masuk

    DOM节点的移除
    DOM节点可以通过多种方式移除。以下是一些常用的方法：

    1. 移除子节点
      使用 removeChild() 方法可以移除一个子节点。如下所示：
    var parent = document.getElementById("parent");

// 移除 "node" 元素
parent.removeChild(node);
    Salin selepas log masuk
    1. 移除自身
      使用 remove() 方法可以移除节点本身。如下所示：
    var node = document.getElementById("node");

// 移除节点本身
node.remove();
    Salin selepas log masuk

    总结
    通过使用JavaScript操作DOM，可以轻松地修改网页内容，包括HTML标记和文本内容。我们可以选择节点、更改节点属性、创建和插入新元素以及删除现有节点。这些操作使得网站可以动态地更新和响应用户行为。

    以上是怎么用JavaScript修改DOM节点的详细内容。更多信息请关注PHP中文网其他相关文章！

    sumber：php.cn
    Artikel sebelumnya：如何使用JavaScript进行时钟补位操作 Artikel seterusnya：如何在JavaScript中设置网页背景色
    Kenyataan Laman Web ini
    Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
    Artikel terbaru oleh pengarang
    Isu terkini
    function_exists() tidak boleh menentukan fungsi tersuai Ujian fungsi () {return true;} jika (function_exists ('test')) {echo "test is functio...
    daripada 2024-04-29 11:01:01
    0
    1
    670
    Bagaimana untuk memaparkan versi mudah alih Google Chrome Hello cikgu, bagaimana saya boleh menukar Google Chrome kepada versi mudah alih?
    daripada 2024-04-23 00:22:19
    0
    9
    782
    Tetingkap anak mengendalikan tetingkap induk, tetapi output tidak bertindak balas. Dua ayat pertama boleh dilaksanakan, tetapi ayat terakhir tidak boleh dilaksanakan.
    daripada 2024-04-19 15:37:47
    0
    1
    690
    Tiada output dalam tetingkap induk document.onclick = function(){ window.opener.document.write('Saya adalah output tetingkap ...
    daripada 2024-04-18 23:52:34
    0
    0
    558
    Di manakah perisian kursus tentang pemetaan minda CSS? Perisian kursus
    daripada 2024-04-16 10:10:18
    0
    0
    643
    Topik-topik yang berkaitan
    Lagi>
    Cadangan popular
    Tutorial Popular
    Lagi>
    Tutorial berkaitan
    Cadangan popular
    Kursus terkini
    Muat turun terkini
    Lagi>
    kesan web
    Kod sumber laman web
    Bahan laman web
    Templat hujung hadapan
    Tentang kita Penafian Sitemap
    Laman web PHP Cina：Latihan PHP dalam talian kebajikan awam，Bantu pelajar PHP berkembang dengan cepat！