#容器 {
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;
}
DOM1、getElementsByTagName
你好世界!
DOM非常有用。
这个例子描述了 getElementsByTagName 的方法。
2、getElementsById
你好世界!
DOM非常有用。
这个例子描述了 getElementsByTagName 的方法。
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()方法
每当您将鼠标移动到这个橙色区域内时,它都会显示一个随机数。
单击按钮删除DIV的事件处理程序
Try it-14
//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.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.10 Yosemite PHP 5.5.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/master was rejected (Git提交错误)(转)
[问题描述] 在使用Git Push代码的时候,会出现 Push to origin/master was rejected 的错误提示. 在第一次提交到代码仓库的时候非常容易出现,因为初始化的仓库和 ...