本文介绍JavaScript如何通过DOM操作实现HTML元素的添加、修改、删除及移动等功能，详细讲解了DOM对象及其属性、方法，并提供了常见操作的具体实例。
一 、 js 操作html 的dom对象 实现元素添加、修改、删除、移动 从新排版html
1、 dom 就是承载html的一个文本对象 ，该对象包含元素、属性、文本等方法跟属性，js就是通过控制dom的这个对象的
元素、属性、 文本 来实现添加、修改、删除、移动、排版html,以至于达到不同的显示效果和实现不同的功能。
2、dom中的元素以树形的形式呈现 ，但值得注意的是 文本也是一种元素，对他的处理跟标签元素有很多的类似的地方。
<html>
<head>
<title>文本节点</title>
</head>
<body name="body">
<label id="lab" name=“labName” >标签</label>
</body>
</html>
从上面一眼就能看出 根节点（root）是html ,他的子节点 （Child）是 head 、body ，head 的子节点（Child） title ,title的子节点（Child）“文本节点”
3、在js中常用的 对dom元素获取的方法 ：一棵树上的节点 多少都有点关系 并且每个节点都有自己的 属性等特征 根据关系跟属性来进行 节点的获取（也就是访问），
1）通过元素的id 获取 该元素对象 document.getElementById("元素id") ，
var lab = document.getElementById（"lab"）;
2) 通过元素的name 获取 该元素对象 document.getElementsByName(“元素名称”);
var lab = document.getElementsByName（"labName"）;
注意：犹豫标签的名称可能会重复 如重复就会获取对象的一个列表 那就需要通过角标来获取单个对象 比如获取第一个对象lab[0]
3) 通过元素的name 获取 该元素对象 document.getElementsByTagName("标签名称");
var lab = document.getElementsByTagName("lab");
注意：犹豫标签可能会重复 如重复就会获取对象的一个列表 那就需要通过角标来获取单个对象 比如获取第一个对象lab[0] 并且 标签名要求是大写（如LABEL）
4、根据 子父关系 来进行 节点相关操作 parentNode、firstChild以及lastChild 比且节点拥有 nodeName node 、nodeValue、nodeType等属性 当然节点是元素 肯定拥有该元
素 元素的所有属性。
1) parentNode
var node = document.getElementById（"lab‘);
var name = node.nodeName; //节点名称
var Value = node.nodeValue ; //节点值
var pn=node.parentNode; //body标签
2) firstChild
var fc=node.firstChild; //label 后面的文本标签
3) lastChild
var lc=node.lastChild.nodeValue; //文本内容标签 nodeValue是该标签内容
4)removeChild ()
node.parentNode.removeChild(node) //删除 label节点。
5) appendChild ()
添加标签 首先要创建一个便签元素 并设置属性 在将该元素添加到 html中
var input =createElement(“input”); //创建input 元素
input.setAttribute("type","button"); //通过setAttrbute 设置属性
input.setAttribute("value","button");
input.setAttribute("id","butn2");
node.parentNode.appendChild(input);
6）顺便介绍 getAttribute 获取元素的属性
node.getAttribute("name");
7) 获取html跟节点 还可以 用下面的方法直接获取
document.documentElement
document.body
注意：getElementById()获取的是一个具体的元素对象，所以可以直接使用上述的方法，要是通过getElementsByName() 一个是element 一个是elements 可以看
出后面获取的是一个数组 ，要想使用上述的方法先要通过角标获取别的 方法 获取到具体的一个元素对象 才可以使用。(如lab[0]）
文本节点的nodeName 就是显示的文本 nodeValue 也一样。
扫一扫
683
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
