JS 里操作 DOM 的几个标准属性与方法
// 记录下 JS 操作 DOM 的几个标准属性与方法，
// 关于 DOM ，一般可以把它看作一颗树来理解，因为是树，所以每个结点
// 会有唯一 一个父结点 (parentNode)，当然除了根结点；每个结点还可
// 以有多个子结点 (childNodes)，而所有子结点中当然会有第一个结点
// (firstChild) 和 最后一个结点 (lastChild) ，当然也要除去叶子结点；
// 每个结点当然还可以有兄弟，前一个兄弟就是 previousSibling ， 后一个
// 结点当然就是 nextSibling 了，就别再钻牛角尖了，大概就是这样，下面
// 就简要的对各个属性和方法作下说明
// 该方法可以通过 document 或 某个元素结点来调用，得到指定 id 的元素结点
.getElementById("")
// 该方法可以通过 document 或 某个元素结点来调用，得到指定 标签的元素结点数组
.getElementsByTagName("")
// 元素结点调用，得到指定属性的值
.getAttribute("")
// 元素结点调用，设置指定属性的值
.setAttribute("")
// 结点调用，判断当前结点类型
// 1 为元素结点，2 为属性结点， 3 为文本结点，其他再查
.nodeType
// 文本结点调用，返回文本结点的值
.nodeValue
// 通过指定 html 标签名创建该标签元素
document.createElement("")
// 创建一个指定内容的文本结点
document.createTextNode("")
// 元素结点调用，向该元素结点增加一个新的子结点
.appendChild(newNode)
// 在指定结点前增加一个新结点
.insertBefore(newNode , targetNode)
// 在当前结点里用新结点替换指定的旧子结点
.replaceChild(newChild , oldChild)
// 删除当前结点的指定子结点
.removeChild(node)
// 下列属性全是元素结点来调用
// 得到父亲结点
.parentNode
// 得到所有子结点数组
.childNodes
// 得到第一个子结点
.firstChild
// 得到最后一个子结点
.lastChild
// 得到下一个兄弟结点
.nextSibling
// 得到前一个兄弟结点
.previousSibling
document方法：
getElementById(id) Node 返回指定结点的引用
getElementsByTagName(name) NodeList 返回文档中所有匹配的元素的集合
createElement(name) Node Node
createTextNode(text) Node 创建一个纯文本结点
ownerDocument Document 指向这个节点所属的文档
documentElement Node 返回html节点
document.body Node 返回body节点
element方法：
getAttribute(attributeName) String 返回指定属性的值
setAttribute(attributeName,value) String 给属性赋值
removeAttribute(attributeName) String 移除指定属性和它的值
getElementsByTagName(name) NodeList 返回结点内所有匹配的元素的集合
node方法：
appendChild(child) Node 给指定结点添加一个新的子结点
removeChild(child) Node 移除指定结点的子结点
replaceChild(newChild,oldChild) Node 替换指定结点的子结点
insertBefore(newChild,refChild) Node 在同一层级的结点前面插入新结点
hasChildNodes() Boolean 如果结点有子结点则返回true
node属性：
nodeName String 以字符串的格式存放结点的名称
nodeType String 以整型数据格式存放结点的类型
nodeValue String 以可用的格式存放结点的值
parentNode Node 指向结点的父结点的引用
childNodes NodeList 指向子结点的引用的集合
firstChild Node 指向子结点结合中的第一个子结点的引用
lastChild Node 指向子结点结合中的最后一个子结点的引用
previousSibling Node 指向前一个兄弟节点；如果这个节点就是兄弟节点，那么该值为null
nextSibling Node 指向后一个兄弟节点；如果这个节点就是兄弟节点，那么该值为null
1.理解DOM
概念：为了通过编程的方式控制网页
文档节点Document：根节点
文档类型节点DocumentType：不能包含子节点
文档片段节点DocumentFragment：像Document一样保存对象
元素节点Element：表示起始标记和结束标记之间的内容，可同时包含属性和子节点
文本节点Text：普通文本
属性节点Attr：代表元素节点开始标记内指定的属性
CDataSection节点：的对象表现形式
2.对DOM的支持
除IE外大部分浏览器对DOM都支持较好
3.使用DOM
①访问相关节点
documentElement:访问
firstChild:访问第一个子节点
lastChild:访问最后一个子节点
②检测节点类型
通过nodeType特性检验节点类型
③处理元素属性
getNamedItem(name):返回nodeName属性值等于name节点
removeNamedItem(name):删除nodeName属性值等于name的节点
setNamedItem(node):将node添加到列表中，按其nodeName属性进行索引
item(pos):返回在位置pos的节点
④访问指定节点
getElementsByTagName():返回括号中标记名所在节点的元素
getElementByName():获取所有name属性等于指定值的元素
getElementById():返回所定义id的元素
⑤创建和操作节点
creeateElement(tagname):创建标记名为tagname的元素
createTextNode(text):创建包含文本text的文本节点
appendChild():将给定的节点添加到某个节点后面
removeChild():删除节点
replaceChild():替换节点
cloneNode():复制节点
⑥操作文本节点
JS文档对象模型(DOM)的基本方法2010-05-07 00:19
一.直接引用结点
1.document.getElementById(id);
--在文档里面通过id来找结点
2.document.getElementByTagName(tagName);
--返回一个数组，包含对这些结点的引用
--如：document.getElementByTagName("span");将返回所有类型为span的结点
二.间接引用结点
3.element.childNodes
--返回element的所有子结点,可以用element.childNodes[i]的方式来调用
--element.firstChild=element.childNodes[0];
https://www.360docs.net/doc/ff9957020.html,stChild=element.childNod
es[element.childNonts.length-1];
4.element.parentNode
--引用父结点
5.element.nextSibling; //引用下一个兄弟结点
element.previousSibling; //引用上一个兄弟结点
三.获得结点信息
6.nodeName属性获得结点名称
--对于元素结点返回的是标记名称,如：返回的是"a"
--对于属性结点返回的是属性名称,如：class="test" 返回的是test
--对于文本结点返回的是文本的内容
7.nodeType返回结点的类型
--元素结点返回1
--属性结点返回2
--文本结点返回3
8.nodeValue返回结点的值
--元素结点返回null
--属性结点返回undefined
--文本结点返回文本内容
9.hasChildNodes()判断是否有子结点
10.tagName属性返回元素的标记名称
--这个属性只有元素结点才有，等同于元素结点的nodeName属性
四.处理属性结点
11.每个属性结点都是元素结点的一个属性，可以通过(元素结点.属性名称)访问
12.利用setAttribute()方法给元素结点添加属性
--elementNode.setAttribute(attributeName,attributeValue);
--attributeName为属性的名称，attributeValue为属性的值
13.使用getAttribute()方法获得属性值
--elementNode.getAttribute(attributeName);
五.处理文本结点
14.innerHTML和innerText属性，这两个方法相信大家都很熟悉,不介绍了,值得注意的是无论是ie还是firefox都容易把空格、换行、制表符等当成文本结点。所有一般通过element.childNodes[i]引用文本结点的时候，一般要处理：
六.改变文档的层次结构
15.document.createElement()方法创建元素结点
--如：document.createElement("Span");
16.document.createTextNode()方法创建文本结点
--如：document.createTextNode(" "); //注:他不会通过html编码，也就是说这里创建的不是空格，而是字符串
17.使用appendChild()方法添加结点
--parentElement.appendChild(childElement);
18.使用insertBefore()方法插入子节点
--parentNode.insertBefore(newNode,referenceNode);
--newNode为插入的节点，referenceNode为将插入的节点插入到这之前
19.使用replaceChild方法取代子结点
--parentNode.replaceChild(newNode,oldNode);
--注：oldNode必须是parentNode的子结点,
20.使用cloneNode方法复制结点
--node.cloneNode(includeChildren);
--includeChildren为bool，表示是否复制其子结点
21.使用removeChild方法删除子结点
--parentNode.removeChild(childNode);
七.表格的操作
--注：ie中无法直接将一个完整的表格结点插入到文档中
22.添加行和单元格
var _table=document.createElement("table"); //创建表
table.insertRow(i); //在table的
第i行插入行
row.insertCell(i); //在row的第i个位置插入单元格
23.引用单元格对象
--table.rows[i].cells[i];
24.删除行和单元格
--table.deleteRow(index);
--row.deleteCell(index);
25.交换两行获得两个单元格的位置
node1.swapNode(node2);
--这个方法在firefox中将出错
通用方法：
function swapNode(node1,node2)
{
var _parent=node1.parentNode;
var _t1=node1.nextSubling;
var _t2=node2.nextSubling;
if(_t1)parent.insertBefore(node2,_t1);
else _parent.appendChild(node2);
if(_t2)parent.insertBefore(node1,_t2);
else _parent.appendChild(node1);
}