您的位置：首页 > Web前端 > JavaScript

JavaScript与HTML_DOM

2016-04-27 21:34 513 查看

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>


更多请参考：W3School
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签：  getElement innerHTML onclick creElement appedChild
相关文章推荐
新的分享
章节导航