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>

网页效果图：

JS HTML DOM代码(1)的更多相关文章

js的dom测试及实例代码
js的dom测试及实例代码一.总结一句话总结: 1.需要记得创建标签和创建文本节点都是document的活:document.createTextNode("Rockets的姚明&q ...
js的DOM对象
1.js的Array对象 ** 创建数组(三种) - var arr1 = [1,2,3]; ...
python学习笔记十三 JS，Dom（进阶篇）
JS介绍 JavaScript 是属于网络的脚本语言!JavaScript 被数百万计的网页用来改进设计.验证表单.检测浏览器.创建cookies,以及更多的应用:JavaScript 是因特网上最流 ...
框架操作DOM和原生js操作DOM比较
问题引出对于Angular和React操作DOM的速度,和原生js操作DOM的速度进行了一个比较: 一个同学做的demo 代码如下: <!DOCTYPE html> <html n ...
JavaScript基础15——js的DOM对象
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
关于JS的一些代码效果图
关于JS的一些代码效果图 1.几乎所有DOM元素都有innerText.innerHTML属性(注意大小写),分别是元素标签内内容的文本表示形式和HTML源代码,这两个属性是可读可写的. 需要注意的是 ...
JavaScript DOM高级程序设计 3.6 实例将HTML代码转换成DOM代码（附源码）--我要坚持到底！
作为一名Web开发者,最讨厌的事情就是重复性任务,摆脱乏味的日常重复性事物的一种方法,是借助可重用的对象或者说与你现在建立的ADS库类似的库,另外一种让事情变得有意思,且能够加速开发进程的方式是编写能 ...
JS的DOM操作及动画
JS的DOM操作DOM:Document Object ModelBOM:Bowers(浏览器) Object Model找到元素:var a=document.getElementById(&quo ...
DOM是什么？有什么用处？js与DOM啥关系？
本文转载于:https://blog.csdn.net/u012155729/article/details/78135393 转载仅供自己后期学习 DOM简介大家都想知道dom是什么,翻了各种文档, ...

随机推荐

深入Java虚拟机：多态性实现机制——静态分派与动态分派
方法解析 Class文件的编译过程中不包含传统编译中的连接步骤,一切方法调用在Class文件里面存储的都只是符号引用,而不是方法在实际运行时内存布局中的入口地址.这个特性给Java带来了更强大的动态扩 ...
java常用类：1。包装类（以Integer类为例）2.String类 3.StringBuffer
包装类把八大基本数据类型封装到一个类中,并提供属性和方法,更方便的操作基本数据类型. 包装类的出现并不是用于取代基本数据类型,也取代不了. 包装类位于java.lang包中. Number 类 N ...
DDT驱动selenium自动化测试
建两个.py文件分别是是读取xlsx文件内容,一个是测试用例使用ddt驱动获取xlsx文件内容 import xlrd class ParseExcel(object): def __init__( ...
jQuery配合html2canvas 使用时报错 Uncaught (in promise) Provided element is not within a Document
报错代码: 这个函数运行时 function download(){ var element = $("#demo"); //jquery 获取元素 //这里将会报错 html2c ...
Android开发PreferenceActivity 用法的代码
将开发过程中常用的一些内容做个收藏,下面资料是关于Android开发PreferenceActivity 用法的内容,希望对大伙有一些用处.public class Setting extends P ...
HashMap 学习（JDK8）
1.hashmap中hash函数的实现中,异或运算操作的结果是什么,为什么要做这样的异或运算 static final int hash(Object key) { int h; return (ke ...
Fisher–Yates shuffle 洗牌算法
Fisher-Yates shuffle 是一种生成有限序列的随机排列的算法--简单地说,该算法可以对序列进行混排.本人能力有限,且懒.不会扒论文去研究该算法在数学上的证明,只能抄袭网上的博客总结一遍 ...
python 的os.getenv("PATH")和os.environ.get("PATH")的区别
os.environ(x [,x]) raises an exception if the environmental variable does not exist. os.getenv(x) do ...
蓝桥杯卡片换位(bfs)
卡片换位你玩过华容道的游戏吗?这是个类似的,但更简单的游戏.看下面 3 x 2 的格子在其中放5张牌,其中A代表关羽,B代表张飞,* 代表士兵.还有一个格子是空着的. 你可以把一张牌移动到相邻的空 ...
小程序app.onLaunch中获取用户信息，index.onLoad初次载入时取不到值的问题
问题描述: //app.js App({ globalData:{ nickname:'' }, onLaunch: function () { let that=this; //假设已经授权成功 w ...

JS HTML DOM代码(1)

JS HTML DOM代码(1)的更多相关文章

随机推荐

热门专题