20141128--JavaScript HTML DOM

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

HTML DOM

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

image

每个标签都可以称为节点,

DOM,的主要作用是,使得HTML之间的元素关系更加直观。

 

一、查找 HTML 元素

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

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

  • 通过 id 找到 HTML 元素
  • 通过标签名找到 HTML 元素
  • 通过类名找到 HTML 元素

1. 通过 id 查找 HTML 元素

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

查找 id="intro" 元素:

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

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

查找 id="main" 的元素,然后查找 "main" 中的所有 <p> 元素:
var x=document.getElementById("main");
var y=x.getElementsByTagName("p");
 

二、改变 HTML 内容

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

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

document.getElementById(id).innerHTML=new HTML
列:
 
<p id="p1">Hello World!</p>

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

<p>上面的段落被一条 JavaScript 脚本修改了。</p>

image

三、改变 HTML 属性

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

document.getElementById(id).attribute=new value
实例

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

<img id="image" src="/i/eg_tulip.jpg" />

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

<p>原始图片是郁金香(eg_tulip.jpg),但是已被修改为卢浦大桥(shanghai_lupu_bridge.jpg)。</p>

image

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

DOM事件,

对事件做出反应

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

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

onclick=JavaScript

HTML 事件的例子:

  • 当用户点击鼠标时
  • 当网页已加载时
  • 当图像已加载时
  • 当鼠标移动到元素上时
  • 当输入字段被改变时
  • 当提交 HTML 表单时
  • 当用户触发按键时

1)onclick 事件

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

image

image

onclick也可以调用函数,function

<script>
function changetext(id)
{
id.innerHTML="谢谢!";
}
</script>
</head>
<body>

<h1 onclick="changetext(this)">请点击该文本</h1>

onclick,也可应用与button标签

2)onload 和 onunload 事件

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

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

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

实例
<script>
function checkCookies()
{
if (navigator.cookieEnabled==true)
    {
    alert("已启用 cookie")
    }
else
    {
    alert("未启用 cookie")
    }
}
</script>

image

onunload:

<script>
function checkCookies()
{
window.open("http://www.baidu.com")
}
</script>

<p>离开页面时会自动打开baidu页面</p>

注意,onunload,有可能被一些浏览器当做广告自动拦截。

3) onchange 事件

onchange 事件常结合对输入字段的验证来使用。只有当光标离开时才会触发

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

实例
function myFunction()
{
var x=document.getElementById("fname");
x.value=x.value.toUpperCase();
}
</script>
</head>
<body>

请输入英文字符:<input type="text" id="fname" onchange="myFunction()">
<p>当您离开输入字段时,会触发将输入文本转换为大写的函数。</p>

image

image

4)onmouseover 和 onmouseout 事件

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

实例

一个简单的 onmouseover-onmouseout 实例:

<!--onmouseover="mOver(this)"中的this是传入当前元素-->
<div onmouseover="mOver(this)" onmouseout="mOut(this)" style="background-color:#000;width:120px;height:20px;padding:40px;color:#ffffff;">把鼠标移到上面</div>

<script>
function mOver(obj)
{
obj.innerHTML="谢谢";
}

function mOut(obj)
{
obj.innerHTML="把鼠标移到上面"
}
</script>

imageimage

5)onmousedown、onmouseup 以及 onclick 事件

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

实例
<div onmousedown="mDown(this)" onmouseup="mUp(this)" style="background-color:green;color:#ffffff;width:90px;height:20px;padding:40px;font-size:16px;">请点击这里</div>

<script>
function mDown(obj)
{
obj.style.backgroundColor="#1ec5e5";
obj.innerHTML="请释放鼠标按钮"
}

function mUp(obj)
{
obj.style.backgroundColor="green";
obj.innerHTML="请按下鼠标按钮"
}
</script>

点击之前:

image

点击鼠标时,没有松开

image

松开鼠标后

image

6)onfocus 当输入字段活的焦点时,改变其背景色,

<script>
function myFunction(x)
{
x.style.background="yellow";
x.value="";
}
</script>
</head>
<body>

请输入英文字符:<input type="text" onfocus="myFunction(this)" value="输入用户名">

<p>当输入字段获得焦点时,会触发改变背景颜色的函数。</p>

image

image

焦点 : 鼠标变成 大写的 I

五、JavaScript HTML DOM 元素(节点)

可以添加或删除节点(HTML元素)。

1)添加新的节点(HTML元素)

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

<script>
/*注意 这段代码不可以写在<head></head> 内,如果在head内,网页加载时会先加载这个 script ,但是它无法获取到body和body内的标签等*/
/*createElement 创建标签。
  createTextNode  创建文本*/
var p = document.createElement("p");/*创建标签 p*/
var f = document.createElement("font");/*创建标签 font */
var t = document.createTextNode("Hello World!");/*创建文本 Hello World!*/

p.appendChild(f);/*将变量 f 追加到变量 p*/
f.appendChild(t);/*将变量 t 追加到变量 f*/
var bd = document.body;/*获取body标签*/
bd.appendChild(p);/* 将变量 p 追加到变量bd*/
</script>

image

2)删除已有的 HTML 元素

<div>
<p id="p1">测试一</p> <p id="p2">测试二</p> <p id="p3">测试三</p> </div> <!--以上事先创建好的文字--> <script>/*方法1*/ var parent = document.getElementById("div1");/*先找到要删除标点的父级标签id*/ var child = document.getElementById("p1");/*找到需要删除的标签id*/ parent.removeChild(child);/*删除标签*/ </script> <script>/*方法2*/ var child=document.getElementById("p3");/*找到要删除的节点标签id*/ child.parentNode.removeChild(child);/*Node是节点意思, 删除父节点中的 child,即子节点p3*/ </script>

image

posted @ 2014-11-28 10:12  Tirisfal  阅读(181)  评论(0编辑  收藏  举报