作者:zccst
2014-09-20 补充
一、节点类型
nodeType
1 表示元素Element
二、节点操作
基础,如果document获取节点:
document.getElementById(elementId);
document.getElementsByClassName(tagName);
document.getElementsByTagName(tagName);
document.getElementsByName(elementName);
[b]1,查找[/b]
(1)查找孩子
//第一个孩子
var node = parentNode.firstChlid;
例子:document.getElementByClassName("xx")[0].firstChild;
//最后一个孩子
var node = parentNode.lastChild;
//指定某个孩子
var node = parentNode.children("xx");
//制定某一类孩子
var nodeArray = parentNode.getElementsByTagName(tagName);
批注:注意是Elements;结果是Array
//全部孩子
.children[index];//全部孩子,或某一个索引值对应的孩子
.childNodes
(2)兄弟节点
//后一个兄弟
var nextNode = node.nextSibling();
//前一个兄弟
var previousNode = node.previousSibling();
(3)获取自己的父级节点
//没有参数
var parentNode= node.parentNode();
(4)快速查询
var node = querySelect("selector");
var nodeArray = querySelectAll("selector");
[b]2,添加/更新/删除[/b]
(1)添加一个孩子节点
var childNode = document.createElement("a");
childNode.href="#";
childNode.innerHTML = "查看详情";
parentNode.appendChild(childNode);
(2)删除一个孩子节点
//一次删除一个节点,并返回该节点。
var oldNode = parentNode.removeChild(childNode);
(3)添加一个兄弟节点
//将newNode添加node前
node.insertBefore(newNode);
[b]3,复制节点[/b]
//false表示只复制节点,true表示既复制节点,又复制节点内容
var newNode = oldNode.cloneNode(true);
2014-09-20 补充
一、节点类型
nodeType
1 表示元素Element
二、节点操作
基础,如果document获取节点:
document.getElementById(elementId);
document.getElementsByClassName(tagName);
document.getElementsByTagName(tagName);
document.getElementsByName(elementName);
[b]1,查找[/b]
(1)查找孩子
//第一个孩子
var node = parentNode.firstChlid;
例子:document.getElementByClassName("xx")[0].firstChild;
//最后一个孩子
var node = parentNode.lastChild;
//指定某个孩子
var node = parentNode.children("xx");
//制定某一类孩子
var nodeArray = parentNode.getElementsByTagName(tagName);
批注:注意是Elements;结果是Array
//全部孩子
.children[index];//全部孩子,或某一个索引值对应的孩子
.childNodes
(2)兄弟节点
//后一个兄弟
var nextNode = node.nextSibling();
//前一个兄弟
var previousNode = node.previousSibling();
(3)获取自己的父级节点
//没有参数
var parentNode= node.parentNode();
(4)快速查询
var node = querySelect("selector");
var nodeArray = querySelectAll("selector");
[b]2,添加/更新/删除[/b]
(1)添加一个孩子节点
var childNode = document.createElement("a");
childNode.href="#";
childNode.innerHTML = "查看详情";
parentNode.appendChild(childNode);
(2)删除一个孩子节点
//一次删除一个节点,并返回该节点。
var oldNode = parentNode.removeChild(childNode);
(3)添加一个兄弟节点
//将newNode添加node前
node.insertBefore(newNode);
[b]3,复制节点[/b]
//false表示只复制节点,true表示既复制节点,又复制节点内容
var newNode = oldNode.cloneNode(true);