JS-DOM . 01 了解DOM,动手做一下就明白了！
Posted 明明明明明明明明
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了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.书写事件驱动程序。
1 <body> 2 <div id="box" style="width:100px; height:100px ;background-color:blue ;cursor: pointer;"></div> 3 4 <script> 5 // 1.获取事件源（document.getElementById("box"） 6 var div = document.getElementById("box"); 7 // 2.绑定事件 （事件源.事件 = function(){ 事件驱动程序 }） 8 div.onclick = function () { 9 // 3.书写事件驱动程序。 10 alert(1); 11 }; 12 13 </script>
- 执行事件步骤
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) 替换类名和添加类名
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 7 <style> 8 * { 9 margin: 0; 10 padding: 0; 11 } 12 .top-banner { 13 background-color: #7dff51; 14 height:80px; 15 } 16 .w { 17 width: 1210px; 18 margin:10px auto; 19 position: relative; 20 } 21 img { 22 width: 1210px; 23 height: 80px; 24 background-color: #37c2fb; 25 } 26 a { 27 position: absolute; 28 top: 5px; 29 right: 5px; 30 color: #FFFFFF; 31 background-color: #000; 32 text-decoration: none; 33 width: 20px; 34 height: 20px; 35 font:700 14px/20px "simsum"; 36 text-align: center; 37 } 38 .hide { 39 display:none !important; 40 } 41 42 43 44 </style> 45 46 </head> 47 <body> 48 49 <div class="top-banner" id="topBanner"> 50 <div class="w"> 51 <img src="" /> 52 <a href="#" id="closeBanner">x</a> 53 </div> 54 </div> 55 56 <script> 57 // 需求：点击案例，隐藏盒子 58 // 步骤： 59 // 1：获取事件源 60 // 2：绑定事件 61 // 3：书写事件驱动程序 62 // 1.获取事件源 63 var closeBanner = document.getElementById("closeBanner"); 64 var topBanner = document.getElementById("topBanner"); 65 // 2.绑定事件 66 closeBanner.onclick= function(){ 67 // 3.书写事件驱动 68 topBanner.className = "hide"; // 替换旧类名 69 // topBanner.className +="hide" ; // 保留原类名 70 // topBanner.style.display = "none" ; 71 72 } 73 74 </script> 75 76 </body> 77 </html>
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <script> 7 // 让页面加载完毕后再执行本代码 8 window.onload = function() { 9 // 需求：鼠标放到img上，修改图片路径src 10 // 1.获取事件源 11 var img = document.getElementById("box"); 12 // 2.绑定事件 13 img.onmouseout = function(){ 14 // 3.设定驱动程序来修改图片地址 15 this.src = "image/image1.png" ; 16 }; 17 18 var img = document.getElementById("box"); 19 img.onmouseover = function(){ 20 this.src = "image/image2.png" ; 21 } 22 } 23 24 </script> 25 </head> 26 <body> 27 28 <img src="image/jd1.png" id="box" style="cursor: pointer;border: 1px solid #ccc;"> 29 30 </body> 31 </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. 节点的访问关系都是属性，节点的操作都是函数或者方法
1 <body> 2 <div class="box1"> 3 <div class="box2" id="box2"></div> 4 <div class="box3"></div> 5 </div> 6 <script> 7 //节点的访问关系是以属性形式存在 8 9 //1.box1是box的父节点 10 // var box2 = document.getElementsByClassName("box2")[0]; 11 var box2 = document.getElementById("box2"); 12 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="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="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>
<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="image/1-small.jpg" width="100" alt="美女1"/>
</a>
</li>
<li>
<a href="image/2.jpg" title="美女B">
<img src="image/2-small.jpg" width="100" alt="美女2"/>
</a>
</li>
<li>
<a href="image/3.jpg" title="美女C">
<img src="image/3-small.jpg" width="100" alt="美女3"/>
</a>
</li>
<li>
<a href="image/4.jpg" title="美女D">
<img src="image/4-small.jpg" width="100" alt="美女4"/>
</a>
</li>
</ul>
<div style="clear:both"></div>
<img id="image" src="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>
1 <!DOCTYPE html> 2 <html> 3 <head lang="en"> 4 <meta charset="UTF-8"> 5 <title></title> 6 <style type="text/css"> 7 body { 8 font-family: "Helvetica", "Arial", serif; 9 color: #333; 10 background-color: #ccc; 11 margin: 1em 10%; 12 } 13 14 h1 { 15 color: #333; 16 background-color: transparent; 17 } 18 19 a { 20 color: #c60; 21 background-color: transparent; 22 font-weight: bold; 23 text-decoration: none; 24 } 25 26 ul { 27 padding: 0; 28 } 29 30 li { 31 float: left; 32 padding: 1em; 33 list-style: none; 34 } 35 36 #imagegallery { 37 38 list-style: none; 39 } 40 41 #imagegallery li { 42 margin: 0px 20px 20px 0px; 43 padding: 0px; 44 display: inline; 45 } 46 47 #imagegallery li a img { 48 border: 0; 49 } 50 </style> 51 52 </head> 53 <body> 54 <h2> 55 美女画廊 56 </h2> 57 <a href="#">注册</a> 58 <ul id="imagegallery"> 59 <li> 60 <a href="image/1.jpg" title="美女A"> 61 <img src="image/1-small.jpg" width="100" alt="美女1"/> 62 </a> 63 </li> 64 <li> 65 <a href="image/2.jpg" title="美女B"> 66 <img src="image/2-small.jpg" width="100" alt="美女2"/> 67 </a> 68 </li> 69 <li> 70 <a href="image/3.jpg" title="美女C"> 71 <img src="image/3-small.jpg" width="100" alt="美女3"/> 72 </a> 73 </li> 74 <li> 75 <a href="image/4.jpg" title="美女D"> 76 <img src="image/4-small.jpg" width="100" alt="美女4"/> 77 </a> 78 </li> 79 </ul> 80 81 82 <div style="clear:both"></div> 83 84 <img id="image" src="image/placeholder.png" width="450px"/> 85 86 <p id="des">选择一个图片</p> 87 88 <script> 89 //需求：点击小图片，改变下面的大图片的src属性值。赋值为a链接的href属性值。 90 //让p标签的innnerHTML属性值，变成a标签的title属性值。 91 //步骤： 92 //1.获取事件源和相关元素 93 //2.绑定事件 94 //3.书写事件驱动程序 95 96 97 //1.获取事件源和相关元素 98 //利用元素获取其下面的标签。 99 var ul = document.getElementById("imagegallery"); 100 var aArr = ul.getElementsByTagName("a"); 101 // console.log(aArr[0]); 102 var img = document.getElementById("image"); 103 var des = document.getElementById("des"); 104 //2.绑定事件 105 //以前是一个一个绑定，但是现在是一个数组。for循环绑定 106 for(var i=0;i<aArr.length;i++){ 107 aArr[i].onclick = function () { 108 //3.书写事件驱动程序 109 //修改属性 110 //this指的是函数调用者，和i并无关系，所以不会出错。 111 img.src = this.href; 112 // img.src = aArr[i].href; 113 des.innerHTML = this.title; 114 return false; 115 } 116 } 117 118 </script> 119 120 </body> 121 </html>
// value：标签的value属性。
//innerHTML：获取双闭合标签里面的内容。（识别标签）
//innerText：获取双闭合标签里面的内容。（不识别标签）（老版本的火狐用textContent）
以上是关于JS-DOM . 01 了解DOM,动手做一下就明白了！的主要内容，如果未能解决你的问题，请参考以下文章