JS HTML DOM
一、HTML DOM (文檔對象模型)
- JavaScript 能夠改變頁面中的所有 HTML 元素
- JavaScript 能夠改變頁面中的所有 HTML 屬性
- JavaScript 能夠改變頁面中的所有 CSS 樣式
- JavaScript 能夠對頁面中的所有事件做出反應
1、通過 id 查找 HTML 元素
<p id="demo">你好世界</p>
<script type="text/javascript">
x=document.getElementById("demo");
document.write("<p>文本來自id為demo段落"+x.innerHTML+"</p>");
</script>
2、通過標簽名查找 HTML 元素
<div id="demo">
<p>123</p>
</div>
<script type="text/javascript">
var x=document.getElementById("demo");
var y=x.getElementsByTagName("p");
document.write(y[0].innerHTML);
</script>
3、通過類名找到 HTML 元素
<p class="demo">123</p>
<script type="text/javascript">
var x=document.getElementsByClassName("demo")
document.write(x[0].innerHTML);
</script>
二、改變 HTML
1、改變 HTML 輸出流
<script type="text/javascript">
document.write(Date());
</script>
2、改變 HTML 內容
<p id="demo">123</p>
<script type="text/javascript">
document.getElementById("demo").innerHTML="456";
</script>
3、改變 HTML 屬性
<img src="images/1.jpg" width="160" height="120" id="image">
<script type="text/javascript">
document.getElementById("image").src="images/2.jpg";
</script>
三、HTML DOM - 改變CSS
1、語法
document.getElementById(id).style.property=新樣式
<p id="demo1">123</p>
<P id="demo2">123</P>
<script type="text/javascript">
document.getElementById("demo2").style.color="blue";
document.getElementById("demo2").style.fontWeight="bold";
document.getElementById("demo2").style.fontSize="larger";
</script>
2、通過觸發事件來執行代碼。
<h1 id="demo">123</h1>
<button type="button" onclick="document.getElementById('demo').style.color='red'">點擊</button>
四、HTML DOM 事件
1、在用戶點擊某個元素時執行代碼，請向一個 HTML 事件屬性添加 JavaScript 代碼。
<h1 onclick="changetext(this)">surprise</h1>
<script type="text/javascript">
function changetext(id){
id.innerHTML="i love you";
}
</script>
2、從事件處理器調用一個函數：
<h1 onclick="this.innerHTML='i love you'">surprise</h1>
3、使用 HTML DOM 來分配事件
<button onclick="display()">點擊</button>
<script type="text/javascript">
function display(){
document.getElementById("demo").innerHTML=Date();
}
</script>
<P id="demo"></P>
4、onload 和 onunload 事件
<body onload="checkCookies()">
<script type="text/javascript">
function checkCookies(){
if(navigator.cookieEnabled==true){
alert("Cookies可用")
}
else{
alert("Cookies不可用")
}
}
</script>
</body>
5、onchange 事件
<body onload="checkCookies()">
<script type="text/javascript">
function checkCookies(){
if(navigator.cookieEnabled==true)
{
alert("以啟用cookie")
}
else{
alert("未啟用cookie")
}
}
</script>
</body>
6、onmouseover 和 onmouseout 事件
<div onmouseover="mOver(this)" onmouseout="mOut(this)">把鼠標移到上面
</div>
<script type="text/javascript">
function mOver(obj){
obj.innerHTML="謝謝"
}
function mOut(obj){
obj.innerHTML="把鼠標移到上面"
}
</script>
7、onmousedown、onmouseup 以及 onclick 事件
<div onmousedown="mOver(this)" onmouseup="mOut(this)">把鼠標移到上面
</div>
<script type="text/javascript">
function mOver(obj){
obj.innerHTML="謝謝"
}
function mOut(obj){
obj.innerHTML="把鼠標移到上面"
}
</script>
8、onfocus
<input type="text" onfocus="myFunction(this)" name="">
<script type="text/javascript">
function myFunction(x)
{
x.style.background="red";
}
</script>
五、HTML DOM EventListener
1、addEventListener() 方法
<button id="Btn">點擊</button>
<p id="demo"></p>
<script type="text/javascript">
document.getElementById("Btn").addEventListener("click",displayDate);
function displayDate(){
document.getElementById("demo").innerHTML=Date();
}
</script>
2、語法
element.addEventListener(event, function, useCapture);
第一個參數是事件的類型 (如 "click" 或 "mousedown").
第二個參數是事件觸發后調用的函數。
第三個參數是個布爾值用于描述事件是冒泡還是捕獲。該參數是可選的。
注意:不要使用 "on" 前綴。 例如，使用 "click" ,而不是使用 "onclick"。
3、向原元素添加事件句柄
<button id="myBtn">點擊</button>
<script type="text/javascript">
document.getElementById("myBtn").addEventListener("click",myFunction);
function myFunction(){
alert("hello world");
}
</script>
4、向同一個元素中添加多個事件句柄
<button id="myBtn">這是我想說的話</button>
<script type="text/javascript">
var x=document.getElementById("myBtn");
x.addEventListener("click",a);
x.addEventListener("click",b);
x.addEventListener("click",c);
function a(){
alert("老王")
}
function b(){
alert("好朋友！")
}
function c(){
alert("一輩子！")
}
</script>
5、傳遞參數
<button id="myBtn">點擊</button>
<p id="demo"></p>
<script type="text/javascript">
var p1=5;
var p2=7;
document.getElementById("myBtn").addEventListener("click",function(){
myFunction(p1,p2);
});
function myFunction(a,b){
var result=a*b;
document.getElementById("demo").innerHTML=result;
}
</script>
