WebAPI编程DOM基础学习
1.API和Web API总结
1.API是为程序员提供的一个接口，帮助我们实现某种功能，我们会使用就可以了，不必纠结内部如何实现。
2.Web API主要是针对于浏览器提供的接口，主要针对于浏览器做交互效果。
3.Web API一般都有输入和输出（函数的传参和返回值），Web API很多都是方法（函数）
1.1 DOM:文档对象模型
W3C已经定义了一系列的DOM接口，通过这些DOM接口可以改变网页的内容、结构和样式。
DOM树
·文档：一个页面就是一个文档，DOM中使用document表示
·元素：页面中的所有标签都是元素，DOM中使用element表示
·节点：网页中的所有内容都是节点（标签、属性、文本、注释等），DOM中使用node表示
DOM把以上内容都看做是对象
1.2 获取元素
1 //参数id是大小写敏感的字符串 2 //返回的是一个元素对象 3 var timer = document.getElementById('time'); 4 console.log(timer); 5 console.log(typeof timer) 6 //打印返回的元素对象 更好的查看里面的属性和方法 7 console.dir(timer);
根据标签名获取
//返回的是 获取过来元素对象的集合,以伪数组的形式存储的 var lis = document.getElementsByTagName('li'); console.log(lis[0]);
H5新增方法获取
//根据类名返回元素对象集合 document.getElementsByClassName('类名') //querySelector根据指定选择器返回第一个元素对象 切记 里面的选择器需要加符号 .box #nav document.querySelector('选择器'); //querySelectorAll()返回指定选择器的所有元素对象集合 document.querySelectorAll('.box');
获取特殊元素
//获取body元素 dovument.body; //获取html元素 document.documentElement;
1.3 事件基础
1.3.1 执行事件的步骤
① 获取事件源
②注册事件（绑定事件）
③添加事件处理程序（采取函数赋值形式）
常见鼠标事件
点击按钮获取当前时间
<script type="text/javascript">
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>
innerText 和 innerHTML的区别
①innerText 不识别html标签 非标准
②innerHTML 识别html标签 W3C标准
这两个属性是可读写的，可以获取元素里面的内容
淘宝遍历精灵图
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
ul {
width: 294px;
}
ul li{
float: left;
width: 24px;
height: 24px;
margin: 15px;
border: 1px solid #f4f4f4;
background: url(img/sprite.png) no-repeat;
border-left-color: transparent;
border-top-color: transparent;
list-style: none;
}
</style>
</head>
<body>
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<script type="text/javascript">
var lis = document.querySelectorAll('li');
for(var i = 0; i < lis.length; i++){
var index = i * 44;
lis[i].style.backgroundPosition = '0 -' + index + 'px';
}
</script>
</body>
</html>
1.4 获取属性值
· element.属性 获取属性值
· element.getAttribute('属性');
区别：
· element.属性 获取内置属性值（元素本身自带的属性）
· element.getAttribute('属性'); 主要获得自定义的属性（标准）程序员自定义属性
设置属性值
①element.属性 = '值'
②element.setAttribute('属性','值'); 主要针对于自定义属性
移除属性
element.removeAttribute('属性');
tab选项卡实现
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
padding: 0;
margin: 0;
}
li{
list-style: none;
}
.tab{ width: 500px;
margin: 100px;
}
.tabTop{
border: 1px solid #ccc;
background-color: #eef0ee;
height: 30px;
}
.tabTop ul li{
float: left;
padding: 0 10px;
line-height: 30px;
cursor: pointer;
}
.current{
background: #f00;
color: #fff;
}
.item{
display: none;
}
</style>
</head>
<body>
<div class="tab">
<div class="tabTop">
<ul class="tabUl">
<li class="current">商品介绍</li>
<li>商品介绍</li>
<li>商品介绍</li>
<li>商品介绍</li>
<li>商品介绍</li>
</ul>
</div>
<div class="tabCon">
<div class="item" style="display: block;">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
<div class="item">5</div>
</div>
</div>
<script type="text/javascript">
//获取元素
var tabTop = document.querySelector('.tabTop');
var lis =tabTop.querySelectorAll('li');
var items = document.querySelectorAll('.item');
//for循环绑定点击事件
for(var i = 0;i<lis.length; i++){
lis[i].setAttribute('data-index',i);
lis[i].onclick = function(){
//清除其余li的class类
for(var i = 0; i< lis.length; i++){
lis[i].className='';
}
//留下点击的
this.className = 'current';
//显示内容模块
var index = this.getAttribute('data-index');
for(var i = 0; i<lis.length ; i++)
{
items[i].style.display ='none';
}
items[index].style.display = 'block';
}
}
</script>
</body>
</html>
1.4.1 H5自定义属性
H5规定自定义属性data- 开头作为属性名并且赋值。
比如
<div date-index='1'></div>
H5 新增获取自定义属性的方法
dataset是一个集合 里面存放了所有以data开头的自定义属性
div.dataset.index 或者 element.dataset['index'] ie11才开始支持
如果自定义属性里面有多个-链接的单词，获取的时候采取 驼峰命名法
例如获取data-list-name
div.dataset.listName
1.5节点操作
一般 节点至少拥有nodeType（节点类型）、nodeName（节点名称）、和nodeValue（节点值）三个基本属性。
· 元素节点nodeType 为 1
· 属性节点nodeType 为 2
· 文本节点 nodeType 为 3（文本节点包含文字、空格、换行等）
获得子节点
parentNode.children(非标准)
parentNode.children 是一个只读属性，返回所有子元素节点。它只返回子元素节点，其余节点不返回。
虽然children是一个非标准，但是得到了各个浏览器的支持，因此可以放心使用
ol.children[0]// 获取第一个子元素节点 ol.children[ol.children.length-1]//获取最后一个子元素节点
下拉菜单实现
<body> <ul class="nav"> <li> <a href="">新闻</a> <ul> <li>新闻</li> <li>新闻</li> <li>新闻</li> <li>新闻</li> </ul> </li> <li> <a href="">博客</a> <ul> <li>博客</li> <li>博客</li> <li>博客</li> <li>博客</li> </ul> </li> </ul> <script type="text/javascript"> var nav = document.querySelector('.nav'); var lis = nav.children; 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> </body>
1.5.2 兄弟节点
node.nextElementSibling
nextElementSibling返回当前元素下一个兄弟元素节点，找不到则返回null。
node.previousElementSibling
previousElementSibling返回当前元素上一个兄弟节点，找不到则返回null
注意：这两个方法有兼容性问题，IE9以上才支持。
1.5.3 创建节点
document.createElement('li');
添加节点
node.appendChild(child)；
node.appendChild(child)；方法将一个节点添加到指定父节点的子节点列表末尾。类似于css里面的after伪元素
node.insertBefore(child,指定元素)
node.insertBefore(）方法将一个节点添加到父节点的指定子节点前面。类似于css里面的before伪元素
<script type="text/javascript">
//创建节点元素节点
var li = document.createElement('li');
//2.添加节点 node.appendChild(child) node是父级 child是子级
var ul = document.querySelector('ul');
ul.appendChild(li);
//3.添加节点 node.insertBefore(child,指定元素);
var lili = document.insertBefore(lili,ul.children[0]);
//4.想要页面添加一个新的元素:①创建元素 ②添加元素
</script>
1.5.4 删除节点
node.removeChild(child)
点击按钮删除li
<button>删除</button> <ul> <li>熊大</li> <li>熊二</li> <li>光头强</li> </ul> <script type="text/javascript"> var btn = document.querySelector('button'); var ul = document.querySelector('ul'); btn.onclick = function(){ if(ul.children.length == 0){ this.disabled = true; }else{ ul.removeChild(ul.children[0]); } } </script>
1.5.5 复制节点(克隆节点)
node.cloneNode() 方法返回调用该方法的节点的一个副本。也称为克隆节点
var lili = ul.children[0].cloneNode(true); ul.appendChild(lili);
动态生成表格案例
<body> <table> <thead> <td>姓名</td> <td>科目</td> <td>成绩</td> <td>操作</td> </thead> <tbody> </tbody> </table> <script type="text/javascript"> var dates=[{ name:'魏璎珞', subject:'JavaScript', score:'100' },{ name:'红利', subject:'Java', score:'90' },{ name:'傅恒', subject:'.NET', score:'100' },{ name:'名誉', subject:'jQuery', score:'89' },{ name:'富察', subject:'jQuery', score:'89' }]; var tbody = document.querySelector('tbody'); for(var i = 0;i < dates.length; i++){ var tr = document.createElement('tr'); tbody.appendChild(tr); //for(var k in obj) //k得到的是属性名 obj[k]得到的是属性值 for(var k in dates[i]){ var td = document.createElement('td'); td.innerHTML = dates[i][k]; tr.appendChild(td); } var td = document.createElement('td'); td.innerHTML = '<a href="javascript:;">删除</a>'; tr.appendChild(td); } var as = document.querySelectorAll('a'); for(var i = 0;i<as.length;i++){ as[i].onclick = function(){ //点击a删除当前a所在的行（链接的父级的父级）node.removeChild(child) tbody.removeChild(this.parentNode.parentNode); } } </script> </body>
浙公网安备 33010602011771号