HTML DOM的基本知识

HTML DOM　基本知识总结

1.HTML DOM 访问

• 通过使用 getElementById() 方法   语法：node.getElementById("id");
• 通过使用 getElementsByTagName() 方法   语法:node.getElementsByTagName("tagname");
• 通过使用 getElementsByClassName() 方法 语法:document.getElementsByClassName("className");

2.HTML DOM 属性

     a.innerHTML 属性

 获取元素内容的最简单方法是使用 innerHTML 属性。 innerHTML 属性对于获取或替换 HTML 元素的内容很有用。

   b.nodeName 属性

nodeName 属性规定节点的名称。nodeName 是只读的, 元素节点的 nodeName 与标签名相同, 属性节点的 nodeName 与属性名相同, 文本节点的 nodeName 始终是 #text, 文档节点的 nodeName 始终是 #document。

    c.nodeValue 属性
nodeValue 属性规定节点的值。元素节点的 nodeValue 是 undefined 或 null,文本节点的 nodeValue 是文本本身,属性节点的 nodeValue 是属性值。

    d.nodeType 属性
nodeType 属性返回节点的类型。nodeType 是只读的。

3.HTML DOM 方法

一些常用的 HTML DOM 方法：

• • getElementById(id) - 获取带有指定 id 的节点（元素）
  • appendChild(node) - 插入新的子节点（元素）
  • removeChild(node) - 删除子节点（元素）

一些常用的 HTML DOM 属性：

• • innerHTML - 节点（元素）的文本值
  • parentNode - 节点（元素）的父节点
  • childNodes - 节点（元素）的子节点
  • attributes - 节点（元素）的属性节点

一些 DOM 对象方法 

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

4.HTML DOM 修改

document.getElementById("id").innerHTML="New text!";

document.getElementById("id").style.color="blue";

document.getElementById("id").style.fontFamily="Arial";

document.getElementById("id").style.fontSize="larger";

document.body.style.backgroundColor='black'

5.HTML DOM 导航

x=document.getElementsByTagName("tagName");

for (i=0;i<x.length;i++)

{

document.write(x[i].innerHTML);

document.write("<br />");

}