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

DOM探索之基础详解篇

难度初级
时长 2小时11分
学习人数
综合评分9.60
274人评价 查看评价
9.8 内容实用
9.4 简洁易懂
9.6 逻辑清晰
  • 渲染引擎的渲染过程解析html、构建dom树构建渲染树(解析样式信息)布局渲染树(布局dom节点)绘制渲染树(绘制dom节点)
    https://img1.sycdn.imooc.com//64e2d91c0001f6c614670965.jpg

    查看全部
  • 特点

    1.1课程介绍
    1.DOM是Docunment、object、Model的缩写,直译过来就是文档对象模型。
    2.DOM的地位和作用
    1.HTML→CSS(定义样式)
    2.HTML→JavaScript(赋予行为)
    通过JavaScript实现页面的交互和动画效果等等。
    3.那么JavaScript通过什么来实现的呢?
    1.通过ECMAScript标准,我们可以编写程序让浏览器来解析
    2.利用ECMAScript我们可以通过BOD对象来操作浏览器窗口、
    浏览器导航对象、屏幕分辨率、浏览器历史、Cookies等等
    3.但是通过BOD来实现的交互远远不够,要实现页面的动态交互
    和效果,操作HTML才是核心。
    4.那么如何操作HTML呢,那就是DOM。简单来说,DOM给我们提
    供了用程序来动态控制HTML的接口,也就是早期的DHTML的
    概念。
    5.因此DOM处在JavaScript赋予HTML具备动态交互的核心地位
    上。
    注:BOM(Browser Object Model) 是指浏览器对象模型
    cookies (从客户端的硬盘读取数据的一种技术)
    3.DOM探索系列课程要点
    1.想要安全的操作DOM必须等到页面上所有的HTML都解析成DOM节点,
    才能进行操作,因此了解DOMReady是第一步。
    2.接着我们来探究节点,学习文档和节点的类型,元素节点的判断、
    元素节点的继承层次、以及节点的分类等内容。
    3.然后学习节点的操作,比如节点创建与删除、节点查找与筛选等。
    4.接着学习表格与表单的操作
    5.最后我们探讨属性系统和样式设置
    6.顺序图
    1.DOMReady→2.节点探究→节点创建与删除→节点查找与筛选→
    表单与表格操作→属性系统→样式设置
    4.基础详解篇课程要点
    1.首先通过滑动门特效课堂案例感性认识DOM在开发中是如何运用的
    2.其次,了解什么DOM以及与DOM相关的基础概念
    3.重新认识HTML与XHTML文档类型,以及文档的各种节点类型
    4.接着详细的实现DOMReady

    查看全部
  • 渲染流程。

    查看全部
  • nodeName与nodeValue

    查看全部
  • DOM Ready: DOM树构建完毕
    查看全部
    0 采集 收起 来源:什么是domReady

    2020-12-30

  • DOM -- document object model 文档对象模型

    查看全部
    0 采集 收起 来源:课程介绍

    2020-12-20

  • <!DOCTYPE html>

    <html>

    <head>

            <meeta charset="utf-8">

            <title>nodeType</title>

    </head>

    <body>

    <div id="contaiainer">这是一个元素节点</div>

    <script>

            var divNode=document.getElementById("container");

             if (divNode.nodeType==Node.ELEMNT_NODE){

    }

    </script>

    </body>

    </html>

    查看全部
    0 采集 收起 来源:DOM nodeType

    2020-11-04

  • 节点的包含contains 为考虑浏览器的兼容性,需要做判断。 对于chrome等现代浏览器:无需做判断,可直接运用节点的contains方法判断节点的包含关系。 对于IE6等低版本浏览器:运用while循环通过判断子节点的父节点是否===本节点? 是,return true;否,return false。
    查看全部
  • http://img1.sycdn.imooc.com//5e1d1f580001fd9607930432.jpg在这种幸存者

    查看全部
  • IIEF-立即调用函数表达式

    (function(){ /* code */ }()); // 老道推荐写法(function(){ /* code */ })(); // 当然这种也可以

    (function(test){

    alert(test);

    }(123));


    查看全部
    0 采集 收起 来源:实例JS+DOM

    2020-01-11

  •          offsetWidth:
          获取的是盒子最终的宽
          offsetHeight:
          获取的是盒子最终的高



    查看全部
    0 采集 收起 来源:实例JS+DOM

    2020-01-11

首页上一页1234567下一页尾页

举报

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

微信扫码,参与3人拼团

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

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