DOM-1 【DOM初探-JS对象-XML-幻灯片展示】

最新推荐文章于 2022-06-04 15:12:31 发布
最新推荐文章于 2022-06-04 15:12:31 发布
阅读量252 收藏
点赞数
分类专栏： # DOM 文章标签： dom
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_42647547/article/details/116618904
版权

一、DOM初探

（1）DOM的概念

DOM(Document Object Model)： 文档对象模型

DOM是一个宿主对象（宿主对象：就比如寄宿在一家酒店，酒店给你提供的生活用品）

（2）DOM模型

模型： 是一个封装好了的有结构的一套方法，能够去处理相对应的事情

dom无非就是操作html和xml，dom模型建立了一套完整的方法集合，这一套方法集合就是模型

（3）DOM的作用

通过浏览器提供的这一套方法表示或者操作HTML和XML

1.操作XML
在这里插入图片描述

2.操作HTML内联样式
在这里插入图片描述
CSS复合属性用小驼峰，比如background-color = backgroundColor

dom无法操作样式表，但是可以操作内联样式，因为内联样式的优先级的高于样式表的

二、JS对象

（1）本地对象

本地对象(Native Object)Object、Function、Array、String、Number、Boolean、Error、EvalError、SyntaxError、RangeError、ReferenceError、TypeError、URIError、Date、Regxp

（2）内置对象

内置对象(Built-in Object)                                                        Global、Math                                                        

Global：
方法：isNaN()、parseInt()、Number()、decodeURI()、encodeURI
属性：Infinity、NaN、undefined
Global是全局内置对象的统称，是不存在的，全局下的这些方法都属于Global

本地对象和内置对象都是ES的内部对象

（3）宿主对象

宿主对象(Host Object)                                          window(bom)、document(bom)                                          

JavaScript在每一个浏览器当中起到dom的作用的话需要这个浏览器提供一系列跟dom相关的方法，它就不再是ECMAScript提供的了，而是浏览器提供的

window所有的方法是在bom里面的，document所有的方法是在dom里面的，dom是bom里面的内容，只是dom有W3C的规范，而bom没有，因为不同的浏览器运行方式和实现某一些方法的方式是不同的，所有它们之间存在着不同的bom对象的方法，所以就没办法给标准，所以开发者就要做兼容性。

宿主对象： 执行JS脚本的环境提供的对象（浏览器就是JS执行脚本的环境，它提供的对象都是宿主对象），又称浏览器对象

不同浏览器所提供相同功能的宿主对象里面的方法有可能不同，所以不同的浏览器在执行宿主对象的方法的时候就有可能造成兼容性问题

三、XML

（1）XML标签

在这里插入图片描述
XML可以自定义标签

XML => XHTML(过度) => HTML

XML数据包：
在这里插入图片描述

（2）内置属性冲突问题

1.为什么会打印[object HTMLUnKnownElement]，这个不是Object原型上面的toString方法才会这样嘛，而且为什么name会打印出来这个，而uname就不会呢？
在这里插入图片描述
因为内置的属性发生了冲突导致的结果

2.为什么打印出来的是input而不是myForm？
在这里插入图片描述
因为input的id把form的id覆盖掉了

总结：
在JavaScript中有一些东西是不能使用的，比如name、id这些变量名、标签名这些东西尽可能的去避免，因为JavaScript当中是有内置的属性是有id和name或者有其它的一些东西，保不准哪个地方就会有冲突，所以我们只能尽可能的区回避这些问题

我们在使用属性、变量、标签名的时候，尽量去避免一些和JavaScript本身属性相重合的一些东西

四、幻灯片展示

在这里插入图片描述

（1）css样式

* {
    margin: 0;
}
ul {
    padding: 0;
    margin: 0;
    list-style: none;
}
a {
    text-decoration: none;
}
img {
    width: 100%;
}
.silder-wrap {
    width: 996px;
    height: 480px;
    margin: 50px auto;
    border: 1px solid #000;
}
.slider {
    position: relative;
    float: left;
    width: 853px;
    height: 480px;
}
.slider-item {
    display: none;
    position: absolute;
    top: 0;
    left: 0;
    height: 480px;
}
.slider-item.active {
    display: block
}
.thumbs {
    float: left;
    width: 142px;
    height: 480px;
}
.thumbs-item {
    height: 80px;
    opacity: .5;
}
.cur {
    opacity: 1;
}

（2）搭建dom结构

<div class="silder-wrap">
    <div class="slider">
        <ul class="slider-list">
            <li class="slider-item active">
                <a href="javascript:;">
                    <img src="images/1.jpg" alt="">
                </a>
            </li>
            <li class="slider-item">
                <a href="javascript:;">
                    <img src="images/2.jpg" " alt=" ">
                </a>
            </li>
            <li class="slider-item ">
                <a href="javascript:; ">
                    <img src="images/3.jpg "" alt="">
                </a>
            </li>
            <li class="slider-item">
                <a href="javascript:;">
                    <img src="images/4.jpg" " alt=" ">
                </a>
            </li>
            <li class="slider-item ">
                <a href="javascript:; ">
                    <img src="images/5.jpg "" alt="">
                </a>
            </li>
            <li class="slider-item">
                <a href="javascript:;">
                    <img src="images/6.jpg" " alt=" ">
                </a>
            </li>
        </ul>
    </div>
    <div class="thumbs ">
        <ul class="thumbs-list ">
            <li class="thumbs-item cur ">
                <a href="javascript:; ">
                    <img src="images/1.jpg " " alt=" ">
                </a>
            </li>
            <li class="thumbs-item ">
                <a href="javascript:; ">
                    <img src="images/2.jpg " " alt=" ">
                </a>
            </li>
            <li class="thumbs-item ">
                <a href="javascript:; ">
                    <img src="images/3.jpg " " alt=" ">
                </a>
            </li>
            <li class="thumbs-item ">
                <a href="javascript:; ">
                    <img src="images/4.jpg " " alt=" ">
                </a>
            </li>
            <li class="thumbs-item ">
                <a href="javascript:; ">
                    <img src="images/5.jpg " " alt=" ">
                </a>
            </li>
            <li class="thumbs-item ">
                <a href="javascript:; ">
                    <img src="images/6.jpg " " alt=" ">
                </a>
            </li>
        </ul>
    </div>
</div>

（3）js流程化写法

var thumbItem = document.getElementsByClassName('thumbs-item'),
    sliderItem = document.getElementsByClassName('slider-item');

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

（4）js插件写法

; (function () {
    var Slider = function (opt) {
        this.thumbItem = document.getElementsByClassName(opt.thumbItem);
        this.sliderItem = document.getElementsByClassName(opt.sliderItem);

        this.bindClick();
    }

    Slider.prototype = {
        bindClick: function () {
            var thumbItem = this.thumbItem,
                sliderItem = this.sliderItem;

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

    window.Slider = Slider;
})()

调用：

<script src="js/index.js "></script>
<script>
    var slider = new Slider({
        thumbItem: 'thumbs-item',
        sliderItem: 'slider-item'
    })
</script>

五、作业

在这里插入图片描述

（1）css样式

body {
    margin: 0;
}
a {
    text-decoration: none;
}
.clearfix::after {
    content: '';
    display: table;
    clear: both;
}
.tab-wrap {
    width: 500px;
    margin: 50px auto;
}
.tab .tab-item {
    float: left;
    width: 100px;
    height: 50px;
}
.tab .tab-item a {
    display: block;
    height: 100%;
    text-align: center;
    line-height: 50px;
    color: #000;
}
.tab .tab-item.cur a {
    color: #fff;
    background: #000;
}
.page {
    position: relative;
    height: 450px;
    border: 1px solid #000;
}
.page .page-item {
    display: none;
    position: absolute;
    height: 100%;
    width: 100%;
    text-align: center;
    line-height: 450px;
    font-size: 100px;
}
.page .page-item.active {
    display: block;
}

（2）dom结构搭建

<div class="tab-wrap">
    <div class="tab clearfix">
        <div class="tab-item cur">
            <a href="javascript:;">选项卡1</a>
        </div>
        <div class="tab-item">
            <a href="javascript:;">选项卡2</a>
        </div>
        <div class="tab-item">
            <a href="javascript:;">选项卡3</a>
        </div>
    </div>
    <div class="page">
        <div class="page-item active">1</div>
        <div class="page-item">2</div>
        <div class="page-item">3</div>
    </div>
</div>

（3）js流程化写法

var tabItem = document.getElementsByClassName('tab-item'),
    pageItem = document.getElementsByClassName('page-item');

for (var i = 0; i < tabItem.length; i++) {
    (function (j) {
        tabItem[j].onclick = function () {
            for (var i = 0; i < tabItem.length; i++) {
                tabItem[i].className = 'tab-item';
                pageItem[i].className = 'page-item';
            }
            pageItem[j].className += ' active'; // 立即执行的时候j就传给了它
            this.className += ' cur';
        }
    })(i)
}

（4）js插件写法

; (function () {
    var Tab = function (opt) {
        this.tabs = document.getElementsByClassName(opt.tabItem);
        this.pages = document.getElementsByClassName(opt.pageItem);

        this.bindClick(opt.tabItem, opt.pageItem, opt.cur, opt.active)
    }

    Tab.prototype = {
        bindClick: function (tabItem, pageItem, cur, active) {
            var tabs = this.tabs;
            var pages = this.pages;

            for (var i = 0; i < tabs.length; i++) {
                (function (j) {
                    tabs[j].onclick = function () {
                        for (var i = 0; i < tabs.length; i++) {
                            tabs[i].className = 'tab-item';
                            pages[i].className = 'page-item';
                        }
                        pages[j].className = pageItem + ' ' + active;
                        this.className = tabItem + ' ' + cur;
                    }
                })(i)
            }
        }
    }

    window.Tab = Tab;
})()

调用：

<script src="index.js"></script>
<script>
    var tab = new Tab({
        tabItem: 'tab-item',
        pageItem: 'page-item',
        cur: 'cur',
        active: 'active'
    })
</script>
小管打天下
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
DOM-1 DOM初探、JS对象、XML、幻灯片案例展示
Stephy_Yy
05-30 139
DOM —— Document Object Model(文档对象模型) DOM 对象 → 宿主对象（是浏览器提供的） 通过浏览器提供的方法表示或操作HTML和XML 不能操作css 标签：<></>对 元素：<>及内部的内容,getElementsByTagName获取的是元素，是类数组，没有数组方法，但能通过下标访问 JavaScript 3种对象 本地对象（Native Object） Object Function Array String Number .
JS基础续言-大学问『DOM』篇—— 01 DOM初探、JS对象、XML、幻灯片案例展示
Mr_ZJQ的博客
01-25 701
一、DOM初探 DOM Document Object Model 文档对象模型 DOM 是对象也是宿主(浏览器)对象 二、JS对象 1.本地对象：Native Object Object、Function、Array、String（包装类）、Number（包装类）、Boolean（包装类） Error、EvalError、SyntaxError、RangeError ReferenceError、TypeError、RangeErrorDate、RegExp 2. 内置对象：Built-.
【JavaScript 进阶之旅 DOM篇 第一章】DOM初探、JS对象、XML、幻灯片案例（插件化开发）
马云
06-04 202
2、DOM存在的目的 通过浏览器提供的这一套方法表示或者操作HTML和XML DOM是不可以操作CSS的 XML 总结：DOM是可以操作XML的 他操作的是HTML元素上的style属性，style属性（内联样式）的优先级是高于CSS样式（内外部样式）的，并不是DOM操作了CSS 给多个元素绑定点击事件： 5、案例（幻灯片） 效果图...
js 对象装换成css内联样式
My_main_的博客
09-02 393
需要在标签前面加上style=A，A代表ObjetToCss(objet)运行的结果 function ObjetToCss(objet) { return JSON.stringify(objet).replace(/({|"|[A-Z]|}|,)/g, ($0) => { let A;let B; if (/[A-Z]/.test($0)) { A = $0; B = A.toLowerCase() // console.log(A,B); }
HTML5(八)——SVG 之 path 详解
前端人的博客
08-09 5491
path 是 SVG 基本形状中最强大的一个，不仅可以实现我们上一篇《HTML5(七)——SVG基础入门》中，介绍的 SVG 预定义的 line、rect、circle、ellipse、line、polyline、polygon 六种基本形状。还可以实现更复杂的效果，我们就开始学习 path 如何应用。 一、path 路径详解 1.1、path 命令 path 用于定义一个路径，其中命令就是控制这条路径的，以下命令就是可用于路径数据： 注：以上所有命令大小写都可以，区别是大写命令表示绝对定位
dom-to-image.js
07-27
一开始使用的是html2canvas.js。功能是可以实现，但是有缺陷（表格存在合并的单元格时，生成的图片表格线框不完整），后来很不容易知道了dom-to-image.js,尝试之后觉得非常不错
dom-inspector：Dom像chrome dev工具一样进行检查
02-02
script type =" text/javascript " src =" ./dist/dom-inspector.min.js " > </ script > const DomInspector = require ( 'dom-inspector' ) ; import DomInspector from 'dom-inspector' ;新实例const ...
XML-DOM编程模型简单参考手册.doc
最新发布
11-29
XML DOM 编程模型的核心在于 DOM 解析器，它将 XML 文档转换为内存中的对象树，使得开发人员可以像操作普通的数据结构一样操作 XML 文档。DOM 解析器的模型结构包括一系列的节点类型，如元素节点、属性节点、文本...
JavaScript的Polymer框架中dom-repeat与VM的相关操作
10-23
主要介绍了JavaScript的Polymer框架中dom-repeat与VM的相关操作,Polymer是由Ggoogle开发的Web UI相关框架,需要的朋友可以参考下
jsdom-devtools-formatter:使jsdom元素看起来像Chrome Devtools控制台中的真实DOM元素
05-17
jsdom-devtools格式化程序 简而言之：不要像这样通过检查其实现对象来尝试理解的元素代表什么： …让我们像检查它们一样，将它们视作真正HTML元素： 典型的用例是一些在Node.js环境中利用脚本/测试，例如 。 ...
011-创建或复制节点
ppwwp的专栏
03-12 291
JavaScript脚本可以为DOM动态增加节点，程序为DOM树增加节点时，页面会动态地增加HTML元素。当需要为页面增加HTML元素时，应按如下两个步骤操作。 创建或复制节点 添加节点 创建或复制节点 创建节点通常借助于document对象的CreateElement方法来实现，语法如下。 document.createElement(Tag):创建Tag标签对应的节点。 下面代码演示...
[HTML API]HTMLUnknownElement
weixin_30549175的博客
01-30 338
interface HTMLUnknownElement : HTMLElement { }; 转载于:https://www.cnblogs.com/niuweb/archive/2012/01/30/API_HTMLUnknownElement.html
网页弹出[Object HTMLDivElement]，怎么取值？
Jonia的Castle
09-24 2万+
今天在做去除div的某个属性时，要去
关于Node和Element和HTMLElement
weixin_33786077的博客
01-24 854
Node节点对象代表文档树中的一个单独的节点。 Element 对象表示XML文档中的元素。元素可包含属性、其他元素或文本。如果元素含有文本，则在文本节点中表示该文本。 HTMLElement 对象表示HTML中的一个元素。所以下列例子中即使是HTMLUnknownElement的标签asd的节点也属于HTMLElement对象。 下面看一下例...
关于js中出现获取input框的值为[object HTMLInputElement]的问题
热门推荐
编程界的一名小学生
11-03 3万+
今天遇到一个小问题  用$("#Id").val();获取到得值是[object HTMLInputElement]，看了半天没明白，上百度上找也没看懂都说的什么，回过头来又研究  原来是我用来接收的那个字段没定义 写下来  以后记住，   还有一种情况也会引起这个问题  比如id写错地方了  写在div上或者网上说的id重复了  等   像这种问题得细心细心再细心
关于网页显示[object HTML标签名Element]的问题
qq_44960253的博客
06-21 3673
关于网页显示[object HTML标签名Element]的问题 今天学习在 JS红宝书上的 10.1.8 节关于 DocumentFragment 类型时，按照实例，大致上敲了一遍代码想要看看效果。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initia
DOM-XSS漏洞挖掘与攻击面全面解析
2. 跳转功能: 页面中的跳转逻辑，如登录、退出或第三方应用唤起，若允许用户自定义redirecturl参数，攻击者可以利用javascript:alert(1)这样的构造进行XSS攻击。随着移动应用和Webview的普及，跨域跳转的安全问题...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值