JavaScript HTML DOM

来源：互联网发布：淘宝游戏专营店转让编辑：程序博客网时间：2024/05/12 00:03

一、DOM简介

通过 HTML DOM，可访问 JavaScript HTML文档的所有元素

HTML DOM （文档对象模型）

当网页被加载时，浏览器会创建页面的文档对象模型（Document Object Model）。

HTML DOM 模型被构造为对象的树。如下图：

通过可编程的对象模型，JavaScript获得了足够的能力来创建动态的 HTML。

JavaScript能够改变页面中的所有 HTML元素
JavaScript能够改变页面中的所有 HTML属性
JavaScript能够改变页面中的所有 CSS样式
JavaScript能够对页面中的所有事件做出反应

1.查找HTML元素

通常，通过JavaScript来操作HTML元素。

有三种方法来做成这件事：

a.通过 id找到 HTML 元素

在 DOM中查找 HTML 元素的最简单的方法，是通过使用元素的 id.

查找 id="intro"元素：

var x=document.getElementById("intro");

如果找到该元素，则该方法将以对象（在 x中）的形式返回该元素。

如果未找到该元素，则 x 将包含 null。

b.通过标签名找到 HTML元素

查找 id="main" 的元素，然后查找 "main" 中的所有 <p> 元素：

var x=document.getElementById("main");

var y=x.getElementsByTagName("p");

c.通过类名找到 HTML元素

注意：通过类名查找 HTML 元素在 IE 5,6,7,8中无效

二、DOM HTML

HTML DOM 允许 JavaScript改变 HTML 元素的内容。

1.改变HTML输出流

在 JavaScript 中，document.write()可用于直接向 HTML 输出流写内容。

document.write(Date());

</script>

提示：绝不要使用在文档加载之后使用 document.write()。这会覆盖该文档。

2.改变HTML内容

修改HTML内容的最简单的方法是使用innerHTML属性。

语法：

document.getElementById(id).innerHTML = new HTML

比如要修改<p>元素的内容

<html>

<body>

<p id="p1">Hello World!</p>

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

</script>

</body>

</html>

3.改变HTML属性

改变 HTML 元素的属性，请使用这个语法：

document.getElementById(id).attribute=new value

比如要改变<img>元素的src属性:

<!DOCTYPE html>

<html>

<body>

document.getElementById("image").src="landscape.jpg";

</script>

</body>

</html>

三、JavaScript HTML DOM -改变 CSS

HTML DOM 允许 JavaScript改变 HTML 元素的样式。

语法：

document.getElementById(id).style.property=new style

例子，要改变 <p> 元素的样式：

<p id="p2">Hello World!</p>

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

</script>

四、JavaScript HTML DOM事件

HTML DOM 使 JavaScript有能力对 HTML 事件做出反应。

1.HTML事件属性

如果向HTML元素分配事件，可以使用事件属性。

向button元素分配onclick事件：

<head>

function displayDate()

{

document.getElementById("demo").innerHTML=Date();

}

</script>

</head>

<body>

</body>

这样，名为 displayDate 的函数将在按钮被点击时执行。

2.使用 HTML DOM来分配事件

HTML DOM 允许我们通过使用 JavaScript来向 HTML 元素分配事件：

<head>

document.getElementById("myBtn").onclick=function(){displayDate()};

</script>

</head>

<body>

</body>

上面的例子就是向button元素分配onclick事件，名为 displayDate的函数被分配给 id=“myButn"的 HTML 元素。

当按钮被点击时，会执行该函数。

3.onload 和onunload事件

onload和onunload事件会在用户进入或者离开页面时被触发。

onload事件用于检测访问者的浏览器类型和浏览器版本，并基于这些信息来加载网页的正确版本

4.onchange事件

onchange事件常结合对输入字段的验证来使用。

比如，当用户改变输入字段的内容时，会调用 upperCase()函数。

5.onmouseover 和onmouseout事件

用于在用户的鼠标移至HTML元素上方或移出元素时触发函数

<!DOCTYPE html>

<html>

<body>

<div onmouseover="mOver(this)" onmouseout="mOut(this)" style="background-color:green;width:120px;height:20px;padding:40px;color:#ffffff;">把鼠标移到上面</div>

function mOver(obj)

{

obj.innerHTML="谢谢"

}

function mOut(obj)

{

obj.innerHTML="把鼠标移到上面"

}

</script>

</body>

</html>

6.onmousedown、onmouseup以及onclick事件

onmousedown、onmouseup以及onclick事件构成了鼠标点击事件的所有部分。首先当点击鼠标按钮时，会触发onmousedown事件。当释放鼠标按钮时，会触发onmouseup事件，最后当鼠标点击时，会触发onclick事件

更多实例

onmousedown和 onmouseup

当用户按下鼠标按钮时，更换一幅图像。

onload

当页面完成加载时，显示一个提示框。

onfocus

当输入字段获得焦点时，改变其背景色。

鼠标事件

当指针移动到元素上方时，改变其颜色；当指针移出文本后，会再次改变其颜色。

五、JavaScript HTML DOM元素（节点）

添加和删除节点（HTML 元素）

1.创建新的HTML元素

向HTML DOM添加新元素，必须首先创建该元素（元素节点），然后向一个已存在的元素追加该元素。

实例：

<p id="p1">这是一个段落</p>

<p id="p2">这是另一个段落</p>

</div>

//创建新的<p>元素

var para=document.createElement("p");

//创建文本节点

var node=document.createTextNode("这是新段落。");

//向<p>追加这个文本节点

para.appendChild(node);

//最后必须向一个已有的元素追加这个新元素。要先找到一个已有的元素，然后向这个已有的元素追加新元素

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

element.appendChild(para);

</script>

2.删除已有的HTML元素

如需删除html元素，必须首先获得该元素的父元素。

<p id="p1">这是一个段落。</p>

<p id="p2">这是另一个段落。</p>

</div>

//获取该元素的父元素

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

//获取要删除的元素

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

//把要删除的元素从父元素上删除

parent.removeChild(child);

</script>

0 0