DOM0-节点关系,节点操作API

作者:zccst


2014-09-20 补充

一、节点类型
nodeType
1 表示元素Element




二、节点操作
基础,如果document获取节点:
document.getElementById(elementId);
document.getElementsByClassName(tagName);
document.getElementsByTagName(tagName);
document.getElementsByName(elementName);



1,查找
(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");



2,添加/更新/删除
(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);



3,复制节点
//false表示只复制节点,true表示既复制节点,又复制节点内容
var newNode = oldNode.cloneNode(true);

你可能感兴趣的:(JavaScript)