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：idclassName agName

        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">&lt;</span>

<span class="right" id="arrowRight">&gt;</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>