js里的document对象大全（DOM操作）

什么是DOM

document object model 的简称，意思为文档对象模型。主要用来对文档中的html节点进行操作。

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');//获取节点 var div = document.createElement('div');//创建div    var file = document.createElement('input');//创建input
    file.setAttribute('type','file');//设置input的类型为file    var btn = document.createElement('input');//创建input
    btn.setAttribute('type','button');//设置input的类型为button
    btn.setAttribute('value','删除');//设置input的value为删除
    btn.setAttribute('onclick','del(this)');//设置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;设置或返回当前文档有关的所有cookie       

    document.title;返回当前文档的标题

    document.domain；返回当前文档的域名

    document.URL;返回当前文档的URL

 

   元素属性及方法

    getElementById('');                 返回指定 Id 的第一个对象。

    getElementsByName('');        返回指定 name名称的对象集合（下标数组）。  getElementsByName('')[0];获取对象集合的第一个对象。

 getElementsByTagName('');返回指定标签名的对象集合（下标数组）。  getElementsByTagName('')[0];获取对象集合的第一个对象。

 .length();             返回数组长度。

 

     .getAttributeNode();返回指定属性的节点       

   .getAttribute('');返回元素节点的指定属性值

   .createAttribute('');创造属性

   .createElement_x('');创造元素

   .setAttribute();把指定属性设置或更改为指定值

   .setAttributeNode();设置或更改指定属性的节点

 

   .removeChild();从元素中移除子节点

   .removeAttributeNode();移除指定的属性节点，并返回被移除的节点

    .removeAttribute();从元素中移除指定属性

   .replaceChild();替换元素中的子节点

    .insertBefore();在指定的已有的子节点之前插入新节点

    .appendChild(); 向元素添加新的子节点，作为最后一个子节点

 

     .hasAttribute();如果元素拥有指定属性,则返回true否则返回false

          .hasChildNodes();如果元素拥有子节点,则返回true,否则false

         .isEqualNode();   检查两个元素是否相等

         .isDefaultNamespace();指定的namespaceURI是默认的,则返回true,否则返回false

 

          .className     class属性

          .id   id属性

          .tagName  标签名

          .style   样式属性

          .nodeName   元素名称

          .nodeType   元素类型

         .nodeValue  元素内容

          .namespaceURI  返回元素的namespace URI

          .textContent         设置或返回节点及其后代的文本内容

          .innerHTML          设置覆盖节点的 HTML语句

          .outerHTML          节点内追加的 HTML语句

          .offsetHeight 元素高度

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

          .scrollTop 返回元素上边缘与视图之间的距离。

          .scrollHeight 返回元素的整体高度

         .clientHeight  返回元素的可视高度

 

          .toStrings();转换成字符串