DOM

dom定義了表示和修改文檔所需的方法。dom對象即為數(shù)組對象,由瀏覽器廠商定義,用來操作html和xml功能的一類對象的集合。也有人稱dom是對html以及xml的標準編程接口。

DOM基本操作

1.對節(jié)點的增刪改查

?A.查
??1.查看元素節(jié)點
            document代表整個文檔。
            document.getElementById()   元素id在le8以下的瀏覽器,不區(qū)分id大小寫,而且也返回匹配name屬性的元素。
            .getElementsByTagName()     標簽名。
            getElementsByName()         需注意,只有一部分標簽name可生效(表單,表單元素,img,iframe)。
            .getElementsByClassName()   類名->ie8和ie8以下的ie版本中沒有,可以多個class一起。
            .querySelector()            css選擇器 在ie7和ie7以下的版本中沒有。
            .querySelectorAll()           css選擇器 在ie7和ie7以下的版本中沒有。
            get...查找的東西是實時的 querySelectorAll查找的東西是靜態(tài)的。
??2.遍歷節(jié)點樹:(不管什么類型的節(jié)點都能遍歷)
            parentNode->父節(jié)點(最頂端的parentNode為#document)
            childNodes->子節(jié)點們
            firstChild->第一個子節(jié)點
            lastChild->最后一個子節(jié)點
            nextSibling->后一個兄弟節(jié)點
            previousSilbing->前一個兄弟節(jié)點
??3.基于元素節(jié)點樹的遍歷:
            parentElement->返回當前元素的父元素節(jié)點(ie不兼容)
            children->只返回當前元素的元素子節(jié)點
            node.childElementCount === node.children.length->當前元素節(jié)點的子元素節(jié)點個數(shù)(ie不兼容)
            firstElementChild->返回的是第一個元素節(jié)點(ie不兼容)
            lastElementChild->返回的是最后一個元素節(jié)點(ie不兼容)
            nextElementSibling/previousElementSilbing->返回最后一個/前一個兄弟元素節(jié)點(ie不兼容)
??4.節(jié)點的四個屬性
            nodeName->元素的標簽名,以大寫的形式表示,只讀
            nodeValue->Text節(jié)點或Comment節(jié)點的文本內容,可讀寫
            nodeType->該節(jié)點的類型,只讀 [IMPORTANT!!!!!!!!!] 任何元素都有的一個屬性
            attributes->Element節(jié)點的屬性合集
??5.節(jié)點的一個方法 Node.hasChildNodes();
??6.dom結構樹
            dom結構樹代表一系列的繼承關系(就近繼承)
            原型鏈:document -->(繼承自) HTMLDocument.prototype --> Document.prototype
            HTMLDocument.prototype(對象) --> Document,prototype
                HTMLDocument.prototype = {_proto_:Document,prototype;}
            Document分為 HTMLDocument 和 XMLDocument

2.DOM的基本操作

1.getElementById方法定義在Document.prototype上,即Element節(jié)點上不能使用。
2.getElementsByName方法定義在HTMLDocument,prototype上,即非html中的document不能使用(xmldocument,Element)。
3.getElementsByTagName方法定義在Document.prototype和Element.prototype上。
4.HTMLDocument.prototype定義了一些常用的屬性,body head分別指代HTML文檔中的<body><head>標簽
      直接有   已經定義好的   可以直接用   document.body     document.head
5.Document.prototype上定義了documentElement屬性,指代文檔的根元素,在XML文檔中,他總指代<html>元素。
      document.documentElement代表html
6.getElementsByClassName、querySelectorAll、quertSelector在Document.prototype,Element.prototype類中均有定義。

?著作權歸作者所有,轉載或內容合作請聯(lián)系作者
【社區(qū)內容提示】社區(qū)部分內容疑似由AI輔助生成,瀏覽時請結合常識與多方信息審慎甄別。
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發(fā)布,文章內容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務。

相關閱讀更多精彩內容

友情鏈接更多精彩內容