标签：get smi ext cti sed 元素 mouseover str src
1. HTML DOM 改变 HTML 内容；（HTML DOM 允许 JavaScript 改变 HTML 元素的内容。）
<!DOCTYPE html> <html> <body> <script> document.write(Date()); </script> </body> </html>
<!DOCTYPE html> <html> <body> <img id="image" src="smiley.gif"> <script> document.getElementById("image").src="landscape.jpg"; </script> </body> </html>
document.getElementById(id).style.property=new style
<!DOCTYPE html> <html> <body> <h1 id="id1">My Heading 1</h1> <button type="button" onclick="document.getElementById(‘id1‘).style.color=‘red‘"> Click Me!</button> </body> </html>
HTML 事件的例子：
当用户在 <h1> 元素上点击时，会改变其内容：<!DOCTYPE html>
<html> <body> <h1 onclick="this.innerHTML=‘Ooops!‘">点击文本!</h1> </body> </html>
从事件处理器调用一个函数
<!DOCTYPE html> <html> <head> <script> function changetext(id) { id.innerHTML="Ooops!"; } </script> </head> <body> <h1 onclick="changetext(this)">Click on this text!</h1> </body> </html>
即调用函数
onload 和 onunload 事件会在用户进入或离开页面时被触发。
onload 事件可用于检测访问者的浏览器类型和浏览器版本，并基于这些信息来加载网页的正确版本。
onload 和 onunload 事件可用于处理 cookie。
Onload事件：
function mymessage(){ alert("消息在 onload 事件触发后弹出。"); } </script> </head> <body onload="mymessage()"></body> </html>
onchange 事件常结合对输入字段的验证来使用。
下面是一个如何使用 onchange 的例子。当用户改变输入字段的内容时，会调用 upperCase() 函数。
<input type="text" id="fname" onchange="upperCase()">
onmouseover 和 onmouseout 事件可用于在用户的鼠标移至 HTML 元素上方或移出元素时触发函数。
onmousedown, onmouseup 以及 onclick 构成了鼠标点击事件的所有部分。首先当点击鼠标按钮时，会触发 onmousedown 事件，当释放鼠标按钮时，会触发 onmouseup 事件，最后，当完成鼠标点击时，会触发 onclick 事件。
（6）获取焦点时focus事件
<script>
function myFunction(x){
x.style.background="yellow";
}
</script>
</head>
<body>
输入你的名字: <input type="text" onfocus="myFunction(this)">
<p>当输入框获取焦点时，修改背景色（background-color属性）将被触发。</p>
</body>
</html>
输入你的名字:
<input type="text" onfocus="myFunction(this)"> <p>当输入框获取焦点时，修改背景色（background-color属性）将被触发。</p> </body> </html>
document.getElementById("myBtn").addEventListener("click", displayDate);
第一个参数是事件的类型 (如 "click" 或 "mousedown").
第二个参数是事件触发后调用的函数。
第三个参数是个布尔值用于描述事件是冒泡还是捕获。该参数是可选的。
element.addEventListener("mouseover", myFunction);
element.addEventListener("click", mySecondFunction);
element.addEventListener("mouseout", myThirdFunction);
window.addEventListener("resize", function()
{
document.getElementById("demo").innerHTML = sometext;
}
);
<div id="div1"> <p id="p1">This is a paragraph.</p> <p id="p2">This is another paragraph.</p> </div> <script> var para=document.createElement("p"); var node=document.createTextNode("This is new."); para.appendChild(node); var element=document.getElementById("div1"); element.appendChild(para); </script>
var para=document.createElement("p");
var node=document.createTextNode("This is a new paragraph.");
para.appendChild(node);
最后您必须向一个已有的元素追加这个新元素。
这段代码找到一个已有的元素：
var element=document.getElementById("div1");
element.appendChild(para);
<div id="div1"> <p id="p1">This is a paragraph.</p> <p id="p2">This is another paragraph.</p> </div> <script> var parent=document.getElementById("div1"); var child=document.getElementById("p1"); parent.removeChild(child); </script>
<div id="div1"> <p id="p1">This is a paragraph.</p> <p id="p2">This is another paragraph.</p> </div>
var parent=document.getElementById("div1");
var child=document.getElementById("p1");
parent.removeChild(child);
标签：get smi ext cti sed 元素 mouseover str src
原文地址：http://www.cnblogs.com/xingyue1988/p/6105956.html
