js : DOM+BOM（window.location）

DOM: document object model

  • DOM 樹

DOM中元素獲取的方式

  • id獲取: var oDiv = document.getElementById("div1");
    • 注意，ID獲取只能用document；
  • class獲?。篸ocument.getElementsByClassName();
    • 可以限定范圍的獲取元素
  • tagName：可以限定范圍的獲取元素
  • querySelect
    • tag
    • '#id
    • .class
  • querySelectAll
    • tag
    • '#id
    • .class
    • 注意：querySelectAll獲取到的是一組元素，即使是頁面中唯一的ID，也得加[]獲??；

節(jié)點(diǎn)

節(jié)點(diǎn)名 nodeType nodeName nodeValue
文本節(jié)點(diǎn) 3 #text 文本內(nèi)容
注釋節(jié)點(diǎn) 8 #comment 注釋內(nèi)容
元素節(jié)點(diǎn) 1 大寫的標(biāo)簽名 null
document節(jié)點(diǎn) 9 #document null

節(jié)點(diǎn)的關(guān)系

  • children 子節(jié)點(diǎn)
    • 一般情況兼容，但是在IE6-8下，如果有注釋的話，拿到的是不準(zhǔn)確的；
  • childNodes 拿到所有的子節(jié)點(diǎn)
  • parentNode 父元素；拿到的是結(jié)構(gòu)上的父級(jí)；
  • previousSibling 上一個(gè)哥哥節(jié)點(diǎn)
  • previousElementSiblings 上一個(gè)哥哥節(jié)點(diǎn)
    • 高級(jí)瀏覽器支持
  • nextSibling 下一個(gè)弟弟節(jié)點(diǎn)
  • getChildren 獲取當(dāng)前容器下，所有的子元素
  • 實(shí)際能拿到所有的孫子輩的
<div class="wrap">
    <div>第一個(gè)div</div>
    <!--發(fā)生的發(fā)生的發(fā)生-->
    <div>第二個(gè)div</div>
    <a href="#">第1個(gè)a元素</a>
    <a href="#">第2個(gè)a元素</a>
    <!--是的發(fā)生的發(fā)展的發(fā)-->
    <a href="#">第3個(gè)a元素</a>
    是的方法阿魏酸
    <div>第三個(gè)div</div>
    <div>第四個(gè)div</div>
    是打發(fā)打發(fā)所發(fā)生的
    <span>第1個(gè)span</span>
    <!--水電費(fèi)水電費(fèi)v水電費(fèi)水電費(fèi)-->
    <span>第2個(gè)span</span>
    <span>第3個(gè)span</span>
</div>
<script>

//需求：獲取限定范圍內(nèi)的所有子節(jié)點(diǎn)
/*
* 1. 目的：獲取一定范圍內(nèi)的所有子節(jié)點(diǎn)
* 2. 參數(shù)：1）范圍變量 2）獲取的節(jié)點(diǎn)->可傳可不傳
* 3. 返回值：將最后獲取到的子節(jié)點(diǎn)以數(shù)組的形式返回
*/

/*
* @功能 -> 獲取限定范圍內(nèi)的所有子節(jié)點(diǎn)或特定的子節(jié)點(diǎn)
* @getChildren   -> function getChildren(){}
* @oParent       -> 父級(jí)元素，即范圍
* @tagName       -> 所要獲取的元素子節(jié)點(diǎn) -> 可傳可不傳
*/
// 1. 確定范圍,通過getElementsByClassName獲取到的都是一個(gè)數(shù)組，只有一個(gè)的時(shí)候也需要用[0]來獲取最終的元素
var oWarp = document.getElementsByClassName('wrap')[0];

function getChildren(oParent,tagName){
    var ary = [];
    var aChild = oParent.childNodes;
    for(var i=0;i<aChild.length;i++){
        if(aChild[i].nodeType === 1){
            tagName ? aChild[i].tagName.toLowerCase() == tagName.toLowerCase() && ary.push(aChild[i]): typeof tagName == "undefined"  && ary.push(aChild[i]);
        }
    }
    return ary;
}
//var aChildren = getChildren(oWarp);
</script>
  • prev() 獲取當(dāng)前元素的上一個(gè)哥哥元素
<div class="wrap">
    <div>第一個(gè)div</div>
    <!--發(fā)生的發(fā)生的發(fā)生-->
    <div>第二個(gè)div</div>
    <a href="#">第1個(gè)a元素</a>
    <a href="#">第2個(gè)a元素</a>
    <!--是的發(fā)生的發(fā)展的發(fā)-->
    <a href="#">第3個(gè)a元素</a>
    是的方法阿魏酸
    <div>第三個(gè)div</div>
    <div>第四個(gè)div</div>
    是打發(fā)打發(fā)所發(fā)生的
    <span>第1個(gè)span</span>
    <!--水電費(fèi)水電費(fèi)v水電費(fèi)水電費(fèi)-->
    <span>第2個(gè)span</span>
    <span>第3個(gè)span</span>
</div>
<script>
    /*
     * 1. 目的：獲取當(dāng)前元素的上個(gè)一個(gè)哥哥元素
     * 2. 參數(shù)：1）當(dāng)前元素
     * 3. 返回值：返回當(dāng)前元素的上一個(gè)哥哥元素
     **/

    /*
     * @功能 ->獲取當(dāng)前元素的上個(gè)一個(gè)哥哥元素
     * @curEle  -> 當(dāng)前元素
     *
     **/

    /*
     * 1. 獲取當(dāng)前元素
     * 2. 獲取當(dāng)前元素的上一個(gè)節(jié)點(diǎn)
     */

    var oDiv = document.getElementsByTagName("div")[0];
    var aDiv = oDiv.getElementsByTagName('div');

    function prev(curEle){
        if(curEle.previousElementSibling){
            return curEle.previousElementSibling;
        }
        var prev = curEle.previousSibling;
        while(prev && prev.nodeType !== 1){
            prev = prev.previousSibling;
        }
        return prev;
    }
</script>

next() 獲取當(dāng)前元素的下一個(gè)弟弟元素

<div class="wrap">
    <div>第1個(gè)div元素</div>
    <div>第2個(gè)div元素</div>
    <div>第3個(gè)div元素</div>
    <span>第1個(gè)span元素</span>
    <span>第2個(gè)span元素</span>
</div>
<script>
    var oWrap = document.getElementsByClassName('wrap')[0];
    var aIndex = oWrap.getElementsByTagName('div');

    function next(curEle){
        if(curEle.nextElementSibling){
            return curEle.nextElementSibling;
        }
        var next = curEle.nextSibling;
        while(next && next.nodeTyp !== 1){
            next = next.nextSibling;
        }
        return next;
    }

</script>

demo : 九九乘法表

<style>
    *{
        margin: 0;
        padding: 0;
        list-style: none;
    }
    ul li{
        height: 40px;
        line-height: 40px;
        font-size: 20px;
        cursor: pointer;
    }
    ul li.change{
        background: lightcyan;
    }
    ul li.bg0{
        background: lightblue;
    }
    ul li.bg1{
        background: lightskyblue;
    }
    ul li.bg2{
        background: lightsteelblue;
    }
    ul li span{
        display: inline-block;
        width: 90px;
        text-align: center;
    }
</style>


<ul></ul>




<script>
    (function(){
        var oUl = document.getElementsByTagName('ul')[0];
        var aLi = oUl.getElementsByTagName('li');
        var str = '';

        for(var i=1;i<10;i++){
            str += "<li>";
            for(var j=1;j<=i;j++){
                str += "<span>"+ j + "x" + i + "=" + j*i +"</span>";
            }
            str += "</li>";
        }
        oUl.innerHTML = str;

    // 思路一：自定義屬性
       /* for(var i=0;i<aLi.length;i++){
            aLi[i].className =  'bg'+ i%3;
            aLi[i].bg = 'bg' + i%3;
            aLi[i].onmouseover = function(){
                this.className = 'change';
            }
            aLi[i].onmouseout = function(){
                this.className = this.bg;
            }
        }*/

       // 思路2: 變量
        for(var i=0;i<aLi.length;i++){
            aLi[i].className = "bg" + i%3;
            var oldBg = null;
            aLi[i].onmouseover = function(){
                oldBg = this.className;
                this.className = 'change';
            }
            aLi[i].onmouseout = function(){
                this.className = oldBg;
            }
        }

    })()

</script>

BOM的知識(shí)-window.location

  • 網(wǎng)站的地址構(gòu)成：
    • 協(xié)議+域名+端口號(hào)+pathname+'?k=v&k=v'參數(shù)+'#haha'哈希值
      protocol：http／https
      host:域名
      port：端口號(hào)
      pathname：文件路徑
      search:?k=v&k=v
      hash:哈希值；
      href：完整的地址；
      reload：重新加載頁面；
  • 強(qiáng)制數(shù)據(jù)類型轉(zhuǎn)換的
    1、 比較運(yùn)算符 ==
    0=='' null==undefined []==0 ![]==false 
    function fn(aa){
    if(aa==null){
        //jquery源碼；
    }
}
    2、算術(shù)運(yùn)算符 - * ／ %
    3、邏輯運(yùn)算符 
    fn && fn();
this.Arg||window;
    4、條件判斷語句：
    • 除了false的都是true：false,0,NaN,'',null,undefined
最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡書系信息發(fā)布平臺(tái)，僅提供信息存儲(chǔ)服務(wù)。

友情鏈接更多精彩內(nèi)容