javaScript之节点操作
javaScript程序员避免不了要操作页面中的DOM，除了经常使用的：
appendChild()向childNodes列表的末尾添加一个节点。
insertBefore()，接受两个参数，要插入的节点和作为参照的节点。
replaceChild()，接受两个参数，要插入的节点和要替换的节点。
removeChild()，移除某个节点，接受一个参数，即为要删除的节点。
cloneNode()，克隆节点，接受一个布尔值，表示是否执行深复制。在参数为true情况下，执行深复制，复制其全部子节点。
我们还需要对网页中的节点进行遍历或颠倒，如下所示：
对页面节点遍历
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<title>遍历指定元素下所有类型节点</title>
<script type="text/javascript">
window.onload=function(){
var wrapper=document.getElementById("wrapper");
var content=document.getElementById("content");
var root = document.documentElement;
function findNodes(node){
var arr=[];
function done(node){
if(node.childNodes.length!=0){
var childrenNodes=node.childNodes;
for(var index=0;index<childrenNodes.length;index++){
arr.push(childrenNodes[index]);
done(childrenNodes[index]);
}
}
}
done(node)
return arr;
}
// 遍历根节点下所有节点
console.log('根节点下所有节点');
console.log(findNodes(root));
// 遍历ID为content的所有节点
console.log('ID为content的所有节点');
console.log(findNodes(content));
}
</script>
</head>
<body>
<div id="wrapper"></div>
<div id="content">
<div>
<!-- 我是注释 -->
<ul>
<li>first li</li>
<li>second li</li>
<li>third li</li>
</ul>
</div>
</div>
</body>
</html>
如果只想遍历Element类型节点，可以使用node.children。另外还可以实现对Element节点计数
function traverseNodes(node){
var countTeg = 0;
function done(node){
if(node.nodeType == 1)
countTeg++;
var childrens = node.childNodes;
for(var i=0; i<childrens.length;i++){
countTeg += done(childrens[i])
}
return countTeg;
}
return done(node);
}
颠倒页面节点
颠倒指定节点的直系子节点
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<title>遍历指定元素下所有节点</title>
<script type="text/javascript">
function reserve(node){
var children = node.childNodes;
var len = children.length;
for(var i=len-1; i>=0; i--){
var temp = node.removeChild(children[i]); //从父节点node中从后向前一次删除子节点children[i]
node.appendChild(temp); //把删除了的节点放到父节点node的末尾
}
}
</script>
</head>
<body>
<!-- 我是注释 -->
<div>
<p>第一段</p>
<p>第二段</p>
<p>第三段</p>
</div> <button onclick="reserve(document.body)">点击我</button>
</body>
</html>
颠倒指定节点的所有子孙节点
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<title>颠倒所有子孙节点</title>
<script type="text/javascript">
function reserveNode(node){ //文本节点
if(node.nodeType == 3){//颠倒文本节点
var text = node.data;
var retext = "";
for(var i=text.length-1; i>=0; i-- ){
retext += text.charAt(i);
}
node.data = retext;
}else{ //非文本节点直接颠倒节点位置
var children = node.childNodes;
var len = children.length;
for(var i = len-1; i>=0; i--){
reserveNode(children[i]);
node.appendChild(node.removeChild(children[i]));
}
} }
</script>
</head>
<body>
<!-- 我是注释 -->
<div>
<p>第一段</p>
<p>第二段</p>
<p>第三段</p>
</div> <button onclick="reserveNode(document.body)">点击我</button>
</body>
</html>
总之，灵活用于DOM的基本操作方法可以实现巨大的功能！！！
javaScript之节点操作的更多相关文章
- JavaScript DOM节点操作总结
节点类型 节点类型主要有三种:元素节点,属性节点和文本节点. 而对DOM的主要也就是围绕元素节点和属性节点的增删改查.下面就分别从对元素节点的操作和对属性节点的操作来介绍. 元素节点 查 在对DOM进 ...
- JavaScript 之 节点操作
一.文档树结构 DOM 可以将任何 HTML 或 XML 描绘成一个由多层节点构成的结构. 节点分为不同的类型,每种类型分别表示文档中不同的信息.每个节点都拥有各自的特点.数据和方法,另外也与其他节点 ...
- 前端之javascript的节点操作和Event
一 节点的增删改查 创建节点:createElement(标签名):创建一个指定名称的节点. 追加节点: 追加一个子节点:somenode.appendChild(标签名) 指定某个位置前面添加一个节 ...
- JavaScript DOM–节点操作
节点 节点至少拥有nodeType(节点类型).nodeName(节点名称)和nodeValue(节点值)这三个基本属性. 元素节点 nodeType 为1 属性节点 nodeType 为2 文本 ...
- JavaScript 节点操作Dom属性和方法(转)
JavaScript 节点操作Dom属性和方法 一些常用的dom属性和方法,列出来作为手册用. 属性: 1.Attributes 存储节点的属性列表(只读) 2.childNodes 存储 ...
- 第一百二十六节，JavaScript，XPath操作xml节点
第一百二十六节,JavaScript,XPath操作xml节点 学习要点: 1.IE中的XPath 2.W3C中的XPath 3.XPath跨浏览器兼容 XPath是一种节点查找手段,对比之前使用标准 ...
- JavaScript -- 节点操作， 事件触发， 表单伸缩
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- 前端JavaScript之DOM节点操作
1.HTML DOM是啥 Document Object Model:定义了访问和操作HTML文档的标准方法,把HTML文档呈现为带有元素,属性和文本的树状结构 2.解析过程 HTML加载完毕,渲染引 ...
- JavaScript之DOM操作，事件操作，节点操作
1,DOM操作 1.1 概念 所谓DOM,全称Document Object Model 文档对象模型,DOM是W3C(World Wide Web Consortuum )标准,同时也定义了访问诸 ...
随机推荐
- js中介者模式
中介者模式(Mediator),用一个中介者对象来封装一系列对象交互.中介者使各对象不需要显示地相互引用,从而使其松散,而且可以独立地改变它们之间的交互. 从生活中例子自然知道,中介者模式设计两个具体 ...
- JavaWeb学习总结（一）JavaWeb入门与Tomcat
一.常见软件系统体系结构B/S.C/S 1. C/S C/S结构即客户端/服务器(Client/Server),例如QQ: 需要编写服务器端程序,以及客户端程序,例如我们安装的就是QQ的客户端程序: ...
- CMMI 3级精简并行过程综述
“精简并行过程”(Simplified Parallel Process,SPP)是基于CMMI以及软件工程和项目管理知识而创作的一种“软件过程改进方法和规范”,它由众多的过程规范和文档模板组成.SP ...
- AOE网络——求关键路径
1.计算每个活动的最早发生时间(正序) earliest[1]=0; earlest[k]=max{earliest[j],+dut[j][k]} 2.计算每个活动的最晚发生时间(逆序) lastes ...
- 网络编程基础--多线程---concurrent.futures 模块---事件Event---信号量Semaphore---定时器Timer---死锁现象 递归锁----线程队列queue
1 concurrent.futures 模块: # from abc import abstractmethod,ABCMeta # # class A(metaclass=ABCMeta): # ...
- 自动部署基于Maven的war文件到远程Tomcat
转载自:https://www.cnblogs.com/jtlgb/p/7018705.html Tomcat 7发布URL = http://localhost:8080/manager/text命 ...
- vue-cli 脚手架项目-package.json
使用vue-cli脚手架新建的项目中,含有package.json. package.json是npm的配置文件,里面设定了脚本以及项目依赖的库. npm run dev 这样的命令就写在packag ...
- mac下安装libpng环境
用go写一个爬虫工具时需要使用一个go的库,而这个库有需要使用libpng库,不然编译就会提示说 png.h找不到等之类的信息,于是想到应该和windows一样需要安装gcc环境,然后让gcc里安装l ...
- POJ - 3150 :Cellular Automaton(特殊的矩阵，降维优化)
A cellular automaton is a collection of cells on a grid of specified shape that evolves through a nu ...
- QT 中“ std::cerr ”的使用方法【转载】
std::cerr 标准错误输出流 std::cout 标准输出流 std::cerr 与 std::cout的最大不同是 cerr 是 不带输出缓冲 的,直接就可以输出到显示器上, 而 cout ...