JavaScript DOM操作：动态增删查改表格

"jsDom编程笔记01" 这篇笔记主要涉及JavaScript（简称js）与DOM（文档对象模型）的相关知识，适用于对网页动态操作有需求的开发者。js是客户端脚本语言，它可以在浏览器环境中运行，对网页内容进行动态操作。DOM是HTML或XML文档的一种结构化表示，它允许程序和脚本动态更新、添加和删除文档中的内容。 1. 浏览器与服务器交互： 当用户请求网页时，浏览器会向服务器发送HTTP请求报文，请求特定的HTML页面。服务器响应并返回HTML内容，浏览器解析这些内容并构建DOM树。DOM树是HTML文档的抽象表示，其中每个元素都是一个节点，包括元素节点、文本节点等。一旦DOM树被修改，浏览器会相应地更新用户界面。 2. JavaScript的作用： JavaScript在服务器端仅作为字符串存在，但当它被发送到浏览器后，会被执行。通过JavaScript，开发者可以操控DOM，进而影响用户的图形界面。例如，可以通过JavaScript来改变HTML元素的属性、内容，或者添加和删除元素。 3.DOM概念与节点： DOM是一个节点集合，由HTML代码生成，使得开发者可以访问和操作页面的各个部分。每个HTML元素对应一个Node对象，Node有多种类型，如元素类型（1）和文本类型（3）。Node对象包含多个属性，如nodeType标识节点类型，nodeName表示标签名称。 4.DOM操作： - 快捷访问属性：如all（获取所有元素），forms（获取所有表单），images（获取所有图像），body（获取body元素）。 - 获取DOM元素的方法：getElementsByClassName, getElementById, getElementsByTagName等。 - 自定义属性：通过getAttribute和setAttribute方法来获取或设置元素的属性值。 5.DOM的增删改查： - 删除节点：使用parentNode.removeChild方法，将指定节点从其父节点中移除。 - 添加节点：appendChild用于在指定元素的末尾添加新节点，insertBefore则在另一个元素之前插入新节点。需要注意的是，当在循环中操作节点时，要确保正确处理变量引用，以免出现预期之外的结果。 6. 练习与小技巧： - 数组的字面量表示法：创建数组的一种简洁方式，如["hah",".net","mvc4"]。 - 对象字面量表示法：快速创建对象，如{key: value}。 这篇笔记对于理解JavaScript如何与DOM交互以及如何利用它们来实现网页动态效果非常有帮助，涵盖了基本的DOM操作，包括查找、添加、删除和修改元素等。掌握这些知识将使开发者能够创建更丰富、更互动的网页应用程序。