JavaScript 操作选中当前的li元素并给他添加select类。之前都是使用jquery写的，今天使用JavaScript写一个。

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style type="text/css">

        li{cursor:pointer;}

        .select{background:pink;}

    </style>

</head>

<body>

<ul>

    <li>这是菜单1</li>

    <li>这是菜单2</li>

    <li>这是菜单3</li>

    <li>这是菜单4</li>

    <li>这是菜单5</li>

    <li>这是菜单6</li>

    <li>这是菜单7</li>

    <li>这是菜单8</li>

</ul>

</body>

</html>

<script type="text/javascript">

    window.onload = function (){

        var aLi = document.getElementsByTagName("li");

        console.log(aLi);

        var i = 0;

        for (i = 0; i < aLi.length; i++){//得到li的长度

            aLi[i].onclick = function () {

                for (i = 0; i < aLi.length; i++) {

                    aLi[i].className = aLi[i].className.replace(/\s?select/,"");//替换select为空

                    console.log(aLi[i]);

                }

                this.className += "select";//添加select类

            };

        }

    };

</script>

运行结果：

aaarticlea/png;base64,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" alt="" />

JavaScript 操作选中当前的li元素并给他添加select类的更多相关文章

  1. 笔记：javascript操作iframe内的DOM元素，及调用iframe内的方法

    iframe相当于一个嵌入在网页内的浏览器,它与当前网页是隔离的. 但有时我们也需要在当前网页操作iframe内的元素或操作iframe内的javascript方法. 在网页内操作DOM元素,是使用d ...

  2. day35—JavaScript操作元素（创建、删除）

    转行学开发,代码100天——2018-04-20 JavaScript对DOM元素的创建.删除操作. 1.创建DOM元素 appendChild方法 createElement(ochild); op ...

  3. Python javascript操作DOM

    文档对象模型(Document Object Model,DOM)是一种用于HTML和XML文档的编程接口.它给文档提供了一种结构化的表示方法,可以改变文档的内容和呈现方式.我们最为关心的是,DOM把 ...

  4. 使用JavaScript操作DOM节点元素的常用方法(创建/删除/替换/复制等)

    getElementById(id)这是通过id来访问某一元素,最常用的之一,例:<html><body><div id="myid">test ...

  5. 使用javaScript操作页面元素

    from selenium import webdriver import time import unittest from selenium.common.exceptions import We ...

  6. JavaScript 操作DOM对象

    1)JavaScript  操作DOM對象 1.DOM:是Document  Object  Model 的缩写,及文档对象模型 2.DOM通常分为三类:DOM Core(核心).HTML-DOM 和 ...

  7. JavaScript操作DOM的那些坑

    js在操作DOM中存在着许多跨浏览器方面的坑,本文花了我将近一周的时间整理,我将根据实例整理那些大大小小的“坑”. DOM的工作模式是:先加载文档的静态内容.再以动态方式对它们进行刷新,动态刷新不影响 ...

  8. jQuery基础学习5——JavaScript方法获取页面中的元素

    给网页中的所有<p>元素添加onclick事件 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN& ...

  9. JavaScript 操作 DOM 常用 API 总结

    文本整理了javascript操作DOM的一些常用的api,根据其作用整理成为创建,修改,查询等多种类型的api,主要用于复习基础知识,加深对原生js的认识. 基本概念 在讲解操作DOM的api之前, ...

随机推荐

  1. Python数值

    一.python数值类型 python数值类型有以下四种: int(整数) float(浮点数) complex(复数) bool(布尔型) 注意:python3取消了long型.  二.python ...

  2. C# WebClient 使用http免费代理

    static void Main(string[] args) { WebClient client = new WebClient(); client.Encoding = Encoding.Get ...

  3. 004---os & sys

    os模块和sys模块 这两个模块都提供了很多与操作系统之间交互的功能 使用 import os #当前脚本的工作目录,不是脚本目录 print(os.getcwd()) # 获取指定目录下的所有文件和 ...

  4. Scala学习笔记（一）：环境搭建

    计算机领域的编程语言种类繁多,如C.C++.Java.C#等,我们知道的一般都是较为流行的编程语言,然有更多的是没听说过的,于是也就说不上关注或者使用了 一次在网上查资料时,无意间看到了“函数式编程” ...

  5. rails 中 preload、includes、Eager load、Joins 的区别

    Rails 提供了四种不同加载关联数据的方法.下面就来介绍一下. 一.Preload Preload 是以附加一条查询语句来加载关联数据的 User.preload(:posts).to_a # =& ...

  6. 程序员编程利器：20款最好的免费的IDEs和编辑器

    程序员编程利器:20款最好的免费的IDEs和编辑器 还没转眼明年可就大年三十了,忙的可真是晕头转了个向,看着亲朋好友们那让人欣羡的小肚腩,不禁感慨,岁月是一把猪饲料,绿了芭蕉,肥了那杨柳小蛮腰,可怜我 ...

  7. lessJs

    lessJs下载地址 ======== 简介 lessJs主要提供页面切换,页面管理的一个框架:less-ui.css 和 less-ui.js 是独立于less.js的,他们提供的是一组ui,包括消 ...

  8. C++学习014函数值传递和地址传递

    当我们给一个函数传参数的时候,可以直接值传入函数,也给可以把一个地址传入函数 区别就是一个本身不被改变,而另一本身也在改变, 在开发时候都会用到, 这里做下记录 #include <iostre ...

  9. python3.6 新特性学习

    #支持类型提示 typing { def greeting(name: str) -> str: return 'Hello ' + name #在函数greeting中,参数名称的类型为str ...

  10. python3学习之路_day1

    登录程序1.输入用户名密码2.认证成功后显示欢迎信息3.输错三次后锁定 #!/usr/bin/env python #_*_coding:utf-8_*_ #by anthor gushiren 20 ...