jsオリジナル実装getElementsByClassName()

8311 ワード

jsベース

前言:document.getElementsByClassNameこの方法はie 8以上のブラウザでしか使用できません.つまりgetElementsByClassNameはhtml 5をサポートするブラウザでしか実行できません.
ie 9以下のブラウザがこのメソッドをサポートできるようにgetElementsByClassNameスクリプトメソッドを自分で書いて、ブラウザもjqueryのようにClassを手に入れることでオブジェクトを取得することができます.

function getElementsByClassName(className){  
    var elements = [];  

    if(!document.getElementsByClassName){  
        var domNodes = document.getElementsByTagName("*");  
        for(var i =0 ;iif(domNodes[i].className){  
                var classNames = domNodes[i].className.split(" "); /*                     */  
                for(var j = 0;jif(classNames[j]==className){  
                        elements.push(domNodes[i]);              
                    }  
                }  
            }  
        }  
    }else{  
　　　　 /*             ，     return document.getElementsByClassName(className) ？？？*/
        var domNodes = document.getElementsByClassName(className);  
        for(var i =0 ;ireturn elements;  
}

カスタムcssセレクタ
2018アリフロントエンド実習オンラインプログラミング-cssセレクタのまとめを実現
タイトル:
与えられた要素に基づいてcssセレクタを生成するgetCssSelectorメソッドを実装し、このセレクタによってこの要素(document.querySelector(A))に迅速に位置決めできます.


<html>
<head>
    <meta charset="UTF-8">
    <title>Documenttitle>
head>
<body>
    <div id="page">
        <div class="content main">
            <div class="refer">
                <ul>
                    <li>li>
                    <li>li>
                    ...
                ul>
             div>
        div>
    div>
body>
html>
<script type="text/javascript">
//    HTML  ，    JavaScript    “your code here”  ，  click            ：
var genCssSelector = function(){
    // your code here

    }

document.addEventListener('click', function(e){
    //  li ，  ：html body #page .content.main .refer ul li
    console.log(genCssSelector(e.target));
})

script>

拡張:
Documentオブジェクトを使用すると、スクリプトからHTMLページのすべての要素にアクセスできます.
ヒント:DocumentオブジェクトはWindowオブジェクトの一部で、windowを通じて使用できます.documentプロパティにアクセスします.
分析:
最初は問題が読めず、次の注釈を見て何を出力するかが分かり、DOMが木の関係であることを考察し、親要素をどのように取得するかが本題の鍵となった.
コード#コード#

var genCssSelector = function(){
        var element=arguments[0];//          ，     
        var parentElement=element.parentNode;//        
        var strGenCssSelector=element.tagName.toLowerCase()//           
        while(parentElement.nodeName.toLowerCase()!=='#document'){
            if(parentElement.id!==''){//    id
                strGenCssSelector='#'+parentElement.id+' '+strGenCssSelector;
                parentElement=parentElement.parentNode;
                continue;
            }else if(parentElement.className!=''){//    class
                    strGenCssSelector=' '+strGenCssSelector;
                    var classList=parentElement.className.split(' ');//      className，  classList   
                    for(var i=classList.length-1;i>=0;i--){//    
                        strGenCssSelector='.'+classList[i]+strGenCssSelector;
                    }
                    parentElement=parentElement.parentNode;
                    continue;
            }else{
                    strGenCssSelector=parentElement.nodeName.toLowerCase()+' '+strGenCssSelector;
                    parentElement=parentElement.parentNode;
                    continue;
            }
        }
        return strGenCssSelector;
    }

参照先:https://www.cnblogs.com/Arlar/p/5651509.html http://haiqiancun.com/bbs/bbsPage/0/detail/297e9e7946a599780146a5a38dde0003/1/20140806112531 https://www.cnblogs.com/shenminer/p/8610015.html

Git命令行連GithubとTortoiseGit連Githubの違い

HTML5 ShadowDOM & CustomElements