DOM-1 DOM初探、JS对象、XML、幻灯片案例展示-CSDN博客

本文链接：https://blog.csdn.net/weixin_43503511/article/details/117394002

DOM

DOM —— Document Object Model(文档对象模型)
DOM 对象 → 宿主对象（是浏览器提供的）
通过浏览器提供的方法表示或操作HTML和XML
不能操作css
标签：<></>对
元素：<>及内部的内容,getElementsByTagName获取的是元素，是类数组，没有数组方法，但能通过下标访问

JavaScript 3种对象

本地对象（Native Object）
Object Function Array String Number Boolean Error
Date RegExp
内置对象（Built-in Object）
Global（虚拟的，全局对象的总称：如isNaN、Number|decodeURI）
Global属性：如Infinity NaN undefined
Math
本地对象和内置对象都是ES的内容对象
宿主对象（Host Object）
执行JS脚本的环境提供的对象，又称浏览器对象，兼容性问题
浏览器对象window（BOM）和document（DOM）
DOM包含于BOM概念，有W3C标准

谁调用this就指向那个元素，注意，如果使用了箭头函数，this将指向上下文（window）

<body>
    <div>123</div>
    <div>456</div>
    <div>789</div>
    <script type="text/javascript">
        var doms = document.getElementsByTagName('div')
        for (var i = 0; i < doms.length; i++) {
            doms[i].onclick = function () {
                console.log(this.innerText)
            }
        }
    </script>
</body>

练习

幻灯片功能 gitee

// 都打印6，因为for循环在绑定click时，并没有立即执行
// 等绑定完，在循环外部触发时，拿到的i是退出循环的结果
var thumbItem = document.getElementsByClassName('thumb-item')
for (var i = 0; i < thumbItem.length; i++) {
    thumbItem[i].onclick = function () {
        console.log(i)
    }
}

var thumbItem = document.getElementsByClassName('thumb-item');
var sliderItem = document.getElementsByClassName('slider-item');
for (var i = 0; i < thumbItem.length; i++) {
    (function (curI) {
        thumbItem[curI].onclick = function () {
            for (var j = 0; j < thumbItem.length; j++) {
                thumbItem[j].className = "thumb-item"
                sliderItem[j].className = "slider-item"
            }
            this.className += " cur"
            sliderItem[curI].className += " active"
        }
    })(i)
}

; (function () {
    var Slider = function (opt) {
        this.slider = document.getElementsByClassName(opt.sliderItem);
        this.thumbs = document.getElementsByClassName(opt.thumbItem);
        var _this = this
        for (var i = 0; i < this.thumbs.length; i++) {
            (function (curI) {
                _this.thumbs[curI].onclick = function () {
                    for (var j = 0; j < _this.thumbs.length; j++) {
                        _this.thumbs[j].className = "thumb-item"
                        _this.slider[j].className = "slider-item"
                    }
                    this.className += " cur"
                    _this.slider[curI].className += " active"
                }
            })(i)
        }
    }
    Slider.prototype = {}
    window.Slider = Slider
})()

; (function () {
    var Slider = function (opt) {
        this.slider = document.getElementsByClassName(opt.sliderItem);
        this.thumbs = document.getElementsByClassName(opt.thumbItem);
        this.bindClick()
    }
    Slider.prototype = {
        bindClick: function () {
            var slider = this.slider,
                thumbs = this.thumbs;
            for (var i = 0; i < thumbs.length; i++) {
                (function (curI) {
                    thumbs[curI].onclick = function () {
                        for (var j = 0; j < thumbs.length; j++) {
                            thumbs[j].className = "thumb-item"
                            slider[j].className = "slider-item"
                        }
                        this.className += " cur"
                        slider[curI].className += " active"
                    }
                })(i)
            }
        }
    }
    window.Slider = Slider
})()

html

<script type="text/javascript">
    var slider = new Slider({
        sliderItem: 'slider-item',
        thumbItem: 'thumb-item'
    })
</script>