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是什么,翻了各种文档, ...

随机推荐

jssdk防覆盖
防覆盖 var isFromTuia = (function () { var tuiaDomains = ['tuisnake', 'localhost'] function GetUrlDomai ...
Python爬虫基础之Cookie
一.Cookie会话简单地说,cookie就是存储在用户浏览器中的一小段文本文件.Cookies是纯文本形式,它们不包含任何可执行代码.一个Web页面或服务器告之浏览器来将这些信息存储并且基于一系列 ...
WPF 10天修炼第十天- WPF数据绑定
WPF数据绑定数据绑定到元素属性是将源对象指定为一个WPF元素,并且源属性是一个依赖属性,依赖属性内置了变更通知.当改变源对象依赖属性值之后,绑定目标可以立即得到更新,开发人员不需要手动编写响应事件 ...
【转载】django 过滤器、日期格式化参数
过滤器相关: 一.形式:小写{{ name | lower }} 二.串联:先转义文本到HTML,再转换每行到标签{{ my_text|escape|linebreaks }} 三.过滤器的参数显示 ...
运行maven命令的时候出现jre不正确
出错详情: Unable to locate the Javac Compiler in: C:\Program Files\Java\jre1.6.0_07\..\lib\tools.jar Ple ...
ios访问web页面<div>点击事件不起效果，以及alert()显示url的解决办法
ios访问web页面<div>点击不起效果,在其div上添加style=”cursor:pointer:“ jquery web页面动态append()事件调用方法:$(document) ...
「JOISC 2017 Day 3」幽深府邸
题解: 和hnoi2018day2t1基本一样我想了半小时想出了一个很麻烦的做法写了之后发现假掉了刚开始想的是先预处理出每个门要打开至少要在左边的哪个点$L[]$,右边的哪个点$R[]$ 对每 ...
.Net Core小技巧 - Swagger适配虚拟目录及二级目录
前言随着前后端分离模式与微服务架构的出现,Web API变得越来越重要及普遍.而后出现的网关技术,使开发者更倾向于使用二级/多级目录来暴露Web API,一是暴露的端口更少,方便管理:二是在网关中可 ...
2018-2019-2 网络对抗技术 20165239Exp3 免杀原理与实践
2018-2019-2 网络对抗技术 20165239 Exp3 免杀原理与实践 win10 ip地址 192.168.18.1 fenix ip地址为 192.168.18.128 (1)杀软是如何 ...
HEX SDUT 3896 17年山东省赛D题
HEX SDUT 3896 17年山东省赛D题这个题是从矩形的左下角走到右上角的方案数的变形题,看来我对以前做过的题理解还不是太深,或者是忘了.对于这种题目,直接分析它的性质就完事了.从(1,1)走到 ...

JS HTML DOM代码(1)

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

随机推荐

热门专题