#容器 {

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;

}

1、getElementsByTagName

你好世界!

DOM非常有用。

这个例子描述了 getElementsByTagName 的方法。

2、getElementsById

你好世界!

3、getElementsByClassName

你好世界!

DOM非常有用。

这个例子描述了 getElementsByTagName 的方法。

4、显示表单中的每个元素的值

First name:

Last name:

单击“Try it-4”以显示表单中的每个元素的值。

Try it-4

5、改变HTML样式

Hello World!

Hello World!

6、

点击、改变

click-6！

7、创建一个动画容器

click-7!

8、点击、改变

嗨！

嗨！

9、显示时间

Try it-9

10、onmouseover, onmousedown, onmouseup and onclick事件

11、本例使用addEventListener()方法向同一个按钮添加两个单击事件

Try it-11

12、调整

这个示例在窗口对象上使用addEventListener()方法。

尝试调整此浏览器窗口的大小以触发“调整大小”事件处理程序。

13、利用addEventListener传递参数

点击按钮进行计算5*7

Try it-13!

14、removeEventListener()方法

//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 + "
";

}

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)}

网页效果图：

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 代码如下:

JavaScript基础15——js的DOM对象

关于JS的一些代码效果图

关于JS的一些代码效果图 1.几乎所有DOM元素都有innerText.innerHTML属性(注意大小写),分别是元素标签内内容的文本表示形式和HTML源代码,这两个属性是可读可写的. 需要注意的是 ...

JavaScript DOM高级程序设计 3&period;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是什么,翻了各种文档, ...

随机推荐

iOS开发-文件管理(一)

iOS开发-文件管理(一) 一.iOS中的沙盒机制 iOS应用程序只能对自己创建的文件系统读取文件,这个独立.封闭.安全的空间,叫做沙盒.它一般存放着程序包文件(可执行文件).图片.音频.视频.pli ...

lintcode ：Count 1 in Binary 二进制中有多少个1

题目: 二进制中有多少个1 49% 通过 计算在一个 32 位的整数的二进制表式中有多少个 1. 样例 给定 32 (100000),返回 1 给定 5 (101),返回 2 给定 1023 (111 ...

Mac OS X 10&period;10 Yosemite PHP 5&period;5&period;14 free type support fix

通过将php将至5.4来勉强支持freetype扩展,不推荐此方法 after upgrading to new Mac OS X Yosemite, i noticed that free type ...

NDEF-NFC数据交换格式

为实现NFC标签.NFC设备以及NFC设备之间的交互通信,NFC论坛(NFC FROUM)定义了称为NFC数据交换格式(NDEF)的通用数据格式.NDEF是轻量级的紧凑的二进制格式,可带有URL,vC ...

Spark源码分析之Spark Shell(下)

继上次的Spark-shell脚本源码分析,还剩下后面半段.由于上次涉及了不少shell的基本内容,因此就把trap和stty放在这篇来讲述. 上篇回顾:Spark源码分析之Spark Shell(上 ...

Java基础20：Java8新特性终极指南

更多内容请关注微信公众号[Java技术江湖] 这是一位阿里 Java 工程师的技术小站,作者黄小斜,专注 Java 相关技术:SSM.SpringBoot.MySQL.分布式.中间件.集群.Linux ...

window下的计划任务

0x00前言: 这几天看了看信息安全就业的面试题,其中有一条是计划任务如何设置,好几个月前稍微接触了,但是很久没用差不多都忘了>_

安装cmake

$ sudo apt-get install build-essential$ wget http://www.cmake.org/files/v3.11/cmake-3.11.3.tar.gz$ t ...

Fiddler抓包7-post请求(json)

前言上一篇讲过get请求的参数都在url里,post的请求相对于get请求多了个body部分,本篇就详细讲解下body部分参数的几种形式. 一.body数据类型 常见的post提交数据类型有四种: 1 ...

Push to origin&sol;master was rejected (Git提交错误)&lpar;转&rpar;

[问题描述] 在使用Git Push代码的时候,会出现 Push to origin/master was rejected 的错误提示. 在第一次提交到代码仓库的时候非常容易出现,因为初始化的仓库和 ...