HTML DOM (文档对象模型)
当网页被加载时,浏览器会创建页面的文档对象模型(Document Object Model)。
HTML DOM 模型被构造为对象的树。
1、查找 HTML 元素
//本例查找 id="main" 的元素,然后查找 "main" 中的所有 <p> 元素:
var x=document.getElementById("main");
var y=x.getElementsByTagName("p");
2、内容替换:
//修改 HTML 内容的最简单的方法时使用 innerHTML 属性。
document.getElementById(id).innerHTML="New text!"
3、修改属性:
<img id="image" src="hello.gif">
<script>
document.getElementById("image").src="byebye.jpg";
</script>
4、修改 css
<h1 id="id1">My Heading 1</h1>
<button type="button" onclick="document.getElementById('id1').style.color='red'">
changeColor
</button>
5、点击事件:
demo 1
<h1 onclick="this.innerHTML='谢谢!'">请点击该文本</h1>
demo 2
<script>
function changetext(empl){
//获取元素对象,修改内容
empl.innerHTML="hello~!";
}
</script>
//this 代表当前元素 h1 点击后执行 changetext 方法
<h1 onclick="changetext(this)">请点击该文本</h1>
demo 3
<p>点击按钮就可以执行 <em>displayDate()</em> 函数。</p>
<button id="myBtn">点击这里</button>
<p id="show"></p>
<script> //设置onclick 属性。
document.getElementById("myBtn").onclick=function(){
document.getElementById("show").innerHTML=Date();
};
</script>
onload 和 onunload 事件
onload 和 onunload 事件会在用户进入或离开页面时被触发。
onload 事件可用于检测访问者的浏览器类型和浏览器版本,并基于这些信息来加载网页的正确版本。
onload 和 onunload 事件可用于处理 cookie。
<body onload="checkCookies()">
<script>
function checkCookies(){
if (navigator.cookieEnabled==true){
alert("已启用 cookie")
}else{
alert("未启用 cookie")
}
}
</script>
<p>提示框会告诉你,浏览器是否已启用 cookie。</p>
</body>
onChange 事件
<script>
function myFunction(){
var x=document.getElementById("fname");
x.value=x.value.toUpperCase();
}
</script>
请输入英文字符:<input type="text" id="fname" onchange="myFunction()">
<p>当您离开输入字段时,会触发将输入文本转换为大写的函数。</p>
onmouseover 和 onmouseout 事件
<div onmouseover="mOver(this)" onmouseout="mOut(this)" style="background-color:green;width:120px;height:20px;padding:40px;">把鼠标移到上面</div>
<script>
function mOver(obj){
obj.innerHTML="hello"
obj.style.color = "#ff00ff"
}
function mOut(obj){
obj.innerHTML="move over"
obj.style.color = "#00ff00"
}
</script>
onmousedown、onmouseup 按下、释放鼠标按钮
<div onmousedown="mDown(this)" onmouseup="mUp(this)" style="width:90px;height:20px;">请点击这里</div>
<script>
function mDown(obj){
obj.style.backgroundColor="#1ec5e5";
obj.innerHTML="释放鼠标"
}
function mUp(obj){
obj.style.backgroundColor="green";
obj.innerHTML="按下鼠标"
}
</script>
创建和删除 DOM 元素 节点
demo 1
<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>
删除节点
<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>