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)  编辑  收藏  举报