DOM 的简介 和一些方法

 

  DOM 是 Document Object Model（文档对象模型）的缩写。

 

 

您能够以不同的方式来访问 HTML 元素：

• 通过使用 getElementById() 方法 —获取的确定的对象
• 通过使用 getElementsByTagName() 方法－获取是一个数组
• 通过使用 getElementsByClassName() 方法－获取是一个数组
• 这段代码创建了一个新的 <p> 元素：－－appendChild() 方法，将新元素作为父元素的最后一个子元素进行添加。
• var para=document.createElement("p");
• 如需向 <p> 元素添加文本，您首先必须创建文本节点。这段代码创建文本节点：
• var node=document.createTextNode("This is a new paragraph.");
• 然后您必须向 <p> 元素追加文本节点：
• para.appendChild(node);
• 最后，您必须向已有元素追加这个新元素。
• 这段代码查找到一个已有的元素：
• var element=document.getElementById("div1");
• 这段代码向这个已存在的元素追加新元素：
• element.appendChild(para);
• 添加到地div1里面在p1前面添加
• var element=document.getElementById("div1");
• var child=document.getElementById("p1");
• element.insertBefore(para,child);

     

       在div1里面删除p1

    var parent=document.getElementById("div1");

      var child=document.getElementById("p1");

          parent.removeChild(child);  

 

 

这里提供一个常用的解决方法：找到您需要删除的子元素，然后使用 parentNode 属性来查找其父元素：

var child=document.getElementById("p1");

child.parentNode.removeChild(child);

 

 

方法	描述
getElementById()	返回带有指定 ID 的元素。
getElementsByTagName()	返回包含带有指定标签名称的所有元素的节点列表（集合/节点数组）。
getElementsByClassName()	返回包含带有指定类名的所有元素的节点列表。
appendChild()	把新的子节点添加到指定节点。
removeChild()	删除子节点。
replaceChild()	替换子节点。
insertBefore()	在指定的子节点前面插入新的子节点。
createAttribute()	创建属性节点。
createElement()	创建元素节点。
createTextNode()	创建文本节点。
getAttribute()	返回指定的属性值。
setAttribute()	把指定属性设置或修改为指定的值。

 

onclick         鼠标单击

ondblclick       鼠标双击

onkeyup        按下并释放键盘上的一个键时触发 

onchange  文本内容或下拉菜单中的选项发生改变

onfocus     获得焦点，表示文本框等获得鼠标光标

onblur    失去焦点，表示文本框等失去鼠标光标。         onmouseover 鼠标悬停，即鼠标停留在图片等的上方

onmouseout 鼠标移出，即离开图片等所在的区域

onload                网页文档加载事件

onunload             关闭网页时

onsubmit             表单提交事件

onreset               重置表单时