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>
