国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

javaScript DOM的樣式和屬性

HelKyle / 2743人閱讀

摘要：用對象的方式來描述元素，規(guī)范包含了節(jié)點操作節(jié)點遍歷前一個兄弟節(jié)點后一個兄弟節(jié)點節(jié)點類型元素節(jié)點文本節(jié)點元素節(jié)點遍歷無法遍歷到文本節(jié)點獲取節(jié)點獲取的節(jié)點是動態(tài)的，會實時改變不支持寫一個兼容函數(shù)獲取的是靜態(tài)的，節(jié)點改變時它無法改變修改節(jié)點不支持

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

節(jié)點遍歷

.parentNode
.firstChild
.lastChild
.previousSibling //前一個兄弟節(jié)點
.nextSibling //后一個兄弟節(jié)點

節(jié)點類型

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

元素節(jié)點遍歷

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

獲取節(jié)點

getElementById()
getElementsByTagName()
//獲取的節(jié)點是動態(tài)的，會實時改變
getElementsByClassName()
    // IE678 不支持  寫一個兼容函數(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é)點改變時它無法改變

修改節(jié)點

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

innerText
  // firefox不支持

創(chuàng)建節(jié)點

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

插入節(jié)點

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

刪除節(jié)點

n.parentNode.removeChild(n);

替換節(jié)點

n.parentNode.replaceChild(target, n);

innerHTML

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

總結(jié)

屬性操作 
每個html屬性對應(yīng)DOM屬性

property accessor 屬性訪問器

//讀取屬性


    
    


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

//寫入屬性
input.value = "www.XXX.com";
input.disabled = true;
//通用性差，擴張性差，好處:取到的都是實用對象

getAttribute/setAttribute

var attribute = element.getAttribute(attributeName);


    
    


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

更新樣式

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

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

獲取樣式

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

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

轉(zhuǎn)載請注明本文地址：http://specialneedsforspecialkids.com/yun/81220.html

相關(guān)文章

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

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

    godlong_X 評論0 收藏0

  • JavaScript DOM

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

    Nekron 評論0 收藏0

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

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

    gggggggbong 評論0 收藏0

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

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

    yuxue 評論0 收藏0

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

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

    MASAILA 評論0 收藏0

發(fā)表評論

0條評論

HelKyle

男|高級講師

TA的文章

閱讀更多
最新活動
閱讀需要支付1元查看
<