[JavaScript]关于JavaScript中DOM对象的使用

DOM对象是个好东西。

通过 HTML DOM,可以访问 JavaScript HTML 文档的所有元素。

当网页被加载时,浏览器会创建页面的文档对象模型(Document Object Model,缩写DOM)。

HTML DOM 模型被构造为对象的树。

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

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


一、查找元素

通常,通过 JavaScript,需要操作 HTML 元素。

为了做到这件事情,必须首先找到该元素。有三种方法来做这件事:


1.通过 id 找到 HTML 元素

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

本例查找 id="intro" 元素:

var x=document.getElementById("intro");
亲自试一试

如果找到该元素,则该方法将以对象(在 x 中)的形式返回该元素。

如果为找到该元素,则 x 将包含 null。


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

本例查找 id="main" 的元素,然后查找 "main" 中的所有 <p> 元素:

var x=document.getElementById("main");
var y=x.getElementsByTagName("p");

亲自试一试


3.通 过类名找到 HTML 元素通过类名查找 HTML 元素在 IE 5,6,7,8 中无效。



二、更改元素内容

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


1.改变HTML输出流

JavaScript 能够创建动态的 HTML内容。

比如输出当前日期:Sun Jan 27 2013 12:07:33 GMT+0800

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

<!DOCTYPE html>
<html>
<body>

<script>
document.write(Date());
</script>

</body>
</html>

亲自试一试

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


2.改变HTML内容:

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

如需改变 HTML 元素的内容,请使用这个语法

document.getElementById(id).innerHTML=new HTML
本例改变了 <p> 元素的内容:

<html>
<body>

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

<script>
document.getElementById("p1").innerHTML="New text!";
</script>

</body>
</html>
亲自试一试


本例改变了 <h1> 元素的内容:

<!DOCTYPE html>
<html>
<body>

<h1 id="header">Old Header</h1>

<script>
var element=document.getElementById("header");
element.innerHTML="New Header";
</script>

</body>
</html>

亲自试一试

例子解释:上面的 HTML 文档含有 id="header" 的 <h1> 元素,我们使用 HTML DOM 来获得 id="header" 的元素,JavaScript 更改此元素的内容 (innerHTML)。


3.更改HTML的属性:

如需改变 HTML 元素的属性,请使用这个语法:

document.getElementById(id).attribute=new value

本例改变了 <img> 元素的 src 属性:

<!DOCTYPE html>
<html>
<body>

<img id="image" src="smiley.gif">

<script>
document.getElementById("image").src="landscape.jpg";
</script>

</body>
</html>

亲自试一试

例子解释:上面的 HTML 文档含有 id="image" 的 <img> 元素,我们使用 HTML DOM 来获得 id="image" 的元素,JavaScript 更改此元素的属性(把 "smiley.gif" 改为 "landscape.jpg")。


三、更改元素的样式

HTML DOM 允许 JavaScript 改变 HTML 元素的样式。
如需改变 HTML 元素的样式,请使用这个语法:

document.getElementById(id).style.property=new style
例子 1
下面的例子会改变 <p> 元素的样式:

<p id="p2">Hello World!</p>
<script>
document.getElementById("p2").style.color="blue";
</script>
亲自试一试
例子 2
本例改变了 id="id1" 的 HTML 元素的样式,当用户点击按钮时:

<h1 id="id1">My Heading 1</h1>
<button type="button" οnclick="document.getElementById('id1').style.color='red'">
点击这里
</button>
亲自试一试

更多实例
Visibility

如何使元素不可见。你希望元素显示或消失吗?请点击上面的案例

HTML DOM Style 对象参考手册

如需完整的 HTML DOM Style 对象属性,请参阅W3C的HTML DOM Style 对象参考手册


四、处理各种事件
HTML DOM 使 JavaScript 有能力对 HTML 事件做出反应。

1.对事件作出反应

我们可以在事件发生时执行 JavaScript,比如当用户在 HTML 元素上点击时。

如需在用户点击某个元素时执行代码,请向一个 HTML 事件属性添加 JavaScript 代码:

οnclick=JavaScript

HTML 事件的例子:

  • 当用户点击鼠标时

  • 当网页已加载时

  • 当图像已加载时

  • 当鼠标移动到元素上时

  • 当输入字段被改变时

  • 当提交 HTML 表单时

  • 当用户触发按键时


在本例中,当用户在 <h1> 元素上点击时,会改变其内容:

<h1 οnclick="this.innerHTML='谢谢!'">请点击该文本</h1>

亲自试一试


本例从事件处理器调用一个函数: 

<!DOCTYPE html>
<html>
<head>
<script>
function changetext(id)
{
id.innerHTML="谢谢!";
}
</script>
</head>
<body>
<h1 οnclick="changetext(this)">请点击该文本</h1>
</body>
</html>
亲自试一试


2.HTML事件属性

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

实例

向 button 元素分配 onclick 事件:

<button οnclick="displayDate()">点击这里</button>
亲自试一试

在上面的例子中,名为 displayDate 的函数将在按钮被点击时执行。



3.使用DOM分配事件
HTML DOM 允许通过使用 JavaScript 来向 HTML 元素分配事件:

向 button 元素分配 onclick 事件:

<script>
document.getElementById("myBtn").οnclick=function(){displayDate()};
</script>

亲自试一试

在上面的例子中,名为 displayDate 的函数被分配给 id=myButn" 的 HTML 元素。

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


4.onload 和 onunload 事件

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

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

onload 和 onunload 事件可用于处理 cookie。

<body οnlοad="checkCookies()">
亲自试一试

5.onchange 事件

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

下面是一个如何使用 onchange 的例子。当用户改变输入字段的内容时,会调用 upperCase() 函数。

<input type="text" id="fname" οnchange="upperCase()">

亲自试一试


6.onmouseover 和 onmouseout 事件

onmouseover 和 onmouseout 事件可用于在用户的鼠标移至 HTML 元素上方或移出元素时触发函数。

一个简单的 onmouseover-onmouseout 实例:

亲自试一试


7.onmousedown、onmouseup 以及 onclick 事件

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

一个简单的 onmousedown-onmouseup 实例:

亲自试一试


8.更多实例

onmousedown 和 onmouseup :当用户按下鼠标按钮时,更换一幅图像。 onload: 当页面完成加载时,显示一个提示框。 onfocus :当输入字段获得焦点时,改变其背景色。 鼠标事件 :当指针移动到元素上方时,改变其颜色 ;当指针移出文本后,会再次改变其颜色。

五、添加和删除节点

1.创建新的 HTML 元素

如需向 HTML DOM 添加新元素,必须首先创建该元素(元素节点),然后向一个已存在的元素追加该元素。

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

<script>
var para=document.createElement("p");
var node=document.createTextNode("这是新段落。");
para.appendChild(node);

var element=document.getElementById("div1");
element.appendChild(para);
</script>

亲自试一试

例子解释:

这段代码创建新的 <p> 元素:

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

如需向 <p> 元素添加文本,必须首先创建文本节点。这段代码创建了一个文本节点:

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

然后必须向 <p> 元素追加这个文本节点:

para.appendChild(node);

最后必须向一个已有的元素追加这个新元素。

这段代码找到一个已有的元素:

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

这段代码向这个已有的元素追加新元素:

element.appendChild(para);

2.删除已有的 HTML 元素

如需删除 HTML 元素,你必须首先获得该元素的父元素:

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

<script>
var parent=document.getElementById("div1");
var child=document.getElementById("p1");
parent.removeChild(child);
</script>

亲自试一试

例子解释:

这个 HTML 文档含有拥有两个子节点(两个 <p> 元素)的 <div> 元素:

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

找到 id="div1" 的元素:

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

找到 id="p1" 的 <p> 元素:

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

从父元素中删除子元素:

parent.removeChild(child);

提示:如果能够在不引用父元素的情况下删除某个元素,就太好了。

不过很遗憾。DOM 需要清楚你需要删除的元素,以及它的父元素。

这是常用的解决方案:找到希望删除的子元素,然后使用其 parentNode 属性来找到父元素:

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

至此,简单的DOM就算是介绍完毕。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值