成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專(zhuān)欄INFORMATION COLUMN

javaScript DOM的樣式和屬性

HelKyle / 2756人閱讀

摘要：用對(duì)象的方式來(lái)描述元素，規(guī)范包含了節(jié)點(diǎn)操作節(jié)點(diǎn)遍歷前一個(gè)兄弟節(jié)點(diǎn)后一個(gè)兄弟節(jié)點(diǎn)節(jié)點(diǎn)類(lèi)型元素節(jié)點(diǎn)文本節(jié)點(diǎn)元素節(jié)點(diǎn)遍歷無(wú)法遍歷到文本節(jié)點(diǎn)獲取節(jié)點(diǎn)獲取的節(jié)點(diǎn)是動(dòng)態(tài)的，會(huì)實(shí)時(shí)改變不支持寫(xiě)一個(gè)兼容函數(shù)獲取的是靜態(tài)的，節(jié)點(diǎn)改變時(shí)它無(wú)法改變修改節(jié)點(diǎn)不支持

DOM 
Document Object Model 用對(duì)象的方式來(lái)描述html元素， API規(guī)范 包含了DOM Core DOM HTML DOM
Style Dom Event
節(jié)點(diǎn)操作

節(jié)點(diǎn)遍歷

.parentNode
.firstChild
.lastChild
.previousSibling //前一個(gè)兄弟節(jié)點(diǎn)
.nextSibling //后一個(gè)兄弟節(jié)點(diǎn)

節(jié)點(diǎn)類(lèi)型

ELEMENT_NODE //元素節(jié)點(diǎn)
TEXT_NODE //文本節(jié)點(diǎn)

元素節(jié)點(diǎn)遍歷

p.firstElementChild // 無(wú)法遍歷到文本節(jié)點(diǎn)
 .lastElementChild
 .nextElementSibling 
 .previousElementSibling

獲取節(jié)點(diǎn)

getElementById()
getElementsByTagName()
//獲取的節(jié)點(diǎn)是動(dòng)態(tài)的，會(huì)實(shí)時(shí)改變
getElementsByClassName()
    // IE678 不支持  寫(xiě)一個(gè)兼容函數(shù)
    function getElementsByClassName(root, className){
        if(root.getElementsByClassName){
            return root.getElementsByClassName(className);
        }else{
            var elements = document.getElementsByTagName("*");
            var result = [];
            for(var i = 0, element; element = elements[i]; i++){
                if(hasClassName(element, className)){
                    result.push(element)
                }
            }
            return result;
        }
    }

querySelector/All()
獲取的list是靜態(tài)的，節(jié)點(diǎn)改變時(shí)它無(wú)法改變

修改節(jié)點(diǎn)

textContent
    user.textContent = "kash"; // IE9不支持

innerText
  // firefox不支持

創(chuàng)建節(jié)點(diǎn)

創(chuàng)建Element節(jié)點(diǎn)
    document.createElement()
創(chuàng)建Text節(jié)點(diǎn)
    document.createTextNode()

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

appendChild()
insertBefore()
    ul.insertBefore(li, ul.firstBefore);

刪除節(jié)點(diǎn)

n.parentNode.removeChild(n);

替換節(jié)點(diǎn)

n.parentNode.replaceChild(target, n);

innerHTML

內(nèi)存泄露
安全問(wèn)題

總結(jié)

屬性操作 
每個(gè)html屬性對(duì)應(yīng)DOM屬性

property accessor 屬性訪問(wèn)器

//讀取屬性


    
    


input.className(); //u-text
input["id"] //username

//寫(xiě)入屬性
input.value = "www.XXX.com";
input.disabled = true;
//通用性差，擴(kuò)張性差，好處:取到的都是實(shí)用對(duì)象

getAttribute/setAttribute

var attribute = element.getAttribute(attributeName);


    
    


input.getAttribute("class"); //"u-text";
input.setAttribute("value", "wwww.xxx.com");
input.setAttribute("disabled","")//默認(rèn)為true
//如果屬性出現(xiàn)Boolean,那肯定是true
// 獲取到的僅字符串，通用性好
樣式操作

更新樣式

 1.一種是直接操作
    element.style.color = "red";
        更新一個(gè)屬性需喲一跳語(yǔ)句
        不是我們熟悉的css
    element.style.cssText = "color:red";
        樣式混在邏輯中

2.另一種更新class
    element.className += "";
    一次性更新很多的樣式(類(lèi)似于換膚)
        更換樣式表:把需要更換的樣式分離 
        element.href = ".css"

獲取樣式

element.style.color //只能獲取到內(nèi)嵌樣式
window.getComputedStyle(element).color //IE9不支持

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/81220.html

相關(guān)文章

  • JavaScript 是如何工作: Shadow DOM 的內(nèi)部結(jié)構(gòu)+如何編寫(xiě)?yīng)毩?em>的組件！

    摘要：向影子樹(shù)添加的任何內(nèi)容都將成為宿主元素的本地元素，包括，這就是影子實(shí)現(xiàn)樣式作用域的方式。 這是專(zhuān)門(mén)探索 JavaScript 及其所構(gòu)建的組件的系列文章的第 17 篇。 想閱讀更多優(yōu)質(zhì)文章請(qǐng)猛戳GitHub博客,一年百來(lái)篇優(yōu)質(zhì)文章等著你！ 如果你錯(cuò)過(guò)了前面的章節(jié)，可以在這里找到它們： JavaScript 是如何工作的：引擎，運(yùn)行時(shí)和調(diào)用堆棧的概述！ JavaScript 是如何工作...

    godlong_X 評(píng)論0 收藏0

  • JavaScript DOM

    摘要：但上述兩個(gè)情況中都是同一份文檔。提示對(duì)象是對(duì)象的一部分，可通過(guò)屬性對(duì)其進(jìn)行訪問(wèn)。返回包含指定節(jié)點(diǎn)的子節(jié)點(diǎn)的集合，該集合為即時(shí)更新的集合。對(duì)象在中，對(duì)象表示元素屬性節(jié)點(diǎn)的無(wú)序集合。 DOM簡(jiǎn)介（ Document Object Model 文檔對(duì)象模型） W3C W3C 文檔對(duì)象模型 （DOM） 是中立于平臺(tái)和語(yǔ)言的接口，它允許程序和腳本動(dòng)態(tài)地訪問(wèn)和更新文檔的內(nèi)容、結(jié)構(gòu)和樣式。W3C D...

    Nekron 評(píng)論0 收藏0

  • JavaScript 編程精解 中文第三版 十四、文檔對(duì)象模型

    摘要：在其沙箱中提供了將文本轉(zhuǎn)換成文檔對(duì)象模型的功能。瀏覽器使用與該形狀對(duì)應(yīng)的數(shù)據(jù)結(jié)構(gòu)來(lái)表示文檔。我們將這種表示方式稱為文檔對(duì)象模型，或簡(jiǎn)稱。樹(shù)回想一下第章中提到的語(yǔ)法樹(shù)。語(yǔ)言的語(yǔ)法樹(shù)有標(biāo)識(shí)符值和應(yīng)用節(jié)點(diǎn)。元素表示標(biāo)簽的節(jié)點(diǎn)用于確定文檔結(jié)構(gòu)。 來(lái)源：ApacheCN『JavaScript 編程精解 中文第三版』翻譯項(xiàng)目原文：The Document Object Model 譯者：飛龍 協(xié)議...

    gggggggbong 評(píng)論0 收藏0

  • DOM操作成本到底高在哪兒？

    摘要：刨根問(wèn)底，這里說(shuō)的成本，到底高在哪兒呢什么是文檔對(duì)象模型什么是可能很多人第一反應(yīng)就是等標(biāo)簽至少我是，但要知道，是，是，對(duì)象模型，是為提供的。操作具體的成本，說(shuō)到底是造成瀏覽器回流和重繪，從而消耗資源。 從我接觸前端到現(xiàn)在，一直聽(tīng)到的一句話：操作DOM的成本很高，不要輕易去操作DOM。尤其是React、vue等MV*框架的出現(xiàn)，數(shù)據(jù)驅(qū)動(dòng)視圖的模式越發(fā)深入人心，jQuery時(shí)代提供的強(qiáng)大便...

    yuxue 評(píng)論0 收藏0

  • DOM操作成本到底高在哪兒？

    摘要：刨根問(wèn)底，這里說(shuō)的成本，到底高在哪兒呢什么是文檔對(duì)象模型什么是可能很多人第一反應(yīng)就是等標(biāo)簽至少我是，但要知道，是，是，對(duì)象模型，是為提供的。操作具體的成本，說(shuō)到底是造成瀏覽器回流和重繪，從而消耗資源。 從我接觸前端到現(xiàn)在，一直聽(tīng)到的一句話：操作DOM的成本很高，不要輕易去操作DOM。尤其是React、vue等MV*框架的出現(xiàn)，數(shù)據(jù)驅(qū)動(dòng)視圖的模式越發(fā)深入人心，jQuery時(shí)代提供的強(qiáng)大便...

    MASAILA 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<