JavaScript与HTML_DOM-优快云博客

本文介绍了 HTML DOM 的基本操作，包括查找、修改 HTML 元素的方法，如通过 ID、标签名或类名选取元素；利用 JavaScript 改变元素的内容、属性和样式；响应各种 HTML 事件，以及创建和删除 HTML 元素。

HTML DOM

查找HTML元素

找到该元素。有三种方法来做这件事：

通过id找到HTML元素（getElementById）
通过标签名找到HTML元素（getElementsByTagName）
通过类名找到HTML元素（getByClass）

改变HTML内容（innerHTML）

<!DOCTYPE html>
<html>
<body>

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

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

</body>
</html>

改变HTML属性

<!DOCTYPE html>
<html>
<body>

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

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

</body>
</html>

改变HTML样式

<!DOCTYPE html>
<html>
<body>

<p id="p1">这是一段文本。</p>

<input type="button" value="隐藏文本" onclick="document.getElementById('p1').style.visibility='hidden'" />
<input type="button" value="显示文本" onclick="document.getElementById('p1').style.visibility='visible'" />

</body>
</html>

HTML事件

HTML 事件的例子：

当用户点击鼠标时(* - onclick)
当网页加载完成时(body - onload)
当图像加载完成时(img - onload)
当输入字段被改变完成时(input - onchange)
当鼠标移动到元素上时(* - onmouseover,onmouseout)
当用户触发按键时(* - onmousedown, onmouseup)
当元素获取焦点时(* - onfocus)
当提交HTML表单时(form - onsubmit)

onclick

当用户在<h1>元素上点击时，会改变其内容：

<!DOCTYPE html>
<html>
<body>

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

</body>
</html>

onload、onunload

onload和onunload事件会在用户进入或离开页面时被触发。
onload事件可用于检测访问者的浏览器类型和浏览器版本，并基于这些信息来加载网页的正确版本。
onload和onunload事件可用于处理cookie。

<!DOCTYPE html>
<html>

<body onload="checkCookies()"> <!-- 页面加载完成提示 -->

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

<p>提示框会告诉你，浏览器是否已启用 cookie。</p>

</body>
</html>

onchange

onchange事件常结合对输入字段的验证来使用。
下面是一个如何使用onchange的例子。当用户改变输入字段的内容完成后，会调用upperCase()函数。

<!DOCTYPE html>
<html>
<head>
<script>
function myFunction()
{
var x=document.getElementById("fname");
x.value=x.value.toUpperCase();
}
</script>

</head>
<body>

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

</body>
</html>

onmouseover, onmouseout

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>

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

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

</body>
</html>

onmousedown, onmouseup

当点击鼠标按钮时，会触发onmousedown事件，当释放鼠标按钮时，会触发onmouseup事件，最后，当完成鼠标点击时，会触发onclick事件。

<!DOCTYPE html>
<html>
<head>
<script>
function lighton()
{
    document.getElementById('myimage').src="http://www.w3school.com.cn/i/eg_bulbon.gif";
}
function lightoff()
{
    document.getElementById('myimage').src="http://www.w3school.com.cn/i/eg_bulboff.gif";
}
</script>
</head>

<body>

<img id="myimage" onmousedown="lighton()" onmouseup="lightoff()" src="http://www.w3school.com.cn/i/eg_bulboff.gif" />

<p>按住鼠标不放可以点亮这盏灯！</p>

</body>
</html>

onfocus

当元素获取焦点时，事件被触发。

<!DOCTYPE html>
<html>
<head>
<script>
function myFunction(x)
{
    x.style.background="yellow";
}
</script>
</head>

<body>

请输入英文字符：<input type="text" onfocus="myFunction(this)">

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

onsumbit

当表单提交时，事件被触发。

<html>
<head>
<script type="text/javascript">

function validate_required(field,alerttxt)
{
    with (field)
    {
        if (value==null||value=="")
            {alert(alerttxt);return false}
        else {return true}
    }
}

function validate_form(thisform)
{
    with (thisform)
    {
        if (validate_required(email,"Email must be filled out!")==false)
            {email.focus();return false}
    }
}
</script>
</head>

<body>

<form action="submitpage.htm" onsubmit="return validate_form(this)" method="post">
Email:  <input type="text" name="email" size="30">
        <input type="submit" value="Submit"> 
</form>

</body>

</html>

分配事件

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

<!DOCTYPE html>
<html>
<head>
</head>
<body>

<p>点击按钮就可以执行 <em>displayDate()</em> 函数。</p>

<button id="myBtn">点击这里</button>

<script>
document.getElementById("myBtn").onclick = function(){displayDate()};   // 分配点击事件

function displayDate()
{
    document.getElementById("demo").innerHTML=Date();
}
</script>

<p id="demo"></p>

</body>
</html>

DOM节点

创建新的HTML元素

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

<!DOCTYPE html>
<html>
<body>

<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>

</body>
</html>

删除HTML元素

如需删除HTML元素，您必须首先获得该元素的父元素：

<!DOCTYPE html>
<html>
<body>

<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>

</body>
</html>