JS-DOM ~ 01. 了解DOM,动手做一下就明白了!/鼠标事件(好吧 其实我卡了三天
DOM概述
html加载完毕,渲染引擎会在内存中把html文档生成一个DOM树,getElementById是获取内DOM上的元素,然后操作的时候修改的是该元素的属性
体验事件/事件三要素
1.事件源(引发后续事件的标签
2.事件(js已经定义好,直接使用
3.事件驱动程序(对样式和html的操作)(DOM操作 需求:点击盒子,弹出对话框alert(1)
步骤:-->
1.获取事件源(document.getElementById("box")
2.绑定事件 (事件源.事件 = function(){ 事件驱动程序 }
3.书写事件驱动程序。
<body>
<div id="box" style="width:100px; height:100px ;background-color:blue ;cursor: pointer;"></div> <script>
// 1.获取事件源(document.getElementById("box")
var div = document.getElementById("box");
// 2.绑定事件 (事件源.事件 = function(){ 事件驱动程序 })
div.onclick = function () {
// 3.书写事件驱动程序。
alert(1);
}; </script>
初试 DOM
- 执行事件步骤
A) 获取事件源(有五种)/也可通过节点
- document.getElementsById() // 通过ID
- document.getElementsByTagName() // 通过标签名
a) 获取的一个数组
3. document.getElementsByClassName() [0] // 通过类名 ,没有获取到则返回空数组
4. document.getElementsByName()[0] // 不能直接操作数组
5. document.getElementsByTagNameaNS()[0]
B) 绑定事件
- 事件源.事件 = function(){事件处理函数}
- 函数不要有返回值,调用的时候不要加括号
1. 事件源.事件 = fn; 2. function fn(){ 3. 事件; 4. }
3. 行内绑定
a) 外部定义好,行内直接调用
C) 书写事件驱动程序
- 操作标签的样式和样式
- 事件源.style.样式属性 = ‘属性值’
- 属性值要用引号括起来
windows.onload:
a) 页面加载完毕(文本和图片都加载完毕)的时候触发的事件
b) js和html同步加载
c) 使用元素在定义之前,容易出bug
d) 作用是防止使用元素在定义元素之前出的bug
- 通过类名控制标签属性
a) 替换类名和添加类名
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title> <style>
* {
margin: 0;
padding: 0;
}
.top-banner {
background-color: #7dff51;
height:80px;
}
.w {
width: 1210px;
margin:10px auto;
position: relative;
}
img {
width: 1210px;
height: 80px;
background-color: #37c2fb;
}
a {
position: absolute;
top: 5px;
right: 5px;
color: #FFFFFF;
background-color: #000;
text-decoration: none;
width: 20px;
height: 20px;
font:700 14px/20px "simsum";
text-align: center;
}
.hide {
display:none !important;
} </style> </head>
<body> <div class="top-banner" id="topBanner">
<div class="w">
<img src="" alt=""/>
<a href="#" id="closeBanner">x</a>
</div>
</div> <script>
// 需求:点击案例,隐藏盒子
// 步骤:
// 1:获取事件源
// 2:绑定事件
// 3:书写事件驱动程序
// 1.获取事件源
var closeBanner = document.getElementById("closeBanner");
var topBanner = document.getElementById("topBanner");
// 2.绑定事件
closeBanner.onclick= function(){
// 3.书写事件驱动
topBanner.className = "hide"; // 替换旧类名
// topBanner.className +="hide" ; // 保留原类名
// topBanner.style.display = "none" ; } </script> </body>
</html>
体验:点击右上角的X ,关闭横福广告
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
// 让页面加载完毕后再执行本代码
window.onload = function() {
// 需求:鼠标放到img上,修改图片路径src
// 1.获取事件源
var img = document.getElementById("box");
// 2.绑定事件
img.onmouseout = function(){
// 3.设定驱动程序来修改图片地址
this.src = "image/image1.png" ;
}; var img = document.getElementById("box");
img.onmouseover = function(){
this.src = "image/image2.png" ;
}
} </script>
</head>
<body> <img src="data:image/jd1.png" id="box" style="cursor: pointer;border: 1px solid #ccc;"> </body>
</html>
实现鼠标指上去变换图片的特效
什么是DOM和节点
- DOM由节点组成
- 树状模型
- 节点:object类型,是内置对象
a) 每个HTML标签都是一个元素节点
b) 标签中的文字是文字节点
c) 标签的属性是属性节点
4.DOM操作就是操作节点
5.是一套操作html和xml文档的API
访问关系获取
- 节点访问关系是以属性的方式存在的
- .parentNode:获取父节点
- sibling、Next、previous
- .nextElemntSibling
- .previousElementSibing:
- .firstElementFirstSibling
- children();返回指定的子元素结合
- 节点自己.parentNode.Children[index]:得到随意得到兄弟的节点
- parenNode
- children
节点的操作
1. 节点的创建、添加、删除
2. 节点的访问关系都是属性,节点的操作都是函数或者方法
<body>
<div class="box1">
<div class="box2" id="box2"></div>
<div class="box3"></div>
</div>
<script>
//节点的访问关系是以属性形式存在 //1.box1是box的父节点
// var box2 = document.getElementsByClassName("box2")[0];
var box2 = document.getElementById("box2");
console.log(box2.parentNode);
父节点
// 2. nextElementSibling 下一个兄弟节点
console.log ( box2.nextElementSibling );
// firseElementChild 第一个子节点
console.log (box2.parentNode.firstElementChild ) ;
// 所有子节点
console.log( box2.parentNode.childNodes ) ;
console.log(box2.parentNode.children ) ;
下一个节点
创建节点
var 新标签 =document.createElement("标签")
插入节点
1. 父节点.removeChild(子节点)
2. 父节点.appendChild ( ) { }
3. 父节点.insertBefore ( 新节点,已知节点)
. 删除节点
父节点.removeChild(’删除的元素(先获取)’)
父元素.parentNode.removeChild(’要删除的元素’)
. 复制节点
- 新节点 = 要赋值的节点.cloneNode(true/false);
a) true:全部复制
b) false:只复制当前节点,里面的内容不复制
2. 创建之后要添加到已有的节点上
3. box.appendchild();
节点属性操作
- 获取属性
a) 元素节点.属性或者元素节点[属性]
b) 元素节点.方法();
- 节点名.setAttribute(“id”,“aa”): 添加一id=“aa”的属性
- 节点名. removeAttribute(”id”);删除ID属性
- 修改class属性要写成className::因为class是关键字
- 节点名
- .innerHTML修改标签中间的文字
<script>
window.onload = function () { var eleNode = document.getElementsByTagName("img")[0]; //属性、赋值获取两种方式
//1.元素节点.属性或者元素节点[属性]
eleNode.src = "image/jd2.png";
eleNode.aaa = "bbb";
console.log(eleNode.aaa);
console.log(eleNode.src);
console.log(eleNode.tagName);
console.log(eleNode["title"]);
console.log(eleNode["className"]);
console.log(eleNode["alt"]); //2.元素节点.方法();
console.log(eleNode.getAttribute("id"));
eleNode.setAttribute("id","你好");
eleNode.setAttribute("ccc","ddd"); eleNode.removeAttribute("id");
}
</script>
</head>
<body>
<img src="data:image/jd1.png" class="box" title="图片" alt="京东狗" id="aaa"/>
</body>
</html>
节点的属性
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body> <!--<a href="javacript:;">切换</a>-->
<!--<a href="#">切换</a>-->
<a href="http://www.baidu.com" style="margin:10px;display: block" onclick="fn();return false;">切换</a>
<img id="img" src="data:image/1.jpg" width="400px"/> <script>
//需求:点击a链接,img图片切换(行内式)
//步骤:
//1.获取事件源和图片
//2.绑定事件
//3.书写事件驱动程序 //1.获取事件源和图片
// var a = document.getElementsByTagName("a")[0];
// var img = document.getElementById("img");
// //2.绑定事件
// a.onclick = function () {
// //3.书写事件驱动程序
// img.src = "image/2.jpg";
// //return false的目的是禁止a连接跳转;
// return false;
// }
var img = document.getElementById("img");
function fn(){
img.src = "image/2.jpg";
} </script> </body>
</html>
图片切换
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
button {
margin: 10px;
}
div {
width: 200px;
height: 200px;
background-color: pink;
}
.show {
display: block;
}
.hide {
display: none;
}
</style> </head>
<body>
<button id="btn">隐藏</button>
<div> </div> <script>
//需求:点击button,隐藏盒子。改变文字,在点击按钮,显示出来。
//步骤:
//1.获取事件源和相关元素
//2.绑定事件
//3.书写事件驱动程序 //1.获取事件源和相关元素
var btn = document.getElementById("btn");
var div = document.getElementsByTagName("div")[0];
//2.绑定事件
btn.onclick = function () {
//3.书写事件驱动程序
//判断btn的innerHTML属性值,如果为隐藏就隐藏盒子,并修改按钮内容为显示。
//反之,则显示,并修改按钮内容为隐藏
if(this.innerHTML === "隐藏"){
div.className = "hide";
//修改文字(innerHTML)
btn.innerHTML = "显示";
}else{
div.className = "show";
//修改文字(innerHTML)
btn.innerHTML = "隐藏";
}
} </script> </body>
</html>
显示和隐藏盒子
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
body {
font-family: "Helvetica", "Arial", serif;
color: #333;
background: #ccc;
margin: 1em 10%;
} /** {*/
/*margin:0;*/
/*padding: 0;*/
/*}*/
h1 {
color: #333;
background-color: transparent;
} a { display:inline-block;
color: #c60;
background-color: transparent;
font-weight: bold;
text-decoration: none;
}
.box1 img {
margin:10px 15px 20px 0 ;
} /*.box1 {*/
/*width: 520px;*/
/*background-color: #7dff51;*/
/*}*/
</style>
</head>
<body> <h1>这是一个画廊</h1>
<a href="#">点我可以注册</a>
<div>
<div id="box1">
<a href="image/1.jpg" title="美女A">
<img src="data:image/1-small.jpg" width="100">
</a>
<a href="image/2.jpg" title="美女B">
<img src="data:image/2-small.jpg" width="100">
</a>
<a href="image/3.jpg" title="美女C">
<img src="data:image/3-small.jpg" width="100">
</a>
<a href="image/4.jpg" title="美女D">
<img src="data:image/4-small.jpg" width="100">
</a> </div>
<div id="box2">
<a href="#">
<img id="image" src="data:image/placeholder.png" width="450px">
</a>
<p id="des">请点击一张图片</p>
</div>
</div>
点击小图出现大图
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style type="text/css">
body {
font-family: "Helvetica", "Arial", serif;
color: #333;
background-color: #ccc;
margin: 1em 10%;
} h1 {
color: #333;
background-color: transparent;
} a {
color: #c60;
background-color: transparent;
font-weight: bold;
text-decoration: none;
} ul {
padding: 0;
} li {
float: left;
padding: 1em;
list-style: none;
} #imagegallery { list-style: none;
} #imagegallery li {
margin: 0px 20px 20px 0px;
padding: 0px;
display: inline;
} #imagegallery li a img {
border: 0;
}
</style> </head>
<body>
<h2>
美女画廊
</h2>
<a href="#">注册</a>
<ul id="imagegallery">
<li>
<a href="image/1.jpg" title="美女A">
<img src="data:image/1-small.jpg" width="100" alt="美女1"/>
</a>
</li>
<li>
<a href="image/2.jpg" title="美女B">
<img src="data:image/2-small.jpg" width="100" alt="美女2"/>
</a>
</li>
<li>
<a href="image/3.jpg" title="美女C">
<img src="data:image/3-small.jpg" width="100" alt="美女3"/>
</a>
</li>
<li>
<a href="image/4.jpg" title="美女D">
<img src="data:image/4-small.jpg" width="100" alt="美女4"/>
</a>
</li>
</ul> <div style="clear:both"></div> <img id="image" src="data:image/placeholder.png" width="450px"/> <p id="des">选择一个图片</p> <script>
//需求:点击小图片,改变下面的大图片的src属性值。赋值为a链接的href属性值。
//让p标签的innnerHTML属性值,变成a标签的title属性值。
//步骤:
//1.获取事件源和相关元素
//2.绑定事件
//3.书写事件驱动程序 //1.获取事件源和相关元素
//利用元素获取其下面的标签。
var ul = document.getElementById("imagegallery");
var aArr = ul.getElementsByTagName("a");
// console.log(aArr[0]);
var img = document.getElementById("image");
var des = document.getElementById("des");
//2.绑定事件
//以前是一个一个绑定,但是现在是一个数组。for循环绑定
for(var i=0;i<aArr.length;i++){
aArr[i].onclick = function () {
//3.书写事件驱动程序
//修改属性
//this指的是函数调用者,和i并无关系,所以不会出错。
img.src = this.href;
// img.src = aArr[i].href;
des.innerHTML = this.title;
return false;
}
} </script> </body>
</html>
value和innerHtml和innerText
// value:标签的value属性。
//innerHTML:获取双闭合标签里面的内容。(识别标签)
//innerText:获取双闭合标签里面的内容。(不识别标签)(老版本的火狐用textContent)
JS-DOM ~ 01. 了解DOM,动手做一下就明白了!/鼠标事件(好吧 其实我卡了三天的更多相关文章
- JS中级 - 01:DOM节点
1元素属性 1.1childNodes 返回元素的一个子节点的数组 (不推荐,建议用非标准children代替) 提醒:只包含一级子节点,不包含后辈孙级别以下节点. children:返回元素的一 ...
- js基础总结01 --操作DOM
1.选择对象 通过id来选择绑定一个dom节点 :document.getElementById('p1'): 通过类名来绑定一个类数组的对象集合,:document.getElementsByCla ...
- 窥探Vue.js 2.0 - Virtual DOM到底是个什么鬼?
引言 你可能听说在Vue.js 2.0已经发布,并且在其中新添加如了一些新功能.其中一个功能就是"Virtual DOM". Virtual DOM是什么 在之前,React和Em ...
- 原来 CSS 与 JS 是这样阻塞 DOM 解析和渲染的
hello~各位亲爱的看官老爷们大家好.估计大家都听过,尽量将CSS放头部,JS放底部,这样可以提高页面的性能.然而,为什么呢?大家有考虑过么?很长一段时间,我都是知其然而不知其所以然,强行背下来应付 ...
- JS之BOM和DOM(来源、方法、内容、应用)
1.Javascript组成(此文为转载) JavaScript的实现包括以下3个部分: 1)核心(ECMAScript):描述了JS的语法和基本对象. 2)文档对象模型 (DOM):处理网页内容的方 ...
- 【前端知识体系-JS相关】虚拟DOM和Diff算法
1.介绍一下vdom? virtual dom, 虚拟DOM 使用JS来模拟DOM结构 DOM变化的对比,放在JS层来做(图灵完备语言),提高效率 DOM操作非常昂贵(消耗性能) 2.Snabbdom ...
- js动态监听dom变化
原生js 动态监听dom变化,根据不同的类型绑定不同的处理逻辑 // Firefox和Chrome早期版本中带有前缀 var MutationObserver = window.MutationO ...
- js中BOM与DOM的概念与区别
1.BOM 浏览器对象模型 提供了独立于内容而与浏览器窗口进行交互的对象.描述了与浏览器进行交互的方法和接口,可以对浏览器窗口进行访问和操作,譬如可以弹出新的窗口,改变状态栏中的文本,对Cookie的 ...
- js之BOM和DOM
今天我们来学习js中的一些基础的操作. 一.BOM对象 BOM(浏览器对象模型),可以对浏览器窗口进行访问和操作.使用 BOM,开发者可以移动窗口.改变状态栏中的文本以及执行其他与页面内容不直接相 ...
随机推荐
- str_replace导致的注入问题汇总
研究了下replace的注入安全问题. 一般sql注入的过滤方式就是引用addslashes函数进行过滤. 他会把注入的单引号转换成\',把双引号转换成\",反斜杠会转换成\\等 写一段ph ...
- sed流编辑器
一.前言 (一).sed 工作流程 sed 是一种在线的.非交互式的流编辑器,它一次处理一行内容.处理时,把当做前处理的行存储在临时缓存区中,成为“模式空间”(pattern space),接着用se ...
- GStreamer流媒体知识介绍
GStreamer框架 1.GStreamer是什么? 众所周知,Microsoft's Windows和Apple's MacOS对多媒体设备.多媒体创作.播放和实时处理等方面都有很好的支持,而Li ...
- luogu1330_封锁阳光大学 图的遍历
传送门 解释:(转自洛谷题解) 首先,肯定要明确一点,那就是这个图是不一定联通的.于是,我们就可以将整张图切分成许多分开的连同子图来处理.然而最重要的事情是:如何处理一个连通图? 乍看下去,似乎无从下 ...
- javaScript今日总结
javascript简单介绍ECMAScript 1.语法 2.变量:只能使用var定义,如果在函数的内容使用var定义,那么它是一个局部变量,如果没有使用var它是一个全局的.弱类型! 3.数据类型 ...
- webgl(three.js)实现室内定位,楼宇bim、实时定位三维可视化解决方案
(写在前面,谈谈物联网展会)上次深圳会展中心举行物联网展会,到了展会一看,80%以上的物联网应用都是在搞RFID,室内定位,我一度怀疑物联网落地方案的方向局限性与市场导向,后来多方面了解才明白,展会上 ...
- 《统计学习方法》极简笔记P2:感知机数学推导
感知机模型 输入空间是$\chi\subseteq\mathbb{R}^n$,输出空间是$y={+1,-1}$ 感知机定义为:$f(x)=sign(wx+b)$ 感知机学习策略 输入空间任一点$x_0 ...
- 【数学+思维】ZZULIOJ 1531: 小L的区间求和
题目链接 题目描述 在给定的一个整数序列中,小L希望找到一个连续的区间,这个区间的和能够被k整除,请你帮小L算一下满足条件的最长的区间长度是多少. 输入 第一行输入两个整数n.k.(1 <= n ...
- 如何用Python实现敏感词的过滤
题目要求如下: 从文件解析敏感词,从终端获取用户输入.根据敏感词对用户输入进行过滤.这里过滤需要考虑不止一个过滤词:即将读取的所有过滤词,放进一个列表,用屏蔽词检索用户输入,如果有屏蔽词,则将其替换为 ...
- 二.安全NA之ASA基础
一.ASA常用命令 show run interface #查看接口配置 show ip address #查看IP地址 show conn #查看防火墙状态信息,U代表up:I,代表进流量:O,代表 ...