JS HTML DOM代码(1)

<!DOCTYPE html>
<html>
<style type="text/css">
    #容器 {
    width: 400px;
    height: 400px;
    position: relative;
    background: yellow;
    }
    #动画 {
    width: 50px;
    height: 50px;
    position: absolute;
    background: red;
    }
    #myDIV_14{
      background-color: coral;
      border: 1px solid;
      padding: 50px;
      color: white;
      width: 500px;
    }
</style>
<head>
  <meta charset="utf-8">
    <title>DOM</title>
    <link rel="stylesheet" type="text/css" href="">
</head>
<body style="height: 4000px">
<p>1、getElementsByTagName</p>
<p>你好世界!</p>
<p>DOM非常有用。</p>
<p>这个例子描述了 <b>getElementsByTagName</b> 的方法。</p>
<p id="demo1"></p><hr>

<p>2、getElementsById</p>
<p>你好世界!</p>
<div id="main">
  <p>DOM非常有用。</p>
    <p>这个例子描述了 <b>getElementsByTagName</b> 的方法。</p>
</div>
<p id="demo2"></p><hr>

<p>3、getElementsByClassName</p>
<p>你好世界!</p>
<p class="介绍">DOM非常有用。</p>
<p class="介绍">这个例子描述了 <b>getElementsByTagName</b> 的方法。</p>
<p id="demo3"></p><hr>

<p>4、显示表单中的每个元素的值</p>
<form id="表单" action="form_action.asp">
  First name: <input type="text" name="fname" value="唐纳德"><br>
  Last name: <input type="text" name="lname" value="杜克"><br><br>
  <input type="submit" value="Submit">
</form>
<p>单击“Try it-4”以显示表单中的每个元素的值。</p>
<button onclick="myFunction_4()">Try it-4</button>
<p id="demo4"></p><hr>

<p>5、改变HTML样式</p>
<p id="p1">Hello World!</p>
<p id="p2">Hello World!</p><hr>

<p>6、</p>
<h1 id="id1">点击、改变</h1>
<button type="button" onclick="document.getElementById('id1').style.color='red'">click-6！</button>
<hr>

<p>7、创建一个动画容器</p>
<button onclick="myMove()">click-7!</button><br><br>
<div id="容器">
  <div id="动画"></div>
</div><hr>

<p>8、点击、改变</p>
<h1 onclick="this.innerHTML='你好！'">嗨！</h1>
<h1 onclick="changeText(this)">嗨！</h1><hr>

<p>9、显示时间</p>
<button id="myBtn_9">Try it-9</button>
<p id="time"></p><hr>

<p>10、onmouseover, onmousedown, onmouseup and onclick事件</p>
<div onmouseover="mOver(this)" onmouseout="mOut(this)" style="background-color: red;width: 120px;height: 20px;padding: 40px;">Mouse Over</div><br><br>
<div onmousedown="mDown(this)" onmouseup="mUp(this)" style="background-color: red;width: 120px;height: 20px;padding: 40px;"> Mouse Click</div><hr>

<p>11、本例使用addEventListener()方法向同一个按钮添加两个单击事件</p>
<button id="myBtn_11">Try it-11</button><hr>

<p>12、调整</p>
<p>这个示例在窗口对象上使用addEventListener()方法。<br>
尝试调整此浏览器窗口的大小以触发“调整大小”事件处理程序。</p>
<p id=demo12></p><hr>

<p>13、利用addEventListener传递参数</p>
<p>点击按钮进行计算5*7</p>
<button id="myBtn_13">Try it-13!</button>
<p id="demo13"></p><hr>

<p>14、removeEventListener()方法</p>
<div id="myDIV_14">这个div元素有一个onmousemove事件处理程序,
   <p>每当您将鼠标移动到这个橙色区域内时，它都会显示一个随机数。<p>
   <p>单击按钮删除DIV的事件处理程序</p>
   <button onclick="removeHandler_14()" id="myBtn_14">Try it-14</button>
</div>
<p id="demo_14"></p><hr>


<script>
//HTML DOM是用于获取、更改、添加或删除HTML元素的标准。
//1
var x1 = document.getElementsByTagName("p");
document.getElementById("demo1").innerHTML = 
'第一段(索引0)为: ' + x1[0].innerHTML;

//2
var x2 = document.getElementById("main");
var y2 = x2.getElementsByTagName("p");
document.getElementById("demo2").innerHTML = 
'"main"中的第一段(索引0)是: ' + y2[0].innerHTML;

//3
var x3 = document.getElementsByClassName("介绍");
//var x3 = document.querySelectorAll("p.介绍");
//如果您想找到所有与指定的CSS选择器(id、类名、类型、属性、属性值等)匹配的HTML元素，请使用querySelectorAll()方法
document.getElementById("demo3").innerHTML = 
'第1段(索引0)，class="介绍": ' + x3[0].innerHTML;

//4
function myFunction_4() {
    var x4 = document.forms["表单"];
    var text = "";
    var i;
    for (i = 0; i < x4.length ;i++) {
        text += x4.elements[i].value + "<br>";
    }
    document.getElementById("demo4").innerHTML = text;
}

//5
document.getElementById("p2").style.color = "blue";
document.getElementById("p2").style.fontFamily = "Arial";
document.getElementById("p2").style.fontSize = "larger";

//6

//7
function myMove() {
  var elem = document.getElementById("动画");   
  var pos = 0;
  var id = setInterval(frame, 5);
  function frame() {
    if (pos == 350) {
      clearInterval(id);
    } else {
      pos++; 
      elem.style.top = pos + 'px'; 
      elem.style.left = pos + 'px'; 
    }
  }
}

//8
function changeText(id){
  id.innerHTML = "你好！";
}

//9
document.getElementById("myBtn_9").addEventListener("click", displayDate, false);
function displayDate(){
  document.getElementById("time").innerHTML = Date();
}

//10
function mOver(obj1){
  obj1.innerHTML = "Thank You"
}
function mOut(obj1){
  obj1.innerHTML = "Mouse Over Me"
}
function mDown(obj2){
  obj2.style.backgroundColor = "blue";
  obj2.innerHTML = "Release Me";
}
function mUp(obj2){
  obj2.style.backgroundColor = "red";
  obj2.innerHTML = "Thank You";
}

//11
var x = document.getElementById("myBtn_11");
x.addEventListener("click", myFunction, false);
x.addEventListener("click", someOtherFunction, false);
function myFunction() {
  alert ("Hello World!");
}
function someOtherFunction() {
  alert ("这个函数也执行了!");
}

//12
window.addEventListener("resize", myFunction_12);
function myFunction_12(){
    document.getElementById("demo12").innerHTML = Math.random();
}

//13
var p1 = 5;
var p2 = 7;
document.getElementById("myBtn_13").addEventListener("click", function(){myFunction_13(p1, p2)}, false);
function myFunction_13(a, b){
  var result = a*b;
  document.getElementById("demo13").innerHTML = result;
}

//14
document.getElementById("myDIV_14").addEventListener("mousemove", myFunction_14)
function myFunction_14() {
    document.getElementById("demo_14").innerHTML = Math.random();}
function removeHandler_14() {
    document.getElementById("myDIV_14").removeEventListener("mousemove", myFunction_14)}


</script>
</body>
</html>
网页效果图：
猜你喜欢
