Javascript中最重要的API-DOM
一、Web APIs
主要包括：DOM和BOM
主要功能：主要来实现页面交互功能
API(应用程序编程接口，API就是一些预定义的函数，目)
Web API:是浏览器提供的一套操作浏览器功能和页面元素的API（BOM和DOM）。
二、认识DOM （一）、含义
DOM：Document Object Mode(文本对象模型)
D: 文档-XML文档或者HTML文档
O: 对象-document对象的属性和方法
M: 模型（二）、概念
DOM是针对XML(HTML)的基本树的API
DOM树：节点(node)的层次。
DOM把一个文档表示为一棵家谱树（父、子、兄弟）
DOM定义了Node的接口以及许多种节点类型来表示XML节点的多个方面
DOM接口：可以改变网页的内容、结构和样式。
三、节点及其类型、 (一)、节点(node):来源于网络理论，代表网络种的一个连接点。网络是节点构成的集合。
文档：一个页面就是一个文档，DOM中使用document表示
元素：页面中的所有标签都是元素，DOM中使用element表示
节点：网页中的所有内容都是节点（标签、属性、文本、注释），DOM中使用node表示 (二)、节点的三种类型： 例:节点
四、使用DOM
(一)、获取元素 1、根据ID获取：使用getElementByID()方法获取ID元素对象 1 2 3 4 5 6 7 8 9 10 <div id="hello">你好</div> <script> // 返回值：element(完整元素对象) // 参数：字符串类型 var hello = document.getElemnetById('hell'); console.log(hello); // 打印我们返回的元素对象，更好的查看里面的属性和方法。 console.dir(hello); </script>
2、通过getElementsByTayName获取某些元素。 //返回值：元素对象的集合，以伪数组的形式存储的.1 var hellos = document.getElemnetByTagName('div');
3、通过类名获得元素（H5新增方法，不兼容IE6,7,8） 1 2 3 4 5 6 <div class="box"></div> <div class="box"></div> <script> // getElementsByClassName();返回的是元素集合，以伪数组的形式存储 var boxs = document.getElementsByClassName('box'); </script>
4、querySelector 获取元素（H5新增方法，不兼容IE6,7,8） 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 <div class="box">1</div> <div class="box">2</div> <div id="box">3</div> <ul> <li>首页</li> <li>产品</li> </ul> <script> // querySelector();他返回的是指定选择器的第一个元素对象 var boxClass = document.querySelector('.box'); var boxID = document.querySelector('#box'); var tagNmae = document.querySelector('li'); </script>
5、querySelectorAll();获取元素，它返回的是指定选择器的元素集合。 1 2 3 4 5 <div class="box">1</div> <div class="box">2</div> <script> var bosAll = dcoument.querySelectorAll('box'); </script>
6、获取body和html元素 1 2 3 4 5 6 <script> // 获取body元素，返回的是元素的对象 var bodyEle = document.body; // 获取html元素， var htmlEle = document.documentElement; </script>
(二)、事件基础 1、事件的组成： a.事件源
b.事件类型
c.事件处于里机制2、事件的语法： var btn = document.getElementById('btn');
btn.onClick = function(){
alert('点击有效');
}(三)、操作元素 1、innerText——修改元素内容 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 <!-- 改变元素的内容 需求：当我们点击button按钮时，显示前系统时间--> <button >显示当前系统时间</button> <div >某个时间</div> <script> // 获取时间源 var btn = document.querySelector('button'); var div = document.querySelector('div'); // 添加监听事件 btn.onclick = function (){ div.innerText = getDate(); } // 获取当前系统时间 function getDate(){ var date = new Date(); var year = date.getFullYear(); var month = date.getMonth() + 1; var dates = date.getDate(); var arr = ['星期日','星期一','星期二','星期三','星期四','星期五','星期六']; var day = date.getDay(); return year+'年'+month+'月'+dates+'日'+arr[day]; } </script>
2、innerHTML——修改元素内容 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 <!-- 使用innerText和innerHTML的区别： 1、innerText只能改变标签的文本 2、innerHTML不光能改变标签文本，还能识别HTML标签 --> <div></div> <script> var div = document.querySelector('div'); div.innerHTML = '<strong>标签：<strong/> 标签'; </script> #### 3、使用innerHTML和innerText读取文件内容 <p> 发货计划就是 <span>合法的还是</span> </p> <script> var p = document.querySelector('p'); // innerText，不识别标签，还去掉了元素内的换行和空格 console.log(p.innerText); // innerHTML，识别标签，保留元素内的空格和标签 console.log(p.innerHTML); </script> #### 4、操作元素属性： <button id="jsy">江疏影</button> <button id="wlk">王丽坤</button> <img src="./imgs/jsy.png" alt=""> <script> var jsy = document.getElementById('jsy'); var wlk = document.getElementById('wlk'); var img = document.querySelector('img'); jsy.onclick = function(){ img.src ='./imgs/jsy.png'; } wlk.onclick = function(){ img.src = './imgs/wlk.png'; } </script>
5、注意操作表单属性： 只有type(类型属性)、value
(值属性)、checked(选择属性)、selected、 disabled(是否被使用)这些属性可以被操作。6、表格隔行换色： 思路：用到新的鼠标事件，鼠标经过
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 <style> table { width: 800px; margin: 100px auto; text-align: center; border-collapse: collapse; font-size: 14px; } thead tr { height: 30px; background-color: skyblue; } tbody tr { height: 30px; } tbody td { border-bottom: 1px solid #d7d7d7; font-size: 12px; color: blue; } .bg { background-color: pink; } </style> ------------------------------------------------------------------- <table> <thead> <tr> <th>代码</th> <th>名称</th> <th>最新公布净值</th> <th>累计净值</th> <th>前单位净值</th> <th>净值增长率</th> </tr> </thead> <tbody> <tr> <td>003526</td> <td>农银金穗3个月定期开放债券</td> <td>1.075</td> <td>1.079</td> <td>1.074</td> <td>+0.047%</td> </tr> <tr> <td>003526</td> <td>农银金穗3个月定期开放债券</td> <td>1.075</td> <td>1.079</td> <td>1.074</td> <td>+0.047%</td> </tr> <tr> <td>003526</td> <td>农银金穗3个月定期开放债券</td> <td>1.075</td> <td>1.079</td> <td>1.074</td> <td>+0.047%</td> </tr> <tr> <td>003526</td> <td>农银金穗3个月定期开放债券</td> <td>1.075</td> <td>1.079</td> <td>1.074</td> <td>+0.047%</td> </tr> <tr> <td>003526</td> <td>农银金穗3个月定期开放债券</td> <td>1.075</td> <td>1.079</td> <td>1.074</td> <td>+0.047%</td> </tr> <tr> <td>003526</td> <td>农银金穗3个月定期开放债券</td> <td>1.075</td> <td>1.079</td> <td>1.074</td> <td>+0.047%</td> </tr> </tbody> </table> ------------------------------------------------------------------- <script> // 1.获取元素 获取的是 tbody 里面所有的行 var trs = document.querySelector('tbody').querySelectorAll('tr'); // 2. 利用循环绑定注册事件 for (var i = 0; i < trs.length; i++) { // 3. 鼠标经过事件 onmouseover trs[i].onmouseover = function() { // console.log(11); this.className = 'bg'; } // 4. 鼠标离开事件 onmouseout trs[i].onmouseout = function() { this.className = ''; } } </script>
7.排他思想 排他思想就是有一组元素,我们想要某一个实现某种样式,需要用到循环的排他算法:
<!-- 排他思想 -->
<button>按钮1</button>
<button>按钮2</button>
<button>按钮3</button>
<button>按钮4</button>
<button>按钮5</button>
<script>
// 1.获取所有按钮元素
var btns= document.getElementsByTagName('button');
// 2.btns得到的是为数组，里面的每一个元素btns[i]
for(var i = 0; btns.length;i++){
btns[i].onclick = function(){
// 3.先把所有的按钮颜色去掉
for(var i=0;i<btns.length; i++){
btns[i].style.backgroundColor = '';
}
// 4.然后改变选中的背景颜色
this.style.backgroundColor = 'pink';
}
}
</script>8.百度换肤案例() 需求:通过点击图片来切换页面背景
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 <style> * { margin: 0; padding: 0; } body { background: url(imgs/1.jpg) no-repeat center top; } li { list-style: none; } .baidu { overflow: hidden; margin: 100px auto; background-color: #fff; width: 410px; padding-top: 3px; } .baidu li { float: left; margin: 0 1px; cursor: pointer; } .baidu img { width: 100px; } </style> --------------------------------------------------------- <ul class="baidu"> <li><img src="imgs/1.jpg"></li> <li><img src="imgs/2.jpg"></li> <li><img src="imgs/3.jpg"></li> <li><img src="imgs/4.jpg"></li> </ul> --------------------------------------------------------- <script> // 1. 获取元素 var imgs = document.querySelector('.baidu').querySelectorAll('img'); // 2. 利用for循环给每个图片设置点击事件 for(var i = 0; i < imgs.length;i++){ imgs[i].onclick = function(){ // this.src 就是我们点击图片的路径,然后将路径赋给body.backgroundImage document.body.style.backgroundImage = 'url('+this.src+')'; // 注意:此处赋值需要利用拼接字符串. } } </script>
9.tab栏切换
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 <style> * { margin: 0; padding: 0; } li { list-style-type: none; } .tab { width: 978px; margin: 100px auto; } .tab_list { height: 39px; border: 1px solid #ccc; background-color: #f1f1f1; } .tab_list li { float: left; height: 39px; line-height: 39px; padding: 0 20px; text-align: center; cursor: pointer; } .tab_list .current { background-color: #c81623; color: #fff; } .item_info { padding: 20px 0 0 20px; } .item { display: none; height: 300px; background-color: #c81623; } .item:nth-child(2){ background-color: aqua; } .item:nth-child(3){ background-color: #393953; } .item:nth-child(4){ background-color: #898989; } .item:nth-child(5){ background-color: #ff78ff; } </style> ---- <div class="tab"> <div class="tab_list"> <ul> <li class="current">商品介绍</li> <li>规格与包装</li> <li>售后保障</li> <li>商品评价（50000）</li> <li>手机社区</li> </ul> </div> <div class="tab_con"> <div class="item" style="display: block;"> 商品介绍模块内容 </div> <div class="item"> 规格与包装模块内容 </div> <div class="item"> 售后保障模块内容 </div> <div class="item"> 商品评价（50000）模块内容 </div> <div class="item"> 手机社区模块内容 </div> </div> </div> ------ <script> // 获取元素 var tab_list = document.querySelector('.tab_list'); var lis = tab_list.querySelectorAll('li'); var items = document.querySelectorAll('.item'); // for循环绑定点击事件 for (var i = 0; i < lis.length; i++) { // 开始给5个小li 设置索引号 lis[i].setAttribute('index', i); lis[i].onclick = function() { // 1. 上的模块选项卡，点击某一个，当前这一个底色会是红色，其余不变（排他思想） 修改类名的方式 // 干掉所有人 其余的li清除 class 这个类 for (var i = 0; i < lis.length; i++) { lis[i].className = ''; } // 留下我自己 this.className = 'current'; // 2. 下面的显示内容模块 var index = this.getAttribute('index'); console.log(index); // 干掉所有人 让其余的item 这些div 隐藏 for (var i = 0; i < items.length; i++) { items[i].style.display = 'none'; } // 留下我自己 让对应的item 显示出来 items[index].style.display = 'block'; } } </script>
10、自定义属性规范 注意：
自定义属性的目的：是为了保存并使用数据。有些数据可以保存到网页中而不保存到数据库中
自定义属性获取是通过getAttribute(‘属性’)获取。
但是有些自定义属性很容易引起歧义，不容易和内置属性进行区分
自定义属性的规范：
1、H5规定自定义属性data开头做为属性名并且赋值
比如：data-index = “2”
H5新增获取自定义属性方法：
1 2 3 4 5 6 7 8 9 10 11 12 <div getTime = "20" data-time="12" data-list-name = "andy"></div> <script> var div = document.querySelector('div'); var d = div.getAttribute('getTime'); console.log(d); div.setAttribute('data-time',20); // H5新增的获取自定义属性的方法 // dataset是一个集合里面存放了所有以data开头的自定义属性 console.log(div.dataset.time); // data-list-name：必须使用驼峰命名法进行获取 console.log(div.listName); </script>
(四)、节点操作 一般的节点至少拥有nodeType(节点类型)、nodeName(节点名称)、nodeValue(节点值)这三个基本属性。
1、元素节点 nodeType 为 1
2、属性节点 nodeType 为 2
3、文本节点 nodeType 为 3
在实际开发中，节点操作主要操作是元素节点
利用DOM树可以把节点划分为不同的层级关系，常见的是父子兄层级关系。1.父级节点 node.parentNode2.小案例： <div class="demo">
<div class="box">
<span class="erweima"></span>
</div>
</div>
<script>
var erweima = document.querySelector('.erweima');
// 下面我们要拿到它的父节点（box），就可以使用parentNode来的到
console.log(erweima.parentNode);
// 在这里我们需要注意的是他得到的是离他最近的父节点,如果没找到就会返回为 null
</script>
3.子级节点 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 <ul> <li>我是li</li> <li>我是li</li> <li>我是li</li> <li>我是li</li> </ul> <script> var ul = document.querySelector('ul'); // 通过childNodes可以获得ul下的所有节点（包括文本节点、元素节点、属性节点） console.log(ul.childNodes); </script>  从这里我们可以看到通过childNodes获得到的是ul下的所有节点，然而通常我们只需要获得它的所有元素节点，问题来了？解决这个问题我们用children它用来获取子元素节点的。 <ul> <li>我是li</li> <li>我是li</li> <li>我是li</li> <li>我是li</li> </ul> <script> var ul = document.querySelector('ul'); // children 获取所有子元素节点 console.log(ul.children()); </script> 
4.子节点操作获取最后一个和第一个 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 <ol> <li>我是li-1</li> <li>我是li-2</li> <li>我是li-3</li> <li>我是li-4</li> </ol> <script> var ol = document.querySelector('ol'); // 1、获取第一个节点和最后一个节点 // firstChild 获取第一个节点（不管是文本节点还是元素节点） console.log(ol.firstChild); // lastChild 获取最后一个节点 console.log(ol.lastChild); // 2、获取子元素节点(只兼容IE9以上版本) // firstElementChild 返回第一个元素节点 console.log(ol.firstElementChild); // lastElementChild 返回最后一个元素节点 console.log(ol.lastElementChild); // 3、实际开发的写法 没有兼容性问题 console.log(ol.children[0]); </script>
5.下拉菜单案例 (案例) 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 <style> * { margin: 0; padding: 0; } li { list-style-type: none; } a { text-decoration: none; font-size: 14px; } .nav { margin: 100px; } .nav>li { position: relative; float: left; width: 80px; height: 41px; text-align: center; } .nav li a { display: block; width: 100%; height: 100%; line-height: 41px; color: #333; } .nav>li>a:hover { background-color: #eee; } .nav ul { display: none; position: absolute; top: 41px; left: 0; width: 100%; border-left: 1px solid #FECC5B; border-right: 1px solid #FECC5B; } .nav ul li { border-bottom: 1px solid #FECC5B; } .nav ul li a:hover { background-color: #FFF5DA; } </style> <ul class="nav"> <li> <a href="#">微博</a> <ul> <li> <a href="">私信</a> </li> <li> <a href="">评论</a> </li> <li> <a href="">@我</a> </li> </ul> </li> <li> <a href="#">微博</a> <ul> <li> <a href="">私信</a> </li> <li> <a href="">评论</a> </li> <li> <a href="">@我</a> </li> </ul> </li> <li> <a href="#">微博</a> <ul> <li> <a href="">私信</a> </li> <li> <a href="">评论</a> </li> <li> <a href="">@我</a> </li> </ul> </li> <li> <a href="#">微博</a> <ul> <li> <a href="">私信</a> </li> <li> <a href="">评论</a> </li> <li> <a href="">@我</a> </li> </ul> </li> </ul> <script> // 1. 获取元素 var nav = document.querySelector('.nav'); var lis = nav.children; // 得到4个小li // 2.循环注册事件 for (var i = 0; i < lis.length; i++) { lis[i].onmouseover = function() { this.children[1].style.display = 'block'; } lis[i].onmouseout = function() { this.children[1].style.display = 'none'; } } </script>
