DOM筆記

獲取元素

獲取指定元素

document.getElementById: 通過(guò)id尋找一個(gè)元素（找到的是一個(gè)元素對(duì)象） 該方法只能被document對(duì)象調(diào)用（同一個(gè)文檔中id不能重復(fù)）

    <div id="box"></div>
    var box = document.getElementById(“box”);

document.getElementsByTagName: 通過(guò)標(biāo)簽名尋找一類(lèi)元素（找到的是由元素對(duì)象組成的偽數(shù)組,既可以被document調(diào)用，又可以被元素對(duì)象調(diào)用，被元素對(duì)象調(diào)時(shí)表示在該元素對(duì)象內(nèi)部執(zhí)行查找

    <div class="cl" id=“cl”>
        <div class="cl2"></div>
        <div class="cl2"></div>
    </div>
    <div class="cl"></div>
    <div class="cl"></div>

    var divs = document.getElementsByTagName("div");// 獲取頁(yè)面上所有的div,divs是一個(gè)偽數(shù)組
    var cl = document.getElementById("cl");// 獲取id為cl的元素
    var cl2s = cl.getElementsByTagName("div");// 獲取cl元素下面所有的div標(biāo)簽,cl2s是一個(gè)偽數(shù)組

document.getElementsByClassName通過(guò)類(lèi)名尋找包含這個(gè)類(lèi)名的元素

    <div class="cl main" id=“cl”>
        <p class="cl fl"></div>
        <span class="cl"></div>
    </div>
    <a class="cl"></a>

    var cls = document.getElementsByClassName("cl");//獲取到的是一個(gè)偽數(shù)組,里面裝的是div p span a這四個(gè)元素對(duì)象(只要標(biāo)簽中的class中有傳入的類(lèi)名就能獲取到)

獲取子元素&兄弟元素&父元素

element.childNodes: 獲取指定元素的子節(jié)點(diǎn),包括文本節(jié)點(diǎn)、元素節(jié)點(diǎn)等
element.children: 獲取指定元素的子元素,只會(huì)獲取元素節(jié)點(diǎn)。
element.nextSibling: 獲取指定元素的下一個(gè)兄弟節(jié)點(diǎn)
element.nextElementSibling: 獲取指定元素的下一個(gè)兄弟元素
element.previousSibling: 獲取指定元素的上一個(gè)兄弟節(jié)點(diǎn)
element.previousElementSibling: 獲取指定元素的上一個(gè)兄弟元素
element.parentNode: 獲取元素的父節(jié)點(diǎn),父節(jié)點(diǎn)肯定是一個(gè)元素

<ul id="list">
        <li id="firstlink"><a href="javascript:void(0)">首頁(yè)</a></li>
        <li><a href="javascript:void(0)">播客</a></li>
        <li><a href="javascript:void(0)">博客</a></li>
        <li><a href="javascript:void(0)">相冊(cè)</a></li>
        <li><a href="javascript:void(0)">關(guān)于</a></li>
        <li id="lastlink"><a href="javascript:void(0)">幫助</a></li>

</ul>

// 通過(guò)id獲取元素對(duì)象
var ul = document.getElementById("list");
// 通過(guò)標(biāo)簽名獲取元素?cái)?shù)組
var lis = ul.getElementsByTagName("li");
// 不關(guān)心層級(jí) 只找指定標(biāo)簽
// 缺點(diǎn):如果內(nèi)部還有l(wèi)i 也會(huì)找到

var nodes = ul.childNodes;
//子節(jié)點(diǎn) 只找子級(jí)
//缺點(diǎn):除了我們想要的元素節(jié)點(diǎn) 還會(huì)獲取到其他節(jié)點(diǎn)

var children = ul.children;//只獲取ul下的子元素

var link = document.getElementById("firstlink");
var nextNodeSibling = link.nextSibling; // 獲取到的是換行(文本節(jié)點(diǎn))
var nextElementSibling = link.nextElementSibling;//獲取到的是下一個(gè)li標(biāo)簽

var parentNode = link.parentNode;// 獲取到的是ul

獲取第一&最后一個(gè)子元素

element.firstChild: 獲取指定元素下面的第一個(gè)子節(jié)點(diǎn)
element.firstElementChild: 獲取指定元素下面的第一個(gè)子元素
element.lastChild: 獲取指定元素下面的最后一個(gè)子節(jié)點(diǎn)
element.lastElementChild: 獲取指定元素下面的最后一個(gè)子元素

var firstNode = ul.firstChild;// 獲取到的是換行(文本節(jié)點(diǎn))
var firstElement = ul.firstElementChild;// 獲取到的是firstlink
var lastNode = ul.lastChild;// 獲取到的是換行(文本節(jié)點(diǎn))
var lastElement = ul.lastElementChild;// 獲取到的是lastlink

節(jié)點(diǎn)操作

克隆節(jié)點(diǎn) - cloneNode()

  • element.cloneNode(): 復(fù)制element節(jié)點(diǎn)

  • 參數(shù):布爾值,

    • true代表深層克隆,把當(dāng)前節(jié)點(diǎn)和內(nèi)部所有節(jié)點(diǎn)都復(fù)制一份

    • false代表淺層克隆,只復(fù)制當(dāng)前節(jié)點(diǎn)

      <div id="father">
    <div id="son"><div/>
</div>

var father = document.getElementById("father");
var son = document.getElementById("son");
var clone = son.cloneNode(true);// 把son這個(gè)div復(fù)制一份 復(fù)制出來(lái)的clone和son沒(méi)有任何關(guān)系了

添加節(jié)點(diǎn) - appendChild()

  • father.appendChild(son):將son節(jié)點(diǎn)追加到father內(nèi)部的最后位置

    <div id="father">
    <div id="son"><div/>
</div>
<div id="demo"></div>

var father = document.getElementById("father");
var demo = document.getElementById("demo");
var clone = demo.cloneNode(true);// 將demo克隆一份 
father.appendChild(clone);// 將克隆出來(lái)的clone追加到father中

// 此時(shí)頁(yè)面結(jié)構(gòu)應(yīng)該為
<div id="father">
    <div id="son"><div/>
    <div id="demo"></div>
</div>
<div id="demo"></div>

#追加克隆節(jié)點(diǎn)對(duì)原節(jié)點(diǎn)不會(huì)產(chǎn)生影響

//如果代碼如下 則會(huì)將demo節(jié)點(diǎn)直接移動(dòng)到father節(jié)點(diǎn)下
father.appendChild(demo);// demo是頁(yè)面上存在的節(jié)點(diǎn)

// 此時(shí)頁(yè)面結(jié)構(gòu)應(yīng)該為
<div id="father">
    <div id="son"><div/>
    <div id="demo"></div>
</div>

插入節(jié)點(diǎn) - insertBefore()

  • father.inserBefore(son1,son2): 將son1插入到father節(jié)點(diǎn)下的son2前面

    <div id="father">
    <div id="son"><div/>
</div>
<div id="demo"></div>

var father = document.getElementById("father");
var son = document.getElementById("son");
var demo = document.getElementById("demo");

father.inserBefore(son,demo);//會(huì)直接將demo節(jié)點(diǎn)移動(dòng)到father下的son前面       

#插入克隆出來(lái)的節(jié)點(diǎn)也不會(huì)對(duì)原節(jié)點(diǎn)產(chǎn)生影響

移除節(jié)點(diǎn) - removeChild()

  • father.removeChild(son): 將father下的son節(jié)點(diǎn)移除

    <div id="father">
    <div id="son"><div/>
</div>

var father = document.getElementById("father");
var son = document.getElementById("son");

father.removeChild(son);// 直接將son節(jié)點(diǎn)刪除

創(chuàng)建結(jié)構(gòu)

document.write()

document.write("內(nèi)容") 特點(diǎn):只能被document調(diào)用,而且會(huì)覆蓋頁(yè)面上原有內(nèi)容

    document.write("<a )

    // 可以在頁(yè)面上創(chuàng)建一個(gè)a標(biāo)簽,而且會(huì)覆蓋頁(yè)面上原有的所有內(nèi)容

element.innerHtml

element.innerHtml特點(diǎn):往頁(yè)面添加html標(biāo)簽,可以限定范圍

    <div id="box"></div>

    var box = document.getElementById("box");
    box.innerHtml = "<a ;

    // 追加后的結(jié)構(gòu)為
    <div id="box">
        <a >百度</a>
    </div>

document.createElement()

document.createElement("內(nèi)容") 特點(diǎn):動(dòng)態(tài)創(chuàng)建標(biāo)簽,添加到頁(yè)面需要配合appendChild使用

    <div id="box"></div>

    var box = document.getElementById("box");
    var input = document.createElement("input");
    input.type = "text";
    box.appendChild(input);

標(biāo)簽的自定義屬性操作

setAttribute()

設(shè)置標(biāo)簽屬性: setAttribute()

    <div id="box"></div>
    var box = document.getElementById("box");
    box.setAttribute("id","aaa");// 有規(guī)定的屬性可以設(shè)置
    box.setAttribute("bbb","ccc");// 沒(méi)有規(guī)定的屬性也可以設(shè)置

getAttribute()

獲取標(biāo)簽屬性:getAttribute()

    <div id="box"></div>
    var box = document.getElementById("box");
    box.getAttribute("id");// 有規(guī)定的可以獲取
    box.getAttribute("aaa"); // 沒(méi)有規(guī)定的也可以獲取

removeAttribute()

移除標(biāo)簽屬性:removeAttribute()

    <div id="box"></div>
    var box = document.getElementById("box");
    box.removeAttribute("id"); // 有規(guī)定的可以刪除
    box.removeAttribute("aaa"); // 沒(méi)有規(guī)定的也可以刪除

兼容方法

innerText兼容寫(xiě)法

獲取文本

function getInnerText(element) {
        // 能力檢測(cè) 判斷是否有這一屬性
    if (typeof element.innerText === "string") {
        return element.innerText;
    } else {
        return element.textContent;
    }
}

設(shè)置文本

function setInnerText(element, content) {
        // 能力檢測(cè) 判斷是否有這一屬性
    if (typeof element.innerText === "string") {
        element.innerText = content;
    } else {
        element.textContent = content;
    }
}

獲取上一個(gè)&下一個(gè)兄弟元素的兼容寫(xiě)法

獲取下一個(gè)兄弟元素兼容寫(xiě)法

// 獲取下一個(gè)兄弟元素
function getNextElement(element){
    if(element.nextElementSibling){
        //能找到nextElementSibling這個(gè)屬性 就可以直接使用
        return element.nextElementSibling;
    }else{
        var next = element.nextSibling;// 獲取下一個(gè)兄弟節(jié)點(diǎn)
        // 如果next就是想要的下一個(gè)兄弟元素 就直接返回 如果不是 就一直找
        while(next&&next.nodeType !==1){//next找到了而且不是想要的元素節(jié)點(diǎn)就繼續(xù)找
            next = next.nextSibling;
        }
        return next;
    }
}

獲取上一個(gè)兄弟元素兼容寫(xiě)法

// 獲取上一個(gè)兄弟元素
function getPreviousElement(element){
    if(element.previousElementSibling){
        return element.previousElementSibling;
    }else{
        var previous = element.previousSibling;
        while(previous&&previous.nodeType !== 1){
            previous = element.previousSibling;
        }
        return previous;
    }
}

獲取第一個(gè)子元素&最后一個(gè)子元素的兼容寫(xiě)法

獲取第一個(gè)子元素兼容寫(xiě)法

// 獲取element的第一個(gè)子元素
function getFirstElement(element){
    // 判斷是否支持這一寫(xiě)法
    if(element.firstElementChild){
        return element.firstElementChild;
    }else{
        // 先找到第一個(gè)節(jié)點(diǎn)
        var first = element.firstChild;
        // 如果這個(gè)節(jié)點(diǎn)存在而且這個(gè)節(jié)點(diǎn)不是元素節(jié)點(diǎn)
        while(first&&first.nodeType !== 1){
            // 從這個(gè)節(jié)點(diǎn)向后繼續(xù)找下一個(gè)兄弟節(jié)點(diǎn)
            first = first.nextSibling;
        }
        return first;
    }
}

獲取最后一個(gè)子元素兼容寫(xiě)法

// 獲取element的最后一個(gè)子元素
function getLastElement(element){
    // 判斷是否支持這一寫(xiě)法
    if(element.lastElementChild){
        return element.lastElementChild;
    }else{
        // 先找到最后一個(gè)個(gè)節(jié)點(diǎn)
        var last = element.lastChild;
        // 如果這個(gè)節(jié)點(diǎn)存在而且這個(gè)節(jié)點(diǎn)不是元素節(jié)點(diǎn)
        while(last&&last.nodeType !== 1){
            // 從這個(gè)節(jié)點(diǎn)向前繼續(xù)找上一個(gè)兄弟節(jié)點(diǎn)
            last = last.previousSibling;
        }
        return last;
    }
}

通過(guò)類(lèi)名獲取元素對(duì)象的兼容方法

// 通過(guò)類(lèi)名獲取元素對(duì)象的兼容方法
function getElementByClassName(element,className){
    if(element.getElementByClassName){// 可以使用這個(gè)屬性
        return element.getElementByClassName("className");
    }else{
        // 先找到element里面所有的標(biāo)簽 然后判斷是否有需要的類(lèi)名
        // 如果有 就把這些標(biāo)簽放到一個(gè)集合中 最后返回這個(gè)集合
        var elements = element.getElementByTagName("*"); // 通配符找到所有標(biāo)簽
        var filterArr = [];
        for(var i = 0;i<elements.length;i++){
            if(elements[i].className.indexOf(className)!== -1){
                filter.push(elements[i]);
            } 
        }
        return filterArr;
    }
}

事件

var box = document.getElementById("box");

box.onclick = function(){
    // 鼠標(biāo)單擊事件
}

box.dblclick = function(){
    // 鼠標(biāo)雙擊事件
}

box.onmouseover = function(){
    // 鼠標(biāo)移入事件
}

box.onmouseout = function(){
    // 鼠標(biāo)移出事件
}

box.onfocus = function(){
    // 聚焦事件
}

box.onblur = function(){
    // 失去焦點(diǎn)事件
}

box.onkeyup = function(){
    // 按鍵彈起事件
}

box.onkeydown = function(){
    // 按鍵按下事件
}
14785485614694.jpg
最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
平臺(tái)聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡(jiǎn)書(shū)系信息發(fā)布平臺(tái)，僅提供信息存儲(chǔ)服務(wù)。

推薦閱讀更多精彩內(nèi)容

  • 第十天 03-對(duì)象模型-第04天{創(chuàng)建結(jié)構(gòu)} 第十天節(jié)點(diǎn)操作克隆節(jié)點(diǎn) - cloneNode()添加節(jié)點(diǎn) - ap...
    believedream閱讀 457評(píng)論 0贊 0
  • 通過(guò)id查找HTML 元素var element = document.getElementById('ID') ...
    相關(guān)函數(shù)閱讀 241評(píng)論 0贊 0
  • 1.HTML DOM （文檔對(duì)象模型） 當(dāng)網(wǎng)頁(yè)被加載時(shí)，瀏覽器會(huì)創(chuàng)建頁(yè)面的文檔對(duì)象模型（Document Obje...
    ancientear閱讀 427評(píng)論 0贊 2
  • 也許是從懷孕的那一刻起，就注定了我現(xiàn)在的生活狀態(tài)及方式，一種及其無(wú)奈的非飽滿(mǎn)狀態(tài)…… 我的女兒九個(gè)月了，非常可愛(ài)，...
    自我修行閱讀 203評(píng)論 0贊 1
  • 好好說(shuō)話 2016年6月22日【溝通】如何拒絕別人借錢(qián)-不傷和氣不傷錢(qián)的回絕之道（馬薇薇） 音頻知識(shí)點(diǎn) 別人找你借...
    簡(jiǎn)文堂閱讀 1,735評(píng)論 0贊 0