什么是DOM

document object model 的簡稱，意思為文檔對象模型。主要用來對文檔中的html節(jié)點進行操作。

Dom的操作簡單示例：

<div id="t1"><div><input type="file" /> <input type="button" value="刪除" onclick="del(this)"/></div>
</div>
<input type="button" value="增加" onClick="add()"/>
<script>
function add(){var t1 = document.getElementById('t1');//獲取節(jié)點 var div = document.createElement('div');//創(chuàng)建div    var file = document.createElement('input');//創(chuàng)建input
    file.setAttribute('type','file');//設(shè)置input的類型為file    var btn = document.createElement('input');//創(chuàng)建input
    btn.setAttribute('type','button');//設(shè)置input的類型為button
    btn.setAttribute('value','刪除');//設(shè)置input的value為刪除
    btn.setAttribute('onclick','del(this)');//設(shè)置onclick事件
    div.appendChild(file);//把file添加到div中
    div.appendChild(btn);//把btn添加到div中    
    t1.appendChild(div);//把div添加到t1中
} 
function del(_this){var div = _this.parentNode;var t1 = _this.parentNode.parentNode;t1.removeChild(div);
}
</script>

Dom對象的屬性與方法

?返回對象集合：

?????(1).all[];

?????(2).images[];

?????(3).anchors[];

?????(4).forms[];

?????(5).links[];

?

屬性：

????document.cookie;設(shè)置或返回當(dāng)前文檔有關(guān)的所有cookie ??????

? ? document.title;返回當(dāng)前文檔的標(biāo)題

????document.domain；返回當(dāng)前文檔的域名

????document.URL;返回當(dāng)前文檔的URL

?

? ?元素屬性及方法

? ? getElementById('');? ? ? ? ? ? ? ? ?返回指定 Id 的第一個對象。

????getElementsByName('');? ? ? ??返回指定 name名稱的對象集合（下標(biāo)數(shù)組）。 ?getElementsByName('')[0];獲取對象集合的第一個對象。

?getElementsByTagName('');返回指定標(biāo)簽名的對象集合（下標(biāo)數(shù)組）。 ?getElementsByTagName('')[0];獲取對象集合的第一個對象。

?.length();? ? ? ? ? ? ?返回數(shù)組長度。

?

? ? ?.getAttributeNode();返回指定屬性的節(jié)點? ? ? ?

? ?.getAttribute('');返回元素節(jié)點的指定屬性值

? ?.createAttribute('');創(chuàng)造屬性

? ?.createElement_x('');創(chuàng)造元素

? ?.setAttribute();把指定屬性設(shè)置或更改為指定值

? ?.setAttributeNode();設(shè)置或更改指定屬性的節(jié)點

?

? ?.removeChild();從元素中移除子節(jié)點

? ?.removeAttributeNode();移除指定的屬性節(jié)點，并返回被移除的節(jié)點

? ? .removeAttribute();從元素中移除指定屬性

? ?.replaceChild();替換元素中的子節(jié)點

? ? .insertBefore();在指定的已有的子節(jié)點之前插入新節(jié)點

? ? .appendChild(); 向元素添加新的子節(jié)點，作為最后一個子節(jié)點

?

? ? ?.hasAttribute();如果元素?fù)碛兄付▽傩?/span>,則返回true否則返回false

? ? ? ? ? .hasChildNodes();如果元素?fù)碛凶庸?jié)點,則返回true,否則false

? ? ? ? ?.isEqualNode(); ??檢查兩個元素是否相等

? ? ? ? ?.isDefaultNamespace();指定的namespaceURI是默認(rèn)的,則返回true,否則返回false

?

? ? ? ? ? .className ? ? class屬性

? ? ? ? ? .id ??id屬性

? ? ? ? ? .tagName ?標(biāo)簽名

? ? ? ? ? .style ??樣式屬性

? ? ? ? ? .nodeName ??元素名稱

? ? ? ? ? .nodeType ??元素類型

? ? ? ? ?.nodeValue ?元素內(nèi)容

? ? ? ? ? .namespaceURI ?返回元素的namespace URI

? ? ? ? ? .textContent ? ? ? ??設(shè)置或返回節(jié)點及其后代的文本內(nèi)容

? ? ? ? ? .innerHTML ? ? ? ? ?設(shè)置覆蓋節(jié)點的?HTML語句

? ? ? ? ? .outerHTML ? ? ? ? ?節(jié)點內(nèi)追加的?HTML語句

? ? ? ? ? .offsetHeight 元素高度

? ? ? ? ?.offsetTop 返回元素的垂直偏移位置。

? ? ? ? ? .scrollTop 返回元素上邊緣與視圖之間的距離。

? ? ? ? ? .scrollHeight 返回元素的整體高度

? ? ? ? ?.clientHeight ?返回元素的可視高度

?

? ? ? ? ? .toStrings();轉(zhuǎn)換成字符串

轉(zhuǎn)載于:https://www.cnblogs.com/lanchang/p/7309776.html

總結(jié)

以上是生活随笔為你收集整理的js里的document对象大全（DOM操作）的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。