1.查找HTML元素
1.1通过id名查找HTML元素
tip:注意看在document.write（）中<b>标签的用法
<body>
<p id="one">我的名字是平帅</p>
<a href="" id="one">123456</a>
<script>
x=document.getElementById("one")
document.write('<b>id为one的内容是：'+x.innerHTML+'</b>')
</script>
</body>
通过id查找.png
1.2通过标签名查找HTML元素
在div中的p自动生成了数组，从0开始。
<p>平帅</p>
<div id="main">
<p>平帅真的帅</p>
<p>147258369</p>
</div>
<script>
var x=document.getElementById("main");
var y=x.getElementsByTagName("P");
document.write("怎么说:"+y[0].innerHTML+".");
</script>
通过标签名查找.png
2.DOM HTML
2.1改变HTML内容
<p id="one">ps</p>
<h1 id="two">123</h1>
<script>
document.write(Date());
var x=document.getElementById("one");
var y=document.getElementById("two");
document.write(x.innerHTML="好帅");
document.write(y.innerHTML="数字");
</script>
改变HTML内容.png
2.2改变HTML属性
<img src="../images/詹姆斯.jpg" id="one">
<script>
document.getElementById("one").src="../images/洪湖1.jpg";
</script>
3.DOM CSS
3.1改变HTML样式
tip：打代码是发现fontsize后接数字是没用的
<body>
<p id="one">平帅是真的帅！</p>
<p id="two">平帅是真的帅！</p>
<h1 id="id1">My Heading 1</h1>
<script>
document.getElementById("two").style.fontSize = "larger";
document.getElementById("two").style.fontFamily = "fantasy";
document.getElementById("two").style.color = "red";
</script>
</body>
改变HTML样式.png
3.2通过点击按钮改变HTML样式
有2种方法
3.2.1贼简洁，直接在button里设置onclick
<h1 id="id1">My Heading 1</h1>
<button type="button" onclick="document.getElementById('id1').style.color='red'">
点击这里！</button>
3.2.2稍复杂，但好懂
<h1 id="one">平帅真的牛批</h1>
<button onclick="myfunction()">点击这里</button>
<script>
function myfunction(){
document.getElementById("one").style.color=("red");
}
</script>
按钮点击改变.png
4.DOM 事件
4.1点击文字改变内容
<h1 onclick="this.innerHTML='谢谢'">请点击该文字</h1>
<h1 onclick="changetext(this)">请点击文字</h1>
<script>
function changetext(id){
id.innerHTML="谢谢！";
}
</script>
上面代码使用了2中方法来显示，第一种简便，直接在onclick中用this.innerHTML。第二种用function，稍复杂，但是好懂。
4.2向button分配onclick事件
<p>点击按钮就可以执行<em>displayDate()</em> 函数。</p>
<button id="one">点击这里</button>
<p id="two"></p>
<script>
document.getElementById("one").onclick=function(){displayDate()};
function displayDate(){
document.getElementById("two").innerHTML=Date();
}
</script>
相比下面不同的是没有在button中设置onclick，而是在<script>中为button分配一个onclick事件。
<p>点击按钮就可以执行
<em>displayDate()</em> 函数。</p>
<button onclick="displayDate()">点击这里</button>
<p id="demo"></p>
<script>
function displayDate() {
document.getElementById("demo").innerHTML = Date();
}
</script>
<p id="demo"></p>
4.3 onload (重载)和 onunload(空载) 事件
onload 和 onunload 事件会在用户进入或离开页面时被触发。
onload 事件可用于检测访问者的浏览器类型和浏览器版本，并基于这些信息来加载网页的正确版本。
onload 和 onunload 事件可用于处理 cookie。
<p>提示框会告诉你，浏览器是否已启用 cookie。</p>
<script>
function checkCookies() {
if (navigator.cookieEnabled == true) {
alert("已启用cookie")
}
else {
alert("未启用cookie")
}
}
</script>
onload和onUnload事件.png
4.4 onchange事件
当用户改变输入字段的内容时，会调用 upperCase() 函数
请输入英文字符：
<input type="text" id="fname" onchange="myFunction()">
<p>当您离开输入字段时，会触发将输入文本转换为大写的函数。</p>
<script>
function myFunction() {
var x = document.getElementById("fname");
x.value = x.value.toUpperCase();
}
</script>
onchange事件.png
4.5 onmouseover(鼠标进入时) 和 onmouseout(鼠标移出时) 事件
比较好理解，就是对div进行设置了onmouseover和onmouseout，然后在<script>中用function来对div进行修改。。(自己理解)
<style>
div{
background-color:green;width:120px;height:20px;padding:40px;color:#ffffff;
}
</style>
</head>
<body>
<div onmouseover="mOver(this)" onmouseout="mOut(this)">把鼠标移到上面</div>
<script>
function mOver(obj) {
obj.innerHTML = "谢谢"
}
function mOut(obj) {
obj.innerHTML = "把鼠标移到上面"
}
</script>
</body>
建议去看看http://www.w3school.com.cn/js/js_htmldom_events.asp
4.6 onmousedown(鼠标按住)和onmouseup(鼠标放开)事件
与4.5的onmouseover 和 onmouseout 事件用法一样，共通的。
<style>
div{
background-color:green;color:#ffffff;width:90px;height:20px;padding:40px;font-size:12px;
}
</style>
</head>
<body>
<div onmousedown="mDown(this)" onmouseup="mUp(this)">请点击这里</div>
<script>
function mDown(obj) {
obj.style.backgroundColor = "#1ec5e5";
obj.innerHTML = "请释放鼠标按钮"
}
function mUp(obj) {
obj.style.backgroundColor = "green";
obj.innerHTML = "请按下鼠标按钮"
}
</script>
</body>
4.7 一个连续的点击事件
这个可以认真看看
<div onclick="myfunction(this)">请点击</div>
<script>
function myfunction(obj){
if(obj.innerHTML=="再见")
{
obj.style.display="none";
}
else if(obj.innerHTML=="谢谢")
{
obj.innerHTML="再见";
}
else if(obj.innerHTML=="请点击<br>再次点击<br>再点一次")
{
obj.innerHTML="谢谢";
}
else if(obj.innerHTML=="请点击<br>再次点击")
{
obj.innerHTML=obj.innerHTML+"<br>再点一次";
}
else if(obj.innerHTML=="请点击")
{
obj.innerHTML=obj.innerHTML+"<br>再次点击";
}
}
</script>
网友评论