为了账号安全,请及时绑定邮箱和手机立即绑定

DOM探索之基础详解篇

难度初级
时长 2小时11分
学习人数
综合评分9.60
274人评价 查看评价
9.8 内容实用
9.4 简洁易懂
9.6 逻辑清晰
  • 元素节点, > 拥有子节点和文本,是唯一能拥有属性的节点类型<br> 属性节点, > 元素中的属性,是附属于元素的,是包含他的元素节点的一部分,不属于文档树的一部分<br> 文本节点, > 只包含文本内容(可以只包含空白)的节点,在xml中称为字符数据;<br> > 在文档树中元素的文本内容和属性的文本内容都是由文本节点表示的<br> > 某个节点的空白区域,也是属于文本节点<br> 注释节点: > 表示注释的内容<br> 文档节点: > 文档树的根节点,是其他节点的父节点; > 注意不是html或者xml的根元素。根元素是作为文档节点的子节点出现的<br> > 整个代码之上看做是文档节点<br> 文档类型节点: 例;<!doctype html><br> 文档片段节点: > 文档片段是轻量级的或者是最小的Document 对象,他表示文档的一部分或者是一段,他不属于文档树; > 他的特殊行为:占位符,暂时存放一次插入文档的节点,同时有利于剪贴复制操作
    查看全部
    3 采集 收起 来源:DOM 节点类型

    2018-03-22

  • 可以参考这个链接http://stackoverflow.com/questions/384286/javascript-isdom-how-do-you-check-if-a-javascript-object-is-a-dom-object/27112297#27112297
    查看全部
  • isElement 是否是元素节点 isHTML 是否是HTML的元素节点 isXML 是否是XML的元素节点 contains 是否是包含关系
    查看全部
  • DOMReady实现策略 1.支持DOMCConrentLoaded,就是用DOMContentLoaded. 2.不支持,就是用Diego Perini发现的著名Hack兼容.兼容原理是,通过IE中的document.documentElement.doScroll('left')来判断DOM树是否创建完毕.
    查看全部
  • 他们两个的区别: 块级元素一般用来搭建网站架构、布局、承载内容 内联元素一般用来在网站内容中的某些细节或者部位,用以“强调、区分样式、上标、下标、锚点”等等。 它们可以互相转换。display:inline|block 块级元素的特点:每一个块级元素都识从一个新行开始显示,其后的元素需要另起一行。 嵌套规则: 块级元素可以包含内联元素或某些块级元素,但内联元素不能包含块级元素,它只能包含其它内联元素。 块级元素不能放在p里面。 有几个特殊的块级元素只能包含内联元素,不能包含块级元素。如h1,h2,h3,h4,h5,h6,p,dt li内可以包含div 块级元素与块级元素并列、内联元素与内联元素并列。(错误的:<div><h2></h2><span></span></div>)
    查看全部
    2 采集 收起 来源:HTML嵌套规则

    2018-03-22

  • 1、解析HTML,构建DOM树(构建DOM节点); 2、构建渲染树(解析样式信息,包括外部的css文件、style标签中的样式)。渲染树由一些包含有各种属性的矩形组成,他们将会按照正确的顺序显 示到屏幕上; 3、布局渲染树(布局DOM节点),执行布局的过程,将确定每个节点在屏幕上的确切坐标; 4、绘制渲染树(绘制DOM节点,即遍历渲染树),使用UI后端层来绘制每个节点
    查看全部
  • 节点类型和其对应的nodeName、nodeValue
    查看全部
  • 节点的类型
    查看全部
    2 采集 收起 来源:DOM nodeType

    2015-10-23

  • DOMReady实现策略
    查看全部
  • 自己根据老师讲的改进了一下: 1.用不到每道门移动的距离translate,可以发现第几道门移动后(序号从0开始),left值就为exposeWidth的几倍。 2.加上onmouseout事件。 window.onload=function(){ //容器对象 var box=document.getElementById('container'); //获得图片NodeList对象集合 var imgs=box.getElementsByTagName('img'); //单张图片宽度 var imgWidth=imgs[0].offsetWidth; //设置掩藏门体露出的宽度 var exposeWidth=160; //设置容器总宽度 var boxWidth=imgWidth+(imgs.length-1)*exposeWidth; box.style.width=boxWidth+'px'; //设置每道门的初始位置 function setImgsPos(){ for(var i=1;i<imgs.length;i++){ imgs[i].style.left=imgWidth+exposeWidth*(i-1)+'px'; } } setImgsPos(); //为每道门绑定事件 for(var i=0;i<imgs.length;i++){ //使用立即调用的函数表达式,为了获得不同的i值 (function(i){ imgs[i].onmouseover=function(){ //先将每道门复位 setImgsPos(); //打开门 for(var j=1;j<=i;j++){ //alert(i); imgs[j].style.left=exposeWidth*j+'px'; } } //关上门,也就是复位 imgs[i].onmouseout=function(){ setImgsPos(); } })(i) } }
    查看全部
    2 采集 收起 来源:实例JS+DOM

    2018-03-22

  • 块状元素与内联元素嵌套规则 1,块状元素可以包含内联元素或 某些 块元素,但内联元素却不能包含块元素,它只能包含其他的内联元素。 2,块级元素不能放在<p>里面。 3,有几个特殊的块级元素只能包含內联元素,不能再包含块级元素,这几个特殊的标签:h1-h6,p,dt。 4,li内可以包含div标签。(两者都是装载内容的容器,没有级别之分,同理,li内可以容纳ul/ol) 5,块级元素与块级元素并列,内联元素与内联元素并列。 <div><h2></h2><span></span></div>不提倡
    查看全部
    2 采集 收起 来源:HTML嵌套规则

    2018-03-22

  • 图片不同的点击位置,转向不同的链接
    查看全部
    2 采集 收起 来源:HTML嵌套规则

    2017-10-22

  • DOM1级主要定义了HTML和XML文档的底层结构。在DOM1中,DOM由两个模块组成:DOM Core(DOM核心)和DOM HTML。其中,DOM Core规定了基于XML的文档结构标准,通过这个标准简化了对文档中任意部分的访问和操作。DOM HTML则在DOM核心的基础上加以扩展,添加了针对HTML的对象和方法,如:JavaScript中的Document对象. DOM2级在原来DOM的基础上又扩充了鼠标、用户界面事件、范围、遍历等细分模块,而且通过对象接口增加了对CSS的支持。DOM1级中的DOM核心模块也经过扩展开始支持XML命名空间。在DOM2中引入了下列模块,在模块包含了众多新类型和新接口: DOM视图(DOM Views):定义了跟踪不同文档视图的接口 DOM事件(DOM Events):定义了事件和事件处理的接口 DOM样式(DOM Style):定义了基于CSS为元素应用样式的接口 DOM遍历和范围(DOM Traversal and Range):定义了遍历和操作文档树的接口 DOM3进一步扩展了DOM,在DOM3中引入了以下模块: DOM加载和保存模块(DOM Load and Save):引入了以统一方式加载和保存文档的方法 DOM验证模块(DOM Validation):定义了验证文档的方法 DOM核心的扩展(DOM Style):支持XML 1.0规范,涉及XML Infoset、XPath和XML Base
    查看全部
    2 采集 收起 来源:认识DOM

    2017-08-13

  • DOM1级主要定义了HTML和XML文档的底层结构。在DOM1中,DOM由两个模块组成:DOM Core(DOM核心)和DOM HTML。其中,DOM Core规定了基于XML的文档结构标准,通过这个标准简化了对文档中任意部分的访问和操作。DOM HTML则在DOM核心的基础上加以扩展,添加了针对HTML的对象和方法,如:JavaScript中的Document对象. DOM2级在原来DOM的基础上又扩充了鼠标、用户界面事件、范围、遍历等细分模块,而且通过对象接口增加了对CSS的支持。DOM1级中的DOM核心模块也经过扩展开始支持XML命名空间。在DOM2中引入了下列模块,在模块包含了众多新类型和新接口: DOM视图(DOM Views):定义了跟踪不同文档视图的接口 DOM事件(DOM Events):定义了事件和事件处理的接口 DOM样式(DOM Style):定义了基于CSS为元素应用样式的接口 DOM遍历和范围(DOM Traversal and Range):定义了遍历和操作文档树的接口 DOM3进一步扩展了DOM,在DOM3中引入了以下模块: DOM加载和保存模块(DOM Load and Save):引入了以统一方式加载和保存文档的方法 DOM验证模块(DOM Validation):定义了验证文档的方法 DOM核心的扩展(DOM Style):支持XML 1.0规范,涉及XML Infoset、XPath和XML Base
    查看全部
    2 采集 收起 来源:认识DOM

    2017-05-31

  • 判断XML和HTML的方法,一般用功能判断法,属性判断法容易被攻破
    查看全部

举报

0/150
提交
取消
课程须知
本课程是前端中级课程 1、您要具备HTML基础知识 2、您要具备CSS基础知识 3、您要具备JS基础知识
老师告诉你能学到什么?
1、重新认识DOM 2、剖析domReady 3、学会元素节点的类型判断、继承层次和分类

微信扫码,参与3人拼团

意见反馈 帮助中心 APP下载
官方微信
友情提示:

您好,此课程属于迁移课程,您已购买该课程,无需重复购买,感谢您对慕课网的支持!