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>
密钥加密系统、数字签名、数字证书的一些概念)
)
)
