DOM 文檔對象模型
? ? ? ? Document Object Model
? ? ? ? 文檔對象模型是w3c組織推薦的處理可擴展標志的標準編程接口
? ? ? ? 分類
? ? ? ? ? ? ? ? 1. HTMLDom 針對HTML文檔的標準模型
? ? ? ? ? ? ? ? 2. XMLDOM 針對XML文檔的標準模型
? ? ? ? 語句要求更加嚴密? （數(shù)據(jù)傳輸 跨平臺）? Xhtml->html5
節(jié)點
? ? ? ? 文檔中的每一部分都是節(jié)點包括document元素 屬性 文本 注釋 等等
核心Dom 針對任何結(jié)構(gòu)化文檔的標準模型
? ? ? ? documentNode? ElementNode,? TextNode? AttributeNode
1鳞绕、元素節(jié)點 Node.ELEMENT_NODE(1)
2冤竹、屬性節(jié)點 Node.ATTRIBUTE_NODE(2)
3廊鸥、文本節(jié)點 Node.TEXT_NODE(3)
4、CDATA節(jié)點 Node.CDATASECTIONNODE(4)
5拙寡、實體引用名稱節(jié)點 Node.ENTRYREFERENCENODE(5)
6授滓、實體名稱節(jié)點 Node.ENTITY_NODE(6)
7、處理指令節(jié)點 Node.PROCESSINGINSTRUCTIONNODE(7)
8肆糕、注釋節(jié)點 Node.COMMENT_NODE(8)
9般堆、文檔節(jié)點 Node.DOCUMENT_NODE(9)
10、文檔類型節(jié)點 Node.DOCUMENTTYPENODE(10)
11诚啃、文檔片段節(jié)點 Node.DOCUMENTFRAGMENTNODE(11)
12淮摔、DTD聲明節(jié)點 Node.NOTATION_NODE(12)
HTMLDOM節(jié)點
1、document HTMLdocument文檔
2始赎、element 元素
3和橙、attr 屬性
4、CharacterData -- text 文本
? ? ? ? -- comment 注釋
節(jié)點屬性
1造垛、nodeName 節(jié)點名字
2魔招、nodeValue 節(jié)點值
3、nodeType 節(jié)點類型
獲取文檔元素方法
1筋搏、通過ID選取元素 document.getElementById();
? ? ? ? ?id屬性可自動生成被腳本訪問的全局變量 不推薦使用 --可讀性 保留字
2仆百、通過名字選取元素document.getElementsByName
? ? ? ? IE9以上和標準瀏覽器認為所有元素都有name
? ? ? ? IE9 以下認為只有個別元素有name 表單 img form
? ? ? ? document.elementname -->(form img iframe); --兼容
3、通過標簽名選擇器
? ? ? ? document.getElementsByTagName();
? ? ? ? element.getElementsByTagName();
4奔脐、通過css類選擇器元素
? ? ? ? document.getElementsByClassName() --IE9以下不兼容
5俄周、通過css選擇器選擇元素
? ? ? ? document.querySelector() 獲取元素
? ? ? ? element.querySelector()
? ? ? ? document.querySelectorAll() 獲取集合
? ? ? ? element.querySelectorAll()
6、document.all 獲取所有元素的集合
文檔結(jié)構(gòu)
? ? 節(jié)點的關(guān)系
? ? ? ? --父節(jié)點
? ? ? ? --子節(jié)點
? ? ? ? --兄弟節(jié)點
? ? ? ?--祖先節(jié)點
? ? ? ?--后代節(jié)點
? ? 節(jié)點樹
? ? ? ? childNodes 所有的子節(jié)點? length
? ? ? ? firstChild 第一個子節(jié)點
? ? ? ? lastChild? 最后一個子節(jié)點
? ? ? ? previousSibling? 上一個兄弟節(jié)點
? ? ? ? nextSibling? ? ? 下一個兄弟節(jié)點
? ? ? ? ?parentNode 父節(jié)點? --只有element可以作為父節(jié)點(除了document頂級節(jié)點)
? ? ? ? var html = document.documentElement;
? ? 元素樹
? ? ? ? children? ? ? ? 所有子元素集合
? ? ? ? firstElementChild? 第一個子元素? ? ? IE9+
? ? ? ? lastElementChild? ? 最后一個子元素? ? IE9+
? ? ? ? previousElementSibling? 上一個兄弟元素? IE9+
? ? ? ? nextElementSibling? 下一個兄弟元素? ? IE9+
? ? ? ? parentElement? 父元素? --只有element可以作為父元素
? ? ? ? childElementCount? 子元素的數(shù)量? ? ? IE9+
? ? ? ? ownerDocument? ? ? 返回元素所屬的文檔對象
實例： 通過table中最后一td中的按鈕獲取第一個中的數(shù)值
屬性
1髓迎、標準屬性
? ? ? ? ?DOM元素映射HTML的屬性(屬性伴隨元素存在)
2峦朗、非標準屬性 (自定義屬性)
? ? ? ? ?getAttribute(attr) --獲取自定義或內(nèi)置屬性的值(屬性需要存在)
? ? ? ? setAttribute(attr,value)? --設(shè)置自定義或內(nèi)置屬性
? ? ? ? hasAttribute()? ? ? ? --判斷屬性是否存在(自定義或內(nèi)置)
? ? ? ? removeAttribute()? ? --刪除自定義或內(nèi)置屬性
3、屬性節(jié)點
? ? ? ? getAttributeNode(attr)? ? ? ? --獲取屬性節(jié)點
? ? ? ? setAttributeNode(s)? ? ? ? ? ? --設(shè)置屬性節(jié)點
? ? ? ? 創(chuàng)建屬性
? ? ? ? ? ? ? ? var s = document.createAttribute(attrname);
? ? ? ? 設(shè)置節(jié)點值：s.nodeValue=’attrvalue’;
? ? ? ? 設(shè)置屬性節(jié)點 box.setAttributeNode(s);
實例： 圖片的延遲加載
HMLT5 data-*屬性的使用
? ? ? ? 使用 data-* 屬性來嵌入自定義數(shù)據(jù)--IE10以上
console.log(this.dataset);
