电子商务网站开发与实现,网站内容优化的主要方法,深圳电子商务网站有哪些,做网站交付标准DOM
DOM —— Document Object Model(文档对象模型)DOM 对象 → 宿主对象#xff08;是浏览器提供的#xff09;通过浏览器提供的方法表示或操作HTML和XML不能操作css标签#xff1a;/对元素#xff1a;及内部的内容,getElementsByTagName获取的是…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脚本的环境提供的对象又称浏览器对象兼容性问题 浏览器对象windowBOM和documentDOM DOM包含于BOM概念有W3C标准 谁调用this就指向那个元素注意如果使用了箭头函数this将指向上下文window
bodydiv123/divdiv456/divdiv789/divscript typetext/javascriptvar 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-itemsliderItem[j].className slider-item}this.className cursliderItem[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-itemslider[j].className slider-item}this.className curslider[curI].className active}})(i)}}}window.Slider Slider
})()html
script typetext/javascriptvar slider new Slider({sliderItem: slider-item,thumbItem: thumb-item})
/script
