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

DOM探索之基础详解篇

难度初级
时长 2小时11分
学习人数
综合评分9.60
274人评价 查看评价
9.8 内容实用
9.4 简洁易懂
9.6 逻辑清晰
  • DOM探索系列课程要点
    查看全部
    0 采集 收起 来源:课程介绍

    2017-03-21

  • html搭建页面,css做样式,js赋予行为
    查看全部
    0 采集 收起 来源:课程介绍

    2017-03-20

  • html搭建页面,css
    查看全部
    0 采集 收起 来源:课程介绍

    2017-03-20

  • 判断XML和HTML的方法,一般用功能判断法,属性判断法容易被攻破
    查看全部
  • !!的目的是,当操作数是undefined或null时能够返回false
    查看全部
  • 元素节点类型的判断
    查看全部
  • window.onload: 等所有资源加载完 document.ready: DOM树构建完资源还没加载完 应该使用ready保证用户体验。否则当网站有很多图片资源时要很长时间才能加载完这段时间内Js都用不了
    查看全部
  • //jQuery思路的DOMReady事件 function myReady(fn) { // 对于现代浏览器,对于DOMContentLoaded事件的处理采用标准的事件绑定方式 if (document.addEventListener) { document.addEventListener('DOMContentLoaded', fn, false); } else { IEContentLoaded(fn); } // IE模拟DOMContentLoaded function IEContentLoaded(fn) { var d = window.document; var done = false; // 只执行一次用户的回调函数init() var init = function() { if (!done) { var done = true; fn(); } }; (function() { try { // DOM树未创建完之前调用doScroll会抛出错误 d.documentElement.doScroll('left'); } catch (e) { // 延时再试一次 setTimeout(arguments.callee, 50); return; } // 没有错误就表示DOM树创建完毕,然后立即执行用户回调 init(); })(); // 监听document的加载状态 d.onreadystatechange = function() { // 如果用户是在documentReady之后绑定的函数,就立即执行 if (d.readyState == 'complete') { d.onreadystatechange = null; init(); } } } }
    查看全部
    1 采集 收起 来源:domReady的实现

    2017-03-20

  • Domready(有一定的执行时间)之后执行js 定时器:无法在domReay时渲染 seTimeout(function(){ document.getElementById("header").style.color="red"; },30); 用window.onload = function(){ docyment.getElementById("ID").style.color="red"; }时,在资源加载完后,没有闪动,看起来没问题, 一个页面文档的资源过多,会“迟了”; 实际中,然页面加载完在做 JS的ready回调 $(document).ready(function(){ }) DOMReady实际策略: W3C——》1、支持DOMContentLoaded事件的,就使用DOMContentLoaded事件 ——》2、不支持的,就用HACK兼容\*兼容原理是,判断DOM树是否建立完毕,document.documentElement.doScroll('left')*\
    查看全部
  • webkit主要渲染流程:蓝色为复杂的渲染运算
    查看全部
  • domReady: html标签需要通过浏览器渲染引擎的解析才会变成dom节点,在刷新url地址的时候就有dom构建的过程。当所有html都转化为节点后,dom树才构建完毕,简称为dom ready。所以,一旦把script放在body前面,dom还没生成,就调用了dom(document.xxxx)明显是不行的(javascript以编写顺序解析---脚本语言)
    查看全部
    0 采集 收起 来源:什么是domReady

    2017-03-20

  • 节点的nodeName与nodeValue: 节点类型 nodeName nodeValue Element(元素节点) 元素的标签名 null Attr(属性节点) 属性的名称 属性的值 Text(文本节点) #text 节点所包含的文本 Comment(注释节点) #comment 注释的内容 DocumentType(文档类型节点) doctype的名称 null DocumentFragment(文档片段节点) #document-fragment null
    查看全部
  • Elemnet: var divNode=document.getElementById("ID"); if(divNode==1){}判断divNode是否是某个节点类型(使用数值常量);
    查看全部
    0 采集 收起 来源:DOM nodeType

    2018-03-22

  • 节点类型: 元素节点element 属性节点attr 文本节点text 注释节点comment 文档节点document 文档类型节点documenttype 文档片段节点documentfragment
    查看全部
    0 采集 收起 来源:DOM 节点类型

    2017-03-20

  • 专注的领域不同,选择不同: HTML(超文本标记语言)用来显示数据,不能解释影音文件和化学公式等,不利于扩展 XML(可扩展标记语言)用来描述数据,什么是数据,如何存放数据 XHTML(早期 HTML与xml合并作用)
    查看全部
    1 采集 收起 来源:DOM 文档类型

    2017-03-20

举报

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

微信扫码,参与3人拼团

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

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