html dom用途,JavaScript中DOM的详细介绍（代码示例）

原标题：JavaScript中DOM的详细介绍(代码示例)

1、DOM:文档对象(document)模型。将整个html页面看作一棵倒挂的树，html就是这棵树根节点， head,body就是这棵树的子节点。DOM模型要求将html中每对标签看作节点对象来操作

2.DOM的作用：

Java 能够改变页面中的所有 HTML 元素

Java 能够改变页面中的所有 HTML 属性

Java 能够改变页面中的所有 CSS 样式

Java 能够对页面中的所有事件做出反应

3.DOM查找页面中的元素节点对象：

3.1：通过id查找页面中一个元素节点对象

eg:

varob1=document.getElementById("d1");

//将节点对象中内容输出

alert(ob1.innerHTML);

3.2:通过标签名查找页面中元素节点集合或数组

eg:

vararr1=document.getElementsByTagName("h2");

//遍历节点对象集合，输出每个对象的内容

for(vari=0;i

alert(arr1[i].innerHTML);

}

3.3:通过类名查找页面中元素节点集合或数组

eg:

vararr2=document.getElementsByClassName("c1");

//遍历节点对象集合，输出每个对象的内容

for(vari=0;i

alert(arr2[i].innerHTML);

}

3.4:通过name属性来查找元素节点集合或数组

eg:

vararr3=document.getElementsByName("hobby");

//遍历节点对象集合，输出每个对象的value属性值

for(vari=0;i

alert(arr3[i].value);

}

4.DOM操作节点对象的内容(标签中文本内容，子标签，子标签文本......)：

4.1：获得节点内容：节点对象.innerHTML

eg:

alert(ob1.innerHTML);

4.2:修改节点内容: 节点对象.innerHTML=“新值”；

eg：

ob1.innerHTML="哈哈";

4.3：清空节点内容：

eg:

ob1.innerHTML="";

5.DOM操作节点对象的文本内容(标签中的文本和子标签中的文本......)：

5.1:获得节点文本内容(标签中的文本和子标签中的文本):节点对象.innerText

eg:

alert(ob1.innerText);

5.2:修改节点文本内容(标签中的所有内容都修改):节点对象.innerText=“新值”；

eg：

ob1.innerText="呵呵";

6.DOM操作节点对象的属性：

6.1：获得节点对象的属性：节点对象.属性名

eg:

alert(ob2.src);

6.2:修改节点对象属性：节点对象.属性名=“值”；

eg:

ob2.src="img/img-2.jpg";

6.3:删除节点对象的属性：节点对象.removeAttribute("属性名");

eg:

ob2.attributes.removeNamedItem("title");

ob2.removeAttribute("title");

7.DOM操作节点对象样式：

7.1：设置节点对象的样式：节点对象.style.样式名=“样式值”；

eg:

ob1.style.color="red";

ob1.style.backgroundColor="blue";

7.2: 获得节点对象的样式: 节点对象.style.样式名

eg:

alert(ob1.style.color);

8.事件

8.1：:页面加载完事件。

8.2：onclick:鼠标单击事件。

8.3：onchange:改变事件。

8.4：onblur：光标离开事件。

8.5：onfocus:获得光标事件。

8.6：onmouseover:鼠标经过事件。

8.7：onmouseout:鼠标离开事件。

9.DOM操作节点对象

9.1:创建节点对象：

9.1.1:创建标签节点对象：document.("标签名");

eg:

//创建节点对象

varnode1=document.("p");

eg:

//创建节点对象

varnode1=document.("h1");

node1.innerHTML="你好中国";

9.1.2：创建文本对象：document.createTextNode("文本内容");

eg:

//创建文本对象

varnode1text=document.createTextNode("这是一个段落");

9.2:添加节点对象：节点对象.(子节点);

eg:

//将节点对象添加body中

document.getElementById("d1").(node1);

//直接向一个标签中添加子节点

document.getElementById("d2").innerHTML=document.getElementById

("d2").innerHTML+"

哈哈

呵呵呵

";

9.3：删除节点对象：父节点对象.removeChild(子节点对象);

eg:

//获得父节点对象

varparentNode=document.getElementById("d1")

//获得要删除的子节点对象

varchildNode=document.getElementsByTagName("p")[0];

//删除子节点对象

//parentNode.removeChild(childNode);

//删除当前节点对象，只有谷歌，火狐

childNode.remove();

9.4：复制节点对象：节点对象.cloneNode(true);

eg:

//获得要复制的节点对象

varchildNode=document.getElementsByTagName("p")[0];

//复制节点对象,true表示复制节点的同时将内容复制，false反之

varcopyNode=childNode.cloneNode(true);

//将复制的节点添加到body中

document.getElementById("d1").(copyNode);

9.5: 替换元素中的子节点:父节点对象.replaceChild(newnode,oldnode);返回搜狐，查看更多

责任编辑：