DOM 文檔對象模型
? ? ? ? Document Object Model
? ? ? ? 文檔對象模型是w3c組織推薦的處理可擴展標志的標準編程接口
? ? ? ? 分類
? ? ? ? ? ? ? ? 1. HTMLDom 針對HTML文檔的標準模型
? ? ? ? ? ? ? ? 2. XMLDOM 針對XML文檔的標準模型
? ? ? ? 語句要求更加嚴密? （數據傳輸 跨平臺）? Xhtml->html5
節點
? ? ? ? 文檔中的每一部分都是節點包括document元素 屬性 文本 注釋 等等
核心Dom 針對任何結構化文檔的標準模型
? ? ? ? documentNode? ElementNode,? TextNode? AttributeNode
1、元素節點 Node.ELEMENT_NODE(1)
2、屬性節點 Node.ATTRIBUTE_NODE(2)
3、文本節點 Node.TEXT_NODE(3)
4、CDATA節點 Node.CDATASECTIONNODE(4)
5、實體引用名稱節點 Node.ENTRYREFERENCENODE(5)
6、實體名稱節點 Node.ENTITY_NODE(6)
7、處理指令節點 Node.PROCESSINGINSTRUCTIONNODE(7)
8、注釋節點 Node.COMMENT_NODE(8)
9、文檔節點 Node.DOCUMENT_NODE(9)
10、文檔類型節點 Node.DOCUMENTTYPENODE(10)
11、文檔片段節點 Node.DOCUMENTFRAGMENTNODE(11)
12、DTD聲明節點 Node.NOTATION_NODE(12)
HTMLDOM節點
1、document HTMLdocument文檔
2、element 元素
3、attr 屬性
4、CharacterData -- text 文本
? ? ? ? -- comment 注釋
節點屬性
1、nodeName 節點名字
2、nodeValue 節點值
3、nodeType 節點類型
獲取文檔元素方法
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 獲取所有元素的集合
文檔結構
? ? 節點的關系
? ? ? ? --父節點
? ? ? ? --子節點
? ? ? ? --兄弟節點
? ? ? ?--祖先節點
? ? ? ?--后代節點
? ? 節點樹
? ? ? ? childNodes 所有的子節點? length
? ? ? ? firstChild 第一個子節點
? ? ? ? lastChild? 最后一個子節點
? ? ? ? previousSibling? 上一個兄弟節點
? ? ? ? nextSibling? ? ? 下一個兄弟節點
? ? ? ? ?parentNode 父節點? --只有element可以作為父節點(除了document頂級節點)
? ? ? ? var html = document.documentElement;
? ? 元素樹
? ? ? ? children? ? ? ? 所有子元素集合
? ? ? ? firstElementChild? 第一個子元素? ? ? IE9+
? ? ? ? lastElementChild? ? 最后一個子元素? ? IE9+
? ? ? ? previousElementSibling? 上一個兄弟元素? IE9+
? ? ? ? nextElementSibling? 下一個兄弟元素? ? IE9+
? ? ? ? parentElement? 父元素? --只有element可以作為父元素
? ? ? ? childElementCount? 子元素的數量? ? ? IE9+
? ? ? ? ownerDocument? ? ? 返回元素所屬的文檔對象
實例： 通過table中最后一td中的按鈕獲取第一個中的數值
屬性
1、標準屬性
? ? ? ? ?DOM元素映射HTML的屬性(屬性伴隨元素存在)
2、非標準屬性 (自定義屬性)
? ? ? ? ?getAttribute(attr) --獲取自定義或內置屬性的值(屬性需要存在)
? ? ? ? setAttribute(attr,value)? --設置自定義或內置屬性
? ? ? ? hasAttribute()? ? ? ? --判斷屬性是否存在(自定義或內置)
? ? ? ? removeAttribute()? ? --刪除自定義或內置屬性
3、屬性節點
? ? ? ? getAttributeNode(attr)? ? ? ? --獲取屬性節點
? ? ? ? setAttributeNode(s)? ? ? ? ? ? --設置屬性節點
? ? ? ? 創建屬性
? ? ? ? ? ? ? ? var s = document.createAttribute(attrname);
? ? ? ? 設置節點值：s.nodeValue=’attrvalue’;
? ? ? ? 設置屬性節點 box.setAttributeNode(s);
實例： 圖片的延遲加載
HMLT5 data-*屬性的使用
? ? ? ? 使用 data-* 屬性來嵌入自定義數據--IE10以上
console.log(this.dataset);
