javascript DOM 操作-优快云博客

本文详细介绍了使用JavaScript操作DOM的基本方法，包括查找、读写、创建、插入及删除节点等核心技能，帮助开发者掌握网页动态更新的技术。

javascript是一门网页编程语言，其第一要务是编写页面应用程序，而这一切的基础是：javascript DOM 操作。

什么是DOM？在‘javascript概述’这篇文章里面曾经提及过这个概念，但是没有详细说明，现在补上。

不难理解，页面中的节点元素是可以抽象为树状结构的。而浏览器也正是按照树状结构来解析页面元素的。所谓DOM就是Document Object Model，即文档对象模型。按照树状结构对页面中的节点进行归纳分类。javascript有自己的一套规则可以方便地对这棵文档树进行各种操作，即javascript DOM 操作。

javascript对于DOM的操作主要可以分为以下几种类别：

第一：查找节点

1.通过id查找节点：var _node = document.getElementById(id);//(返回id对应的节点)注意这个方法只能有document对象调用在整个文档中查找节点

2.通过标签名查找：var _nodes = document.getElementsByTagName('a');//返回查找节点下的所有a标签节点(注：这个方法可以由任何节点调用)，返回一个数组

3.访问特定节点的父子兄弟节点,假设现有一节点node

node.childNodes:node节点的所有子节点

node.firstChild:node节点的第一个子节点

node.lastChild:node节点的最后一个子节点

node.parentNode:node节点的父节点

node.nextSibling:node节点的下一个兄弟节点

node.previousSibling:node节点的上一个兄弟节点

第二：读写节点元素属性

读取节点元素属性：node.getAttribute("id");

修改节点元素属性：node.setAttribute("id","value");

通过这个属性可以实现修改节点样式表的功能。

第三：创建节点

1.创建DOM节点

var newDiv = document.createElement("div");//新建一个div节点

2.创建文本节点
       关于文本节点，多说几句。
       一个元素内部的文本实际上也是这个元素的一个节点，访问方式是nodeName.nodeValue,可读写
       创建文本节点的方式很简单：
           var textNode = document.createTextNode("这里是文本节点内的值");

第四：插入节点

有三种方式将新节点插入到DOM文档中。
   1.在某节点之前插入
       parentNode.insertBefore(newNode,oldNode);
       通过父节点的调用，将新节点插在旧节点之前
   2.在最后插入
       parentNode.appendChild(newNode);
       通过父节点的调用，将新节点插在子节点的末尾
   3.替换节点
       parentNode.replaceChild(newNode,oldNode);
       通过父节点的调用，把旧节点用新节点替换

特别注意，这几个方法都必须由其父节点调用才行

第五：删除节点