队列的概念

栈是一种后进先出的结构，而队列是一种先进先出的结构。如银行排队，排在前面的人先办业务然后离开，后来的人站在最后。可以用队列的push()方法插入元素到队列的末尾，可以用shift()方法删除第一个元素。

模拟队列进行插入、删除

在html中生成新的节点
var str1 = document.createElement("li");

然后在把这个节点插入到ul中

ul.appendChild(str1);

在jquery中可以不用生成新的节点，直接用append()方法将它添加到上一个li后面

在第一个节点之前插入
insertBefore

定义

The insertBefore() method inserts a new child node before an existing child node.

insertBefore()

方法的作用是：在现有的子节点前插入一个新的子节点

用法

target.insertBefore(newChild,existingChild)

newChild作为target的子节点插入到existingChild节点之前

existingChild为可选项参数，当为null时其效果与appendChild一样

insertBefore例子

var oTest = document.getElementById("test");

var newNode = document.createElement("p");

newNode.innerHTML = "This is a test";

oTest.insertBefore(newNode,oTest.childNodes[0]);
找到最后一个节点

最后一个节点就是li的长度减一，当然这只是其中一种方法。

删除节点
ul.removeChild(Rout);

完整代码

<!DOCTYPE html>

<html>

<head>

	<meta charset="UTF-8">

    <title></title>

	<style type="text/css">

        #ul li{

            list-style-type: none;

            display: inline-block;

            width: 20px;

            height: 20px;

            padding: 5px;

            margin-right: 10px;

            text-align: center;

            background: red;

            color: white;

        }

    </style>

</head>

<body>

    <input type="text" id="text">

    <input type="button" id="botton1" value="左侧入">

    <input type="button" id="botton2" value="右侧入">

    <input type="button" id="botton3" value="左侧出">

    <input type="button" id="botton4" value="右侧出">

    <ul id="ul">

        <li>1</li>

    </ul>

<script type="text/javascript">

   window.onload = function() {

    var text_value;

    var Lenter = document.getElementsByTagName('input')[1];

    var Renter = document.getElementsByTagName('input')[2];

    var Lquit = document.getElementsByTagName('input')[3];

    var Rquit = document.getElementsByTagName('input')[4];

    var ul = document.getElementById('ul');

    //var str1 = '';

    Lenter.onclick = function() {

        text_value = document.getElementById('text').value;

        var str1 = document.createElement("li");

        str1.innerHTML = text_value;

        ul.insertBefore(str1,ul.childNodes[0]);

        //text_value = null;

    }

    Renter.onclick = function() {

        text_value = document.getElementById('text').value;

        var str1 = document.createElement("li");

        str1.innerHTML = text_value;

        ul.appendChild(str1);

    }

    Lquit.onclick = function() {

        var Lout = ul.getElementsByTagName('li')[0];

        console.log(Lout)

        ul.removeChild(Lout);

    }

    Rquit.onclick = function() {

        var length = ul.getElementsByTagName('li').length;

        var Rout = ul.getElementsByTagName('li')[(length-1)];

        ul.removeChild(Rout);

    }

   }

</script>

</body>

</html>

了解数组中的队列方法，DOM中节点的一些操作的更多相关文章

  1. 【转载】 C#中使用Sum方法对List集合进行求和操作

    在C#的List操作中,有时候我们需要对List集合对象的某个属性进行求和操作,此时可以使用Lambda表达式中的Sum方法来快速实现此求和操作,使用Sum方法可使代码简洁易读,并且省去写for循环或 ...

  2. msdn 中MethodBase.Invoke 方法 介绍中的坑

    模块开发总结: c#动态调用webservices 来自网络及使用心得. msdn: MethodBase.Invoke 方法 (Object, Object[]) 使用指定的参数调用当前实例所表示的 ...

  3. 浅谈jQuery中的eq()与DOM中element.[]的区别

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  4. react中在hooks方法useEffect中加载异步数据

    useEffect( ()=>{ (async function getPipeList(value:any) { let result= await GetPipeList(value); s ...

  5. JavaScript高级程序设计--对象，数组（栈方法，队列方法，重排序方法，迭代方法）

    1.使用对象字面量定义对象 var person={}; 使用这种方式创建对象时,实际上不会调用Object构造函数. 开发人员更喜欢对象字面量的语法.   2.有时候需要传递大量可选参数的情形时,一 ...

  6. 49. ArrayList LinkedList中特有的方法

    集合的体系:--------------| Collection  单列集合的根接口 ----------| List 如果实现了List接口的集合类,该类具备的特点是:有序,可重复 ------|A ...

  7. DOM 中 Property 和 Attribute 的区别

    原文地址:http://web.jobbole.com/83129/ property 和 attribute非常容易混淆,两个单词的中文翻译也都非常相近(property:属性,attribute: ...

  8. [转]DOM 中 Property 和 Attribute 的区别

    angular的文档: https://angular.io/guide/template-syntax#property-binding https://blog.csdn.net/sunq1982 ...

  9. DOM 中 Property 和 Attribute 的区别（转）

    property 和 attribute非常容易混淆,两个单词的中文翻译也都非常相近(property:属性,attribute:特性),但实际上,二者是不同的东西,属于不同的范畴. property ...

随机推荐

  1. nginx使用replace-filter-nginx-module实现内容替换

    有时候我们想对响应(例如PHP接口)返回的内容做些字符串,虽然可以使用各语言代码相关方法(例如PHP的str_replace)进行替换,但是在nginx层面替换是更方便的,无需修改代码. 约定:本文源 ...

  2. MYSQL 主从复制---原理

    复制的核心步骤 在主库上把数据更改记录到二进制日志(Binary Log)中; 备库将主库上的日志复制到自己的中继日志(Relay Log)中; 备库读取中继日志中的事件,将其重放到备库数据之上; 下 ...

  3. 企业级LNMP架构搭建实例(基于Centos6.x)

    1.1 部署LNMP架构说明 1.1.1 LNMP架构内容 01.部署linux系统 02.部署nginx网站服务 03.部署mysql数据库服务 04.部署php动态解析服务 1.1.2 配置LNM ...

  4. 分享一个好用的微信npmjs包

    https://www.npmjs.com/package/jquery_wechat_sdk 安装 $ npm install jquery_wechat_sdk 使用 Browser Script ...

  5. lnmp1.3 配置pathinfo---thinkphp3.2 亲测有效

    lnmp1.3环境下配置pathinfo模式试了很多方法,都以失败告终,博主被这个问题困扰了很久,终于解决了!现记录如下: 1.打开php.ini 通常该文件在 /usr/local/php/etc/ ...

  6. windows10 使用gitblit搭建git服务器

    今天在win10上使用gitblit搭建git服务器时被坑了下,因为安装的java9出现不兼容问题,果断卸载重装了jdk8.废话不多说直接进入正题吧: 第一章 前言 使用gitblit搭建git se ...

  7. java基础解析系列(十一)---equals、==和hashcode方法

    java基础解析系列(十一)---equals.==和hashcode方法 目录 java基础解析系列(一)---String.StringBuffer.StringBuilder java基础解析系 ...

  8. 学校的c++程序课程设计（简单的写法 并无太多c++的特色）

    好久没更新博客了,最近一直在忙,花了一天时间做出这个简陋版的课程设计, 为了储存,也为了更新,所以于今天更新我的博客. 我选的课程设计题目如下: 某某公司的设备管理系统 功能及要求描述: (1)公司主 ...

  9. Loadrunner 中socket协议RecvBuffer接收到数据长度为空

    socket通讯,有两种方式,一种是建立长连接(TCP),建立后,不停的发送,接收.另外一种是建立短连接(UDP),建立连接,发送报文,接收响应,关闭连接.两种方式 server的开销不同. 今天出现 ...

  10. lucene6+HanLP中文分词

    1.前言 前一阵把博客换了个模版,模版提供了一个搜索按钮,这让我想起一直以来都想折腾的全文搜索技术,于是就用lucene6.2.1加上HanLP的分词插件做了这么一个模块CSearch.效果看这里:h ...