javascript DOM笔记 1

JavaScript DOM（Document Object Model）是用于操作HTML和XML文档的标准接口。它允许程序和脚本动态更新、添加或删除页面中的元素和属性。在本文中，我们将深入探讨一些关键的DOM操作，特别是与获取和操作元素及它们的子节点相关的知识点。 创建新的DOM元素可以通过`createElement`方法实现。例如，如果你想要创建一个新的`<div>`元素，你可以写`var newDiv = document.createElement('div')`。然后，你可以使用`appendChild`、`insertBefore`或`insertAfter`方法将这个新元素添加到DOM树中。`appendChild`会将指定的节点添加到当前节点的末尾，而`insertBefore`则允许你在特定的现有子节点之前插入新节点。`insertAfter`通常需要自定义实现，因为它不是所有浏览器的内置方法。 删除DOM元素时，可以使用`removeChild`方法。例如，`parent.removeChild(child)`将从`parent`节点中移除`child`节点。 获取子节点时，`childNodes`属性可以提供一个包含所有子节点（包括文本节点和元素节点）的集合。然而，由于它也包含非元素节点，所以在Firefox下可能不符合预期。为了解决这个问题，可以使用`children`属性，它仅返回元素节点，是一个更兼容的获取子元素的方法。`nodeType`属性用于识别节点类型，其中1表示元素节点，2表示属性节点，3表示文本节点。 此外，`parentNode`属性可以用来获取一个节点的父节点，而`offsetParent`返回的是相对于定位父元素的节点。`firstChild`和`lastChild`分别获取第一个和最后一个子节点，但它们可能不区分元素节点和文本节点，因此在某些浏览器中可能需要使用`firstElementChild`和`lastElementChild`来确保只获取元素节点。 对于元素的属性操作，有三种常见的方法： 1. 直接通过点语法访问：`obj.style.display = "block"` 2. 通过数组访问方式：`obj.style["display"] = "block"` 3. 使用DOM方法：`getAttribute`、`setAttribute`和`removeAttribute` 例如，`getAttribute("class")`用于获取类名，`setAttribute("class", "myClass")`用于设置类名，而`removeAttribute("class")`则会移除该属性。 总结一下，JavaScript DOM提供了丰富的API来处理HTML文档结构。通过理解并熟练运用这些知识点，开发者可以有效地创建、修改和操作网页元素，实现动态效果和交互功能。掌握DOM操作是任何JavaScript开发者必备的技能之一，尤其是在进行前端开发时。