DOM操作-倒排序子元素
代码：
——————————————————————————————
<script type="text/javascript">
//倒排序子元素的函数
function deleteChilds(){
//获取父DOM
var ul = document.getElementsByTagName('UL')[0];
if(ul.hasChildNodes()){//判断是否包含子元素
//子元素的个数
var len = ul.childNodes.length;
var arr = []; //新数组变量用于存储节点
for(var i=0;i<len;i++){//遍历
//把节点存入数组
arr[i] = ul.childNodes[0];
//从第一个元素开始删除
ul.removeChild(ul.childNodes[0]);
}
//倒过来遍历所有节点
for(var i=len-1;i>=0;i--){
ul.appendChild(arr[i]);//添加到ul为子元素
}
}
}
</script>
————————————————————————————————————
<body style="text-align:center">
<ul>
<li>item1</li>
<li>item2</li>
<li>item3</li>
<li>item4</li>
</ul>
<br>
<input type="button" onclick="deleteChilds()" value="倒排序子元素"/>
</body>
————————————————————————————————————
DOM操作-倒排序子元素的更多相关文章
- DOM操作，控制HTML元素 （原生JS）
文档对象模型DOM(Document Object Model)定义访问和处理HTML文档的标准方法.DOM 将HTML文档呈现为带有元素.属性和文本的树结构(节点树). 先来看看下面代码: 将HTM ...
- DOM操作-动态创建网页元素
动态创建新的DOM元素,是JavaScript操作网页对象模型的重要手段之一 代码: <!DOCTYPE html> <html> <head> <title ...
- jQuery使用（四）：DOM操作之查找兄弟元素和父级元素
查找兄弟元素 向下查找兄弟元素 next() nextAll() nextUntil() 向上查找兄弟元素 prev() prevAll() prevUntil() 查找所有兄弟元素 siblings ...
- DOM操作-引用同级的元素
代码: ———————————————————————————————— <script type="text/javascript"> //获取 ...
- JavaScrip——DOM操作（查找HTML元素/修改元素）
innerHTML 1.查找元素——document.getElementById("intro") 2.输出查找的结果: (1)var a=document.getElement ...
- 实现类数组转化成数组(DOM 操作获得的返回元素值是一个类数组)
目标 实现类数组转化成数组 实例 链接地址 使用方法 const foo = document.querySelectorAll('.result') //链接地址输入控制台输入这行代码 const ...
- DOM操作元素
DOM 操作元素 JavaScript的DOM操作可以改变网页内容.结构和样式.我们可以利用DOM操作元素来改变元素里面的内容.属性等. DOM操作元素: 一.操作元素:(一)innerText .( ...
- jquer 基础篇 dom操作
DOM操作: 1.新增元素:创建元素:$("HTML")返回的创建成功的新元素新增子元素:元素.append(obj) 在匹配元素的里面新增一个子元素 追加方式 新元素作为最后一个 ...
- 前端最佳实践——DOM操作
1.浏览器渲染原理 在讲DOM操作的最佳性能实践之前,先介绍下浏览器的基本渲染原理. 分为以下四个步骤: 解析HTML(HTML Parser) 构建DOM树(DOM Tree) 渲染树构建(Rend ...
随机推荐
- 寒假学干货之------ 初学者关于fragment_main（碎片的困扰）
我们在activity_main中编写的框架,会被fragment_main中的取代掉,是因为新版的ADT为了配合平板Android3.0开发 起作用的代码在MainActivity.java中 pa ...
- Spring MVC（一）
MVC这种设计模式,不光运用于Web领域,而且也能用于非Web领域,MVC特指一种表现层设计模式,不限于Java语言 spring mvc属于spring框架的后续产品,用在基于MVC的表现层开发,类 ...
- iframe标签使用总结与注意问题
子页面访问父父页面变量,函数,页面元素 //变量: //在父页面中需定义为全局变量 //子页面中调用 var childFrameVar= parent.ParentVarName; //函数: pa ...
- wxpython 安装教程
wxpython在windows 上的安装,需要在wxpython官网上下载对应的版本:Python分为32和64位系统不是系统的32位和64位 所以可以先在IDE 下输入Python看下当前是32还 ...
- 通过HttpModule管道，帮助api对接开发
我们公司的技术以.net为主,最近公司的项目需要和其它以java为主的公司搞对接. .net提供webapi由java请求调用. 目前出现java说调用了,但是.net一直接收不到数据.两方开发人 ...
- vb.net_一个半成品
Imports System.Text Imports System.Runtime.InteropServices Public Class Form1 '引用win32api进行枚举窗体句柄操作 ...
- 整体认识flume：Flume介绍、分布式安装、常见问题及解决方案
问题导读 1.什么是flume? 2.flume包含哪些组件? 3.Flume在读取utf-8格式的文件时会出现解析不了时间戳,该如何解决? Flume是一个分布式.可靠.和高可用的海量日志采集.聚合 ...
- HDU 1335 Basically Speaking（进制转换）
题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=1335 Problem Description The Really Neato Calculator ...
- boostrap插件
第一章:模态弹出框 一.导入JavaScript插件 Bootstrap的JavaScript插件可以单独导入到页面中,也可以一次性导入到页面中.因为在Bootstrap中的JavaScript插件都 ...
- jQuery技巧大放送【转】
1.关于页面元素的引用 通过jquery的$()引用元素包括通过id.class.元素名以及元素的层级关系及dom或者xpath条件等方法,且返回的对象为jquery对象(集合对象),不能直接调用do ...