阿里测试——生成一个CSS选择器

news/2024/7/19 14:30:45 标签: 阿里, 测试, 笔试题, DOM, js

题目:
这里写图片描述
这里写图片描述
我的解法:

js handlebars">js-doctype"><!DOCTYPE html>
js-tag"><js-title">html js-attribute">lang=js-value">"en">
js-tag"><js-title">head
    <js-attribute">meta js-attribute">charset=js-value">"UTF-8">
    js-tag"><js-title">meta js-attribute">name=js-value">"viewport" js-attribute">content=js-value">"width=device-width, initial-scale=1.0">
    js-tag"><js-title">meta js-attribute">http-equiv=js-value">"X-UA-Compatible" js-attribute">content=js-value">"ie=edge">
    js-tag"><js-title">title>Documentjs-tag"></js-title">title>
js-tag"></js-title">head>
js-tag"><js-title">body>
    js-tag"><js-title">div js-attribute">id=js-value">"page">
        js-tag"><js-title">div js-attribute">class=js-value">"content main">
            js-tag"><js-title">div js-attribute">class=js-value">"refer">
                js-tag"><js-title">ul>
                    js-tag"><js-title">li>click1js-tag"></js-title">li>
                    js-tag"><js-title">li>click2js-tag"></js-title">li>
                    js-tag"><js-title">li>click3js-tag"></js-title">li>
                js-tag"></js-title">ul>
            js-tag"></js-title">div>
        js-tag"></js-title">div>
    js-tag"></js-title">div>
js-tag"></js-title">body>
js-tag"><js-title">script>

    js-keyword">var genCssSelector=js-function">js-keyword">functionjs-params">(){
        js-comment">//you code here
        js-keyword">var ele=js-built_in">arguments[js-number">0];
        js-keyword">var parentEle=ele.parentNode;
        js-keyword">var strGenCssSelector=ele.tagName.toLowerCase();
        js-keyword">while(parentEle.nodeName.toLowerCase()!==js-string">'#document'){
            js-keyword">if(parentEle.id!==js-string">''){
                strGenCssSelector=js-string">'#'+parentEle.id+js-string">' '+strGenCssSelector;
                parentEle=parentEle.parentNode;      
                js-keyword">continue;
            }js-keyword">else js-keyword">if(parentEle.className!=js-string">''){
                    strGenCssSelector=js-string">' '+strGenCssSelector;
                    js-keyword">var classList=parentEle.classList||parentEle.className.split(js-string">' ');
                    js-keyword">for(js-keyword">var i=js-number">0;i<classList.length;i++){
                        strGenCssSelector=js-string">'.'+classList[i]+strGenCssSelector;
                    }
                    parentEle=parentEle.parentNode;      
                    js-keyword">continue;
            }js-keyword">else{
                    strGenCssSelector=parentEle.nodeName.toLowerCase()+js-string">' '+strGenCssSelector;
                    parentEle=parentEle.parentNode;   
                    js-keyword">continue;
            } 

        }
        js-keyword">return strGenCssSelector;
    }

    document.addEventListener(js-string">'click',js-function">js-keyword">functionjs-params">(e){
        js-comment">//点击li时,返回html body #page .content.main .refer ul li
        alert(genCssSelector(e.target));
    })
js-tag"></js-title">script>
js-tag"></js-title">html>

http://www.niftyadmin.cn/n/764385.html

相关文章

pythonbmp怎么设置_如何使用纯Python创建BMP文件?

这是单色位图的完整答案。import math, structmult4 lambda n: int(math.ceil(n/4))*4mult8 lambda n: int(math.ceil(n/8))*8lh lambda n: struct.pack("li lambda n: struct.pack("def bmp(rows, w):h, wB len(rows), int(mult8(w)/8)s, pad li(mult4(wB)*h0…

CSS布局——左边固定,右边自适应的4种方法

HTML&#xff1a; <div class"outer"><div class"left">我在左边</div> <div class"right">我在右边</div> </div><div class"footer">我在底部</div>方法一&#xff1a; …

scardsvr服务如何启动_服务端架构治理|闲鱼如何有效提高应用的编译和启动速度...

作者&#xff1a;闲鱼技术-泊垚背景应用的发布是一件非常耗时的事情&#xff0c;尤其是当应用迭代了比较长的时间之后&#xff0c;一次预发的部署就可能需要花费十几分钟&#xff0c;其中服务启动一次&#xff0c;就可能花费五六分钟。如此漫长的发布可能带来两方面的问题&…

数组去重方法总结

1、使用双重循环 优点&#xff1a;兼容性好 function unique(arr){var lenarr.length;if(len<1) return arr;var newArr[];for(var i0;i<len;i){for(var j0;j<newArr.length;j){if(arr[i]newArr[j]){break;}}// 如果newArr中没有arr[i],则最后jnewArr.lengthif(jnew…

zenmap nmap输出无显示_Nmap的使用 十一

zenmap是nmap是nmap的图形界面&#xff0c;软件打开后如下&#xff1a;填写好目标IP或者域名后&#xff0c;配置选择好类型后按扫描&#xff0c;就自动会显示当前扫描信息如果配置中没有你想要的&#xff0c;可以选择配置&#xff0c;新的配置或命令&#xff0c;或者选择编辑选…

Javascript严格模式详解

一、概述 1、什么是严格模式&#xff1f; 除了正常模式意外&#xff0c;ES5&#xff08;2009年发布&#xff09;还添加了一种模式&#xff0c;即“严格模式”。这种模式使javascript在更加严格的条件下运行。 2、为什么使用严格模式&#xff1f; 消除javascript语言中一些不…

联想电脑锁屏界面设置被组织隐藏_电脑如何快速锁屏

电脑如何一键锁屏锁屏大家都不陌生&#xff0c;我们在使手机的时候防止误触就要设置锁屏&#xff0c;而且它还可以保护我们数据安全。那么电脑如何一键锁屏呢&#xff1f;今天&#xff0c;就将电脑一键锁屏的方法分享给你们&#xff0c;有需要就一起来了解一下吧电脑锁屏快捷键…

如何实现同一浏览器多个标签页之间的通信(一)——localStorage

一、localStorage &#xff08;1&#xff09;localStorage是什么&#xff1f; localStorage对象在修订过的HTML5规范中作为持久保存在客户端数据的方案取代了globalStorage&#xff0c;是Storage的实例。 注意&#xff1a;要访问一个localStorage对象&#xff0c;页面必须来…