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）