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

随机推荐

springboot接口返回封装与异常控制
首先,返回有两个状态,status和code status标识response的状态,有2个值:0成功,-1服务错误. code跟业务有关,可以有各种数值,99999服务未知异常,10000参数异常, ...
MySQL时区错误导致server time zone value 'ÖÐ¹ú±ê×¼Ê±¼ä' 错误
时区错误由于中国是东八区,跟mysql配置不同,需要修改: 管理员登录MySQL OK成功
sql查找某一列中某一数值出现次数大于3的记录的前3条
SELECT * FROM table GROUP BY column HAVING COUNT(column)>=3 ORDER BY column DESC LIMIT 0,3;
写交互式脚本时，遇到到报错：not a regular file
场景:在写两台ubuntu之间需要交互式登录操作shell脚本.就是在ubantu A上,做点什么事,然后远程到ubuntu B上进行操作,shell脚本存放在ubuntu A上. 我遇到这个报错:n ...
2018-2019-2 网络对抗技术 20165328 Exp6 信息收集与漏洞扫描
目录实验要求基础问题回答: 实验过程: 各种搜索技巧的应用及DNS IP注册信息的查询基本扫描技术漏洞扫描--使用OpenVAS 实验感想实验要求 (1)各种搜索技巧的应用 (2)DNS I ...
.NET英文技术文章导读(2017-02-09)
关键字:Docker..NET Core.Apache.ASP.NET Core.Logic App.C#7..NET Standard 使用Docker和.NET Core构建DockNetFi ...
vs2015创建类时增加默认注释
我是vs2015修改 C:\Program Files (x86)\Microsoft Visual Studio 14.0\Common7\IDE\ItemTemplatesCache\CSharp ...
mybatis中有趣的符号#与$
${ }是字符串替换,相当于直接显示数据,#{ }是预编译处理,相当于对数据加上双引号即#是将传入的值当做字符串的形式,先替换为?号,然后调用PreparedStatement的set方法来赋值,而 ...
绕最新版安全狗-附上sqlmap的tamper
在t00ls 里面我发的,放博客分享记录一下小菜写文章,太菜希望大佬放过我! 主要分享一下,绕狗的思路环境:windows7 + phpstudy + safedog v4.0 + Mysq ...
ELK logstash geoip值为空故障排查
首先我们用的是elasticsearch+kibana+logstash+filebeat 客户端filebeat收集日志后经过服务端logstash规则处理后储存到elasticsearch中,在k ...

JS HTML DOM代码(1)

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

随机推荐

热门专题