JS HTML DOM
通过 HTML DOM,可访问 JavaScript HTML 文档的所有元素。
HTML DOM (文档对象模型)
当网页被加载时,浏览器会创建页面的文档对象模型(Document Object Model)。
HTML DOM 模型被构造为对象的树。
查找HTML元素
1.通过id找到Html元素
在 DOM 中查找 HTML 元素的最简单的方法,是通过使用元素的 id
<!DOCTYPE html>
<html>
<body>
<p id="intro">Hello World!</p>
<p>本例演示 <b>getElementById</b> 方法!</p>
<script>
x=document.getElementById("intro");
document.write('<p>id="intro" 的段落中的文本是:' + x.innerHTML + '</p>');
</script>
</body>
</html>
通过标签名查找 HTML 元素
<!DOCTYPE html>
<html>
<body>
<p>Hello World!</p>
<div id="main">
<p>The DOM is very useful.</p>
<p>本例演示 <b>getElementsByTagName</b> 方法。</p>
</div>
<script>
var x=document.getElementById("main");
var y=x.getElementsByTagName("p");
document.write('id 为 "main" 的 div 中的第一段文本是:' + y[0].innerHTML);
</script>
</body>
</html>
JavaScript HTML DOM - 改变 HTML
1.改变HTML输出流
JavaScript 能够创建动态的 HTML 内容:
<script>
document.write(date());
</script>
2.改变HTML内容
语法:document.GetElementsByID(id).innerHTML=new HTML
3.改变HTML属性
语法:document.getElementById(id).attribute=new value
改变CSS
语法:document.getElementById(id).style.property=new style
<button type="button"
onclick="document.getElementById('main').style.color='red'">点击这里</button>
显示隐藏文本
<input type="button" value="隐藏文本" onclick="document.getElementById('p1').style.visibility='hidden'" />
<input type="button" value="显示文本" onclick="document.getElementById('p1').style.visibility='visible'" />
DOM事件
HTML DOM 使 JavaScript 有能力对 HTML 事件做出反应。
<html>
<head>
<script>
function changetext(id) {
id.innerHTML = "thanks!";
}
</script>
</head>
<body>
<h1 onclick="changetext(this)">点击该文本</h1>
</body>
</html>
注:js放在head和body之间的区别
放在body中在页面加载时就会执行
head中得在被调用时才执行
HTML 事件属性
向HTML文件中添加事件
<html>
<body>
<p>点击按钮执行displayDate()函数</p>
<button onclick="displayDate()">点击这里</button>
<script>
function displayDate() {
document.getElementById("demo").innerHTML = Date();
}
</script>
<p id="demo"></p>
</body>
</html>
使用DOM分配事件
向 button 元素分配 onclick 事件:
<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>
在上面的例子中,名为 displayDate 的函数被分配给 id=myButn" 的 HTML 元素
onload 和 onunload 事件
onload 和 onunload 事件会在用户进入或离开页面时被触发。
onload 事件可用于检测访问者的浏览器类型和浏览器版本,并基于这些信息来加载网页的正确版本。
onload 和 onunload 事件可用于处理 cookie。
<body onload="checkcookies()">
<script>
function checkcookies()
{ if(navigator.cookieenabled==true)
{
alert("cookie已启用")
}
else{
alert("cookie未启用")
}
</script>
</body>
onchange事件
改事件常结合对输入字段的验证来使用
下面是一个如何使用 onchange 的例子。当用户改变输入字段的内容时,会调用 upperCase() 函数。
<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()" />
</body>
</html>
onmouseover 和 onmouseout 事件
onmouseover 和 onmouseout 事件可用于在用户的鼠标移至 HTML 元素上方或移出元素时触发函数。
<body>
<div onmousemove="mover(this)"onmouseout="mout(this)"style="background-color:red;width:120px;height:20px;padding:40px;color:black;">
回来
</div>
<script>
function mover(obj){
obj.innerHTML="滚蛋"}
function mout(obj){
obj.innerHTML="回来"}
</script>
</body>
onmousedown、onmouseup 以及 onclick 事件
onmousedown, onmouseup 以及 onclick 构成了鼠标点击事件的所有部分。首先当点击鼠标按钮时,会触发 onmousedown 事件,当释放鼠标按钮时,会触发 onmouseup 事件,最后,当完成鼠标点击时,会触发 onclick 事件。
<body>
<div onmousedown="mdown(this)"onmouseup="mup(this)"style="background-color:red;width:120px;height:20px;padding:40px;color:black;">
点击
</div>
<script>
function mdown(obj) {
obj.style.backgroundColor = "green";
obj.innerHTML="释放鼠标"}
function mup(obj) {
obj.style.backgroundColor = "#1ec5e5";
obj.innerHTML="按下鼠标"}
</script>
</body>
JavaScript HTML DOM 元素(节点)
创建新的 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("这是新段落。");<!--如需向 <p> 元素添加文本,您必须首先创建文本节点-->
para.appendChild(node);<!--向 <p> 元素追加这个文本节点-->
var element=document.getElementById("div1");
element.appendChild(para);
</script>
删除已有的 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 元素,您必须首先获得该元素的父元素: