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

本文深入解析JavaScript中节点操作的基础知识,包括查找、添加、更新、删除及复制节点的方法。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

作者: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);
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值