DOM小结
ES + DOM + BOM
DOM：document object model
dom 树——操作网页内容
事件————事先定义好的行为
（1）单击事件
（2）鼠标悬停、双击
（3）键盘回车
---基于事件驱动
三要素：
事件类型（具体什么行为）
事件源（触发——谁身上发生）
事件处理
JS程序如何处理事件
事件源.事件 = 事件处理函数
DOM : 编程接口
元素操作：
创建元素：
1 document.write()
2 innerHTML
3 document.createElement
增加元素：
appendChild()
insertBefore()
删除元素：
removeChild() \ remove()
修改元素
修改属性：img:src\ input:value \ a：href
setAttribute \ getAttribute \ removeAttribute
修改元素的内容：
innerHTML 、 innerText 、
修改表单元素：
value \ type \ disabled \ checked
修改元素样式：
style.***
className
查找元素
1 API：id\className\tagName\
2 H5新增API
3 节点 关系属性
parentNode
children
previousElementSibling
nextElementSibling
事件绑定
事件源.事件 = 事件处理函数
onclick
onmouseover \ onmouseout //支持冒泡
onfocus \ onblur ---焦点获得与失去
onmousedown ---鼠标按下瞬间
input：oninput事件 onchange事件，输入完成后监听
select：onchange事件
支持范围限定：
// div.getElementsByTagName('li')[0];
//不支持 : getElementById
// console.log(ul.getElementById('li1'));
//相当于设置行内样式
with(ulVar.style) {
width = '300px';
height = '300px';
backgroundColor = 'red';
}
ulVar.className = ulVar.className + ' box';
简单图片轮播
<!-- 页面布局 -->
<div class="main">
<!-- <input type="submit" value=""> -->
<button type="submit" id="loop">循环播放</button>
<button type="submit" id="seq">顺序播放</button>
<div class="img">
<div class="top" id="top">图片加载中...</div>
<div class="bottom" id="bottom">图片加载中...</div>
<span class="left" id="arrowLeft"><</span>
<span class="right" id="arrowRight">></span>
<img src="./6.jpg" alt="" srcset="" id="img">
</div>
</div>
<!-- script -->
<script>
var imgArr = ['6.jpg', '7.jpg', '8.jpg', '9.jpg'];
var txtArr = ['图片一', '图片二', '图片三', '图片四'];
var index = 0;
function $(idName) {
return document.getElementById(idName);
}
function showData() {
$('top').innerHTML = (index + 1) + '/' + imgArr.length;
$('bottom').innerHTML = txtArr[index];
$('img').src = imgArr[index];
}
showData();
//设置循环播放、顺序播放
var flag = true; //默认为顺序播放
$('seq').onclick = function() {
flag = true;
};
$('loop').onclick = function() {
flag = false;
};
//左右箭头事件
$('arrowLeft').onclick = function() {
index--;
if (flag && index === -1) {
alert("已到达第一张图片");
index++;
} else if (!flag && index === -1) {
index = imgArr.length - 1;
}
showData();
};
$('arrowRight').onclick = function() {
index++;
if (index === 4) {
alert("已到达最后一张图片");
index--;
} else if (!flag && index === -1) {
index = 0;
}
showData();
};
</script>
