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之节点操作的更多相关文章

  1. JavaScript DOM节点操作总结

    节点类型 节点类型主要有三种:元素节点,属性节点和文本节点. 而对DOM的主要也就是围绕元素节点和属性节点的增删改查.下面就分别从对元素节点的操作和对属性节点的操作来介绍. 元素节点 查 在对DOM进 ...

  2. JavaScript 之 节点操作

    一.文档树结构 DOM 可以将任何 HTML 或 XML 描绘成一个由多层节点构成的结构. 节点分为不同的类型,每种类型分别表示文档中不同的信息.每个节点都拥有各自的特点.数据和方法,另外也与其他节点 ...

  3. 前端之javascript的节点操作和Event

    一 节点的增删改查 创建节点:createElement(标签名):创建一个指定名称的节点. 追加节点: 追加一个子节点:somenode.appendChild(标签名) 指定某个位置前面添加一个节 ...

  4. JavaScript DOM–节点操作

    节点 节点至少拥有nodeType(节点类型).nodeName(节点名称)和nodeValue(节点值)这三个基本属性. 元素节点 nodeType  为1 属性节点 nodeType  为2 文本 ...

  5. JavaScript 节点操作Dom属性和方法(转)

    JavaScript 节点操作Dom属性和方法   一些常用的dom属性和方法,列出来作为手册用. 属性:   1.Attributes 存储节点的属性列表(只读)   2.childNodes 存储 ...

  6. 第一百二十六节,JavaScript,XPath操作xml节点

    第一百二十六节,JavaScript,XPath操作xml节点 学习要点: 1.IE中的XPath 2.W3C中的XPath 3.XPath跨浏览器兼容 XPath是一种节点查找手段,对比之前使用标准 ...

  7. JavaScript -- 节点操作, 事件触发, 表单伸缩

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  8. 前端JavaScript之DOM节点操作

    1.HTML DOM是啥 Document Object Model:定义了访问和操作HTML文档的标准方法,把HTML文档呈现为带有元素,属性和文本的树状结构 2.解析过程 HTML加载完毕,渲染引 ...

  9. JavaScript之DOM操作,事件操作,节点操作

    1,DOM操作 1.1  概念 所谓DOM,全称Document Object Model 文档对象模型,DOM是W3C(World Wide Web Consortuum )标准,同时也定义了访问诸 ...

随机推荐

  1. DNS安装配置

    安装Bind软件: rpm -qa | grep bind bind-utils--.x86_64 bind--.x86_64 bind-libs--.x86_64 配置named.conf , vi ...

  2. Linux上SFTP用法

    SFTP简介 sftp是一个交互式的文件传输协议,类似于ftp,但它进行加密传输,比ftp更安全. SFTP用法 localhost 从远程主机获取文件或目录到本地目录下 sftp>get /h ...

  3. b树的实现(c++)

    转自:http://blog.chinaunix.net/uid-20196318-id-3030529.html B树的定义 假设B树的度为t(t>=2),则B树满足如下要求:(参考算法导论) ...

  4. Angular表单的本地校验和远程校验

    AngularJS Form 进阶:远程校验和自定义输入项 表单远程校验 HTML代码: <!doctype html> <html ng-app="form-exampl ...

  5. python基础5 - 产生随机数

    随机数 在 Python 中,要使用随机数,首先需要导入 随机数 的 模块 —— “工具包” import random 导入模块后,可以直接在 模块名称 后面敲一个 . 然后按 Tab 键,会提示该 ...

  6. .net core web发布到CentOS汇总

    直到今天我的博客终于可以见世人了,中间懒了很长一段时间,什么也没干,也没怎么学习,前段时间也是各种折腾,无心学习.本篇主要汇总下从一开始到现在遇到的问题汇总,作为学习笔记.我的博客就是我的学习笔记,因 ...

  7. Android自定义组件之ListView

    1-ListView简介 在android开发中ListView是比较常用的组件,它以列表的形式展示具体内容,并且能够根据数据的长度自适应显示.一个ListView通常有两个职责. (1)将数据填充到 ...

  8. IDEA+testng,输出没有test-output目录

    参考:http://www.cnblogs.com/veitch-623/p/6192601.html 在Edit Configurations里 使用默认报告就行

  9. nyoj-451-光棍节的快乐(错排公式)

     题目链接 /* Name:nyoj-451-光棍节的快乐 Copyright: Author: Date: 2018/4/25 16:44:47 Description:D(n)=(n-1)*(D( ...

  10. 【SQL查询】查询的值为空时,给出默认值_NVL函数

    格式为: NVL( string1, replace_with) 功能:如果string1为NULL,则NVL函数返回replace_with的值,否则返回string1的值. 引申一下,此NVL的作 ...