DOM探索之基础详解篇_技术笔记

慕沐0269658 2019-06-22

文档类型： 1.超文本标记语言，HTML(Help Text Markup Language)W3C万维网联盟维护 -用来显示数据，重点是如何显示数据 -使用定义的标准标签，html标签作为根元素 2.可扩展标记语言，XML(Extensable Markup Language) -用来描述数据，重点是什么是数据，如何存放数据 -与HTML一样，由标签、属性和子节点组成 -标签名可根据描述数据的语义进行定义，可以是英文或者汉字

截图
0赞 · 0采集
慕田峪1755618 2018-12-22

笔记部分内容

0赞 · 0采集
慕粉9644264 2018-08-23

文档的类型

截图
0赞 · 0采集

慕婉清1653969 2018-05-24

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
 #box {
            width: 1000px;
 height: 300px;
 border: 1px solid #ccc;
 position: relative;
 overflow: hidden;
 }

        #box div {
            width: 400px;
 height: 300px;
 background-color: orangered;
 position: absolute;
 background-image: url("1.jpg");
 }

        #box div:nth-child(2) {
            left: 400px;
 background-color: #ccc;
 background-image: url("2.jpg");
 }

        #box div:nth-child(3) {
            left: 600px;
 background-color: red;
 background-image: url("3.jpg");
 }

        #box div:nth-child(4) {
            left: 800px;
 background-color: pink;
 background-image: url("4.jpg");
 }
    </style>
</head>
<body>
<div id="box">
    <div></div>
    <div></div>
    <div></div>
    <div></div>
</div>
</body>
<script>
 window.onload = function () {

 //获取事件源
 var box = document.getElementById('box')
 var divs = box.querySelectorAll('div')

 var left = [
            {left: 0},
            {left: 200},
            {left: 400},
            {left: 600}
        ]
 var previous = [
            {left: 0},
            {left: 400},
            {left: 600},
            {left: 800}
        ]

 for (var i = 0; i < divs.length; i++) {
 divs[i].index = i
 //注册事件  鼠标经过时当前图片时且前面的图片都会移动到目标位置
 divs[i].onmouseover = function () {
 var index = this.index
 for (var i = 1; i <= index; i++) {
 animate(divs[i], left[i])
                }
            }
 //鼠标离开时复位到目标位置 如果鼠标移动到后面的图片不会复位(因为触发onmouseover事件后目标位置就是当前位置)
 divs[i].onmouseout = function () {
 var index = this.index
 for (var i = 1; i <= index; i++) {
 animate(divs[i], previous[i])
                }
            }
        }

 //给事件源注册事件

 /**
         * 封装一个animate函数
 * @param o
         * @param json
         * @param fn
         */
 function animate(o, json, fn) {
 if (o.timeId) {
 clearInterval(o.timeId) //清除定时器,保证只有一个定时器在运行
 }
 o.timeId = setInterval(function () {
 var flag = true
                for (var key in json) {
 if (key == 'opacity') {
 var leader = parseInt(getAttr(o, key) * 100 || 0)//先放大100倍,这样才能保证步长至少为1px才有效
 var target = parseInt(json[key] * 100)
 var step = (target - leader) / 10
 step = step > 0 ? Math.ceil(step) : Math.floor(step)
 leader += step
 o.style.opacity = leader / 100  //计算后除于100即可
 } else if (key == 'zIndex') {
 o.style.zIndex = json[key] //直接设置为目标层级即可,无需步进
 } else {
 var leader = parseInt(getAttr(o, key)) //只保留整数
 var target = parseInt(json[key]) //只保留整数
 var step = (target - leader) / 5
 step = step > 0 ? Math.ceil(step) : Math.floor(step)
 leader += step
 o.style[key] = leader + 'px'
 }
 if (target != leader) { //只要有一个属性没有到达目标位置  flag就为假  开关思想
 flag = false
 }
                }
 if (flag) {
 clearInterval(o.timeId)
 if (typeof fn == 'function') { //如果参数是函数就调函数
 fn()
                    }
                }
            }, 15)
        }

 function getAttr(o, attr) {
 if (o.currentStyle) {
 return o.currentStyle[attr]
            } else {
 return window.getComputedStyle(o, null)[attr]
            }
        }
    }

</script>
</html>

0赞 · 0采集

慕娘6347874 2018-04-13

文档类型： 1.超文本标记语言，HTML(Help Text Markup Language)W3C万维网联盟维护 -用来显示数据，重点是如何显示数据 -使用定义的标准标签，html标签作为根元素 2.可扩展标记语言，XML(Extensable Markup Language) -用来描述数据，重点是什么是数据，如何存放数据 -与HTML一样，由标签、属性和子节点组成 -标签名可根据描述数据的语义进行定义，可以是英文或者汉字

0赞 · 0采集
xiixii 2018-01-20

文档类型： GML通用标记语言（1969）—》SGML标准通用标记语言（1985）—》HTML超文本标记语言(1993)—》XML可扩展标记语言，用存放格式化数据的（1998）

0赞 · 0采集
前端沙雕 2018-01-18

文档类型：html用来显示数据，xml用来存放数据

截图
0赞 · 1采集
Ethreal 2017-08-13

HTML（超文本标记语言）用来显示数据，不能解释影音文件和化学公式等，不利于扩展 XML（可扩展标记语言）用来描述数据，什么是数据，如何存放数据 XHTML（早期 HTML与xml合并作用）

0赞 · 0采集
青儿leaf7 2017-06-27

就是讲了一下HTML和XTML

0赞 · 0采集
orangewangjie3473319 2017-05-31

xml例子：标签可以随意命名

截图
0赞 · 0采集
orangewangjie3473319 2017-05-31

html例子

截图
0赞 · 0采集
orangewangjie3473319 2017-05-31

文档的类型--历史过程：专注的领域不同，选择不同： HTML（超文本标记语言）用来显示数据，不能解释影音文件和化学公式等，不利于扩展 XML（可扩展标记语言）用来描述数据，什么是数据，如何存放数据 XHTML（早期 HTML与xml合并作用）

截图
0赞 · 1采集
队友杀手 2017-05-25

文档的类型

截图
0赞 · 0采集
慕的地6791964 2017-04-18

文档的发展

截图
0赞 · 0采集
异常代码 2017-03-24

html被设计用来显示数据 xml被用来设置存放数据

0赞 · 0采集
qq_s1思念丶_03917798 2017-03-20

专注的领域不同，选择不同： HTML（超文本标记语言）用来显示数据，不能解释影音文件和化学公式等，不利于扩展 XML（可扩展标记语言）用来描述数据，什么是数据，如何存放数据 XHTML（早期 HTML与xml合并作用）

截图
1赞 · 5采集
kedaor 2017-03-07

文档类型： GML通用标记语言（1969）—》SGML标准通用标记语言（1985）—》HTML超文本标记语言(1993)—》XML可扩展标记语言（1998）

0赞 · 1采集
qq_放野_03656931 2017-03-03

文档类型 1、GML 通用标记语言 2、SGML 标准通用标记语言 3、HTML 超文本标记语言 4、XML 可扩展标记语言使用存放格式化数据的节点类型

0赞 · 1采集
W小米 2017-02-24

专注的领域不同，选择不同： HTML（超文本标记语言）用来显示数据，不能解释影音文件和化学公式等，不利于扩展 XML（可扩展标记语言）用来描述数据，什么是数据，如何存放数据 XHTML（早期 HTML与xml合并作用）

0赞 · 1采集
Airplane 2017-02-21

专注的领域不同，选择不同： HTML（超文本标记语言）用来显示数据，不能解释影音文件和化学公式等，不利于扩展 XML（可扩展标记语言）用来描述数据，什么是数据，如何存放数据 XHTML（早期 HTML与xml合并作用）以下是XML

截图
1赞 · 1采集
Airplane 2017-02-21

文档的类型

截图
0赞 · 0采集
Lubywu 2017-02-14

GML、SGML、HTML（超文本标记语言）、XML（可扩展标记语言）

截图
0赞 · 0采集
qq_玄月_0 2017-02-06

1969 gml 通用标记语言 1985 sgml 标准通用标记语言 1993 html 超文本标记语言 1998 xml 扩展标记语言

0赞 · 0采集
甜甜圈1991 2016-12-29

文档类型 xml是存放格式化数据的 html 根元素 html文档 DOCTYPE 是什么模式解析文档

截图
0赞 · 0采集
Delivw 2016-11-23

xml文档结构,可以自定义中英文标签

截图
0赞 · 0采集
麦子穗5223215657 2016-10-17

文档的类型，即发展轨迹！

截图
0赞 · 0采集
qweqwe13123123 2016-10-17

文档类型 html 用于展示页面 xml 用于描述数据存放数据

截图
0赞 · 0采集
慕粉3832616 2016-10-10

xml

截图
0赞 · 0采集
crisita 2016-10-09

xml是用来描述数据，重点是什么是数据，如何存放数据；与存放数据息息相关 html是用来显示数据的，重点是显示数据，如何显示数据更好

0赞 · 0采集
Ray丶Kwok 2016-09-30

文档类型

截图
0赞 · 0采集

数据加载中...