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)}
}
- js1
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)
}
- js2
; (function () {var Slider = function (opt) {this.slider = document.getElementsByClassName(opt.sliderItem);this.thumbs = document.getElementsByClassName(opt.thumbItem);var _this = thisfor (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
})()
- js3
; (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>
密鑰加密系統、數字簽名、數字證書的一些概念)
)
)
