掌握JavaScript基础：动态网页构建与操作-CSDN博客

本文链接：https://blog.csdn.net/weixin_30600615/article/details/147500966

背景简介

在网页开发过程中，JavaScript扮演着至关重要的角色，它负责实现网页的动态交互。本篇博客将基于提供的书籍章节内容，探讨JavaScript的基础知识，重点介绍如何通过JavaScript创建能响应用户动作的网页。

创建和添加新节点

JavaScript允许开发者通过编程方式动态地创建HTML文档中的新节点。书中提到，使用 createElement 方法可以创建一个新的元素节点，而 createTextNode 方法则用来创建文本节点。通过 appendChild 方法可以将新创建的节点添加到指定的节点末尾。

示例代码

var p = document.createElement("p"); // 创建段落
var text = document.createTextNode("这是段落的文本");
p.appendChild(text); // 添加文本到段落
var link = document.createElement("a"); // 创建链接
link.href = "test.html"; // 设置链接URL
var link_text = document.createTextNode("这是链接的文本");
link.appendChild(link_text); // 添加文本到链接
p.appendChild(link); // 将链接添加到段落末尾
document.body.appendChild(p); // 将新段落添加到文档末尾

插入和替换节点

除了添加节点，JavaScript还提供了插入节点到指定位置或替换现有节点的功能。通过 insertBefore 方法可以将新节点添加到指定节点之前，而 replaceChild 方法则可以替换指定的旧节点。

示例代码

var p = document.getElementsByTagName("p")[0]; // 获取第一个段落
document.body.insertBefore(p, document.body.lastChild); // 将段落移动到文档末尾

var new_p = document.createElement("p"); // 创建新段落
var new_text = document.createTextNode("这是新段落的文本");
new_p.appendChild(new_text);
document.body.replaceChild(new_p, p); // 替换段落

获取和设置元素的属性

为了有效获取和修改DOM元素的属性，JavaScript提供了 attributes 属性和一系列相关的方法，如 getAttribute 、 setAttribute 和 removeAttribute 等，这些方法对于操作HTML元素的属性非常有用。

示例代码

var elem = document.getElementById("div1");
console.log(elem.getAttribute("id")); // div1
elem.setAttribute("class", "new-class");

操作表格和表单元素

JavaScript同样支持对表格和表单元素的动态操作。可以创建、删除表格的标题、行和单元格，并且可以使用 getElementsByClassName 或 getElementsByTagName 方法来获取特定的元素集合。

示例代码

var table = document.getElementsByTagName("table")[0];
var caption = table.createCaption();
var text = document.createTextNode("这是表格的标题");
caption.appendChild(text);

var row = table.insertRow(0); // 在表格开头添加新行
var cell1 = row.insertCell(0);
var cell2 = row.insertCell(1);
var t1 = document.createTextNode("第一列");
var t2 = document.createTextNode("第二列");
cell1.appendChild(t1);
cell2.appendChild(t2);

使用Range对象和Selection对象

对于文本操作，JavaScript提供了 Range 对象和 Selection 对象。 Range 对象允许对文档的特定部分进行操作，而 Selection 对象提供了对用户选定文本的访问。

示例代码

var rng = window.getSelection();
if (rng.rangeCount) {
  var range = rng.getRangeAt(0);
  range.setStart(elem, 1); // 设置范围的起始点
  range.setEnd(elem, 5); // 设置范围的结束点
}