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

随机推荐

Ubuntu如何安装vncserver
Ubuntu上安装和配置vncserver,然后通过客户端进行连接,就能够使用图像界面的方式来运行上面的软件了. 1.使用apt-cache search vncserver命令搜索可以用来安装vnc ...
Lesson 2-1 （数据结构，序列通用的操作）
2.0 数据结构 --- 数据结构是以某种方式组合起来的数据元素集合. --- python的常见的数据结构 2.1 序列(sequence) --- 序列中的每个元素都有编号,即索引(也称为下标). ...
设计模式 — 简单工厂模式（staticFactory）
这篇博文介绍简单工厂模式,设计模式并不是固定的二十三种,不同的书介绍的可能有出入,这篇介绍的简单工厂模式在有些书上就忽略不介绍了.设计模式是一套被反复使用的.多数人知晓的.经过分类编目的.代码设计经验 ...
HTTP协议详解及http1.0与http1.1http2.0的区别
HTTP协议介绍 http(超文本传输协议)是一个属于应用层的面向对象的协议,由于其简捷.快速的方式,适用于分布式超媒体信息系统.特点: (1)支持客户/服务器模式. HTTP是一个客户端和服务器端请 ...
为什么要使用getters和setters/访问器？
Why use getters and setters/accessors? 实际上会有很多人问这个问题....尤其是它成为Coding Style中一部分的时候. 文章出自LBushkin的回答 T ...
js 屏蔽政治关键字
一般情况下,用户输入评论提交到后台的同时,在后台进行关键字过滤,昨天看到了一个js关键字过滤的方法,记录下. 方法很简单,先把需要过滤的关键字做成数组, 在for循环数组判断有没有匹配. ok,先来个 ...
公众号用户发送消息后台PHP回复没有反应的解决办法
1.问题:微信公众平台官方提供下载的示例代码中,使用$postStr =$GLOBALS["HTTP_RAW_POST_DATA"];来获取微信服务器推送的消息数据.但是有的开发者 ...
MongoDB,从数组中删除对象
{ _id: 5150a1199fac0e6910000002, name: 'some name, items: [{ id: 23, name: 'item name 23' },{ id: 24 ...
手把手带你入门kubernetes部署
实验环境准备 k8s-master 192.168.2.156 k8s-node节点 192.168.2.161 Ps:两台保证时间同步,firewalld防火墙关闭,selinxu关闭,系统 ...
测试工作之--adb代码
1.抓log方法 (bat文件) mkdir D:\logcatset /p miaoshu=请描述操作:adb logcat -v threadtime > D:\logcat\%miaosh ...

JS HTML DOM代码(1)

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

随机推荐

热门专题