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

DOM探索之基础详解篇

难度初级
时长 2小时11分
学习人数
综合评分9.60
273人评价 查看评价
9.8 内容实用
9.4 简洁易懂
9.6 逻辑清晰
  • 渲染流程。

    查看全部
  • nodeName与nodeValue

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

    2020-12-30

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

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

    2020-12-20

  • reset.css链接地址:

    http://meyerweb.com/eric/tools/css/reset/

    查看全部
    1 采集 收起 来源:案例HTML+CSS结构

    采集自:jerrychane 2020-12-03

  • <!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

  • Window 对象表示浏览器中打开的窗口;所以if(window.Node && (obj instanceof Node)意为判断当前窗口中是否有节点,obj是否为节点类型的一个实例.
    查看全部
  • !!一般用来将后面的表达式转换为布尔型的数据(boolean). 因为javascript是弱类型的语言(变量没有固定的数据类型)所以有时需要强制转换为相应的类型,类似的如: a=parseInt("1234"); a="1234"+0 //转换为数字 b=1234+"" //转换为字符串 c=someObject.toString() //将对象转换为字符串 其中第1种、第4种为显式转换,2、3为隐式转换. 布尔型的转换,javascript约定和c类似,规则为 : false、undefinded、null、0、"" 为 false ; true、1、"somestring"、[Object] 为 true . !!el表示判断是否el存在,存在为true,反之为false.
    查看全部
    1 采集 收起 来源:如何判断节点是元素节点

    采集自:missxu 2020-07-26

  • isElement  是否是元素节点
    isHTML     是否是HTML的元素节点
    isXML      是否是XML的元素节点
    contains   是否是包含关系

    查看全部
  • window.onload: 等所有资源加载完 document.ready: DOM树构建完资源还没加载完 应该使用ready保证用户体验。否则当网站有很多图片资源时要很长时间才能加载完这段时间内Js都用不了
    查看全部
  • 元素节点类型判断 /*isElement*/ var testDiv = document.createElement('div'); var isElement = function(obj){ if(obj && obj.nodeType === 1){ if (window.Node && (obj instanceof Node)) { return true; } try{ testDiv.appendChild(obj); testDiv.removeChild(obj); } catch(e) { return false; } return false; } return false; } /*isXML*/ var isXML = function (document) { return (!!document.xmlVersion) || (!!docuemnt.xml) || (toString.call(document) == '[object XMLDocument]') || ( document.nodeType == 9 && document.documentElement.nodeName != 'HTML'); } /*2*/ var isXML = function(doc){ return doc.createElement('p').nodeName != doc.createElement('P').nodeName; } /*isHTML*/ var isHTML = function(doc){ return doc.createElement('p').nodeName === doc.createElement('P').nodeName; } /*自定义方法来判断结点之间的包含关系,兼容所有浏览器*/ function fixContains (pNode, cNode) { try{ while(cNode = cNode.parentNode){ if(cNode === pNode){ return true; } } return false; }catch(e){ return false; } }
    查看全部
  • DOMReady实现策略
    查看全部
    1 采集 收起 来源:domReady的实现

    采集自:Nika_ 2020-07-26

  • 浏览器渲染引擎的基本渲染流程: 1、解析HTML,构建DOM树(构建DOM节点); 2、构建渲染树(解析样式信息,包括外部的css文件、style标签中的样式)。渲染树由一些包含有各种属性的矩形组成,他们将会按照正确的顺序显 示到屏幕上; 3、布局渲染树(布局DOM节点),执行布局的过程,将确定每个节点在屏幕上的确切坐标; 4、绘制渲染树(绘制DOM节点,即遍历渲染树),使用UI后端层来绘制每个节点。
    查看全部
  • 原生js实现domready实现策略 1.支持domcontentload事件的,就使用DOMCONTENTLOAD事件 2.不支持的,就用通过IE中的document.documentenlemt.doscroll("left")来判定DOM树是否创建完成
    查看全部
  • domReady的实现策略 window.onload事件: 浏览器绘制完dom节点,再加载完页面上的所有资源以后,才执行我们自己定义的代码。也就是说在文档解析渲染,资源加载完成之前,不让js脚本执行。但当资源过多时便出现短板,并不实用。 jQ中的DOMReady实现策略: $(document).ready(function(){});
    查看全部
    2 采集 收起 来源:domReady的实现策略

    采集自:Airplane 2020-07-26

  • 节点的包含contains 为考虑浏览器的兼容性,需要做判断。 对于chrome等现代浏览器:无需做判断,可直接运用节点的contains方法判断节点的包含关系。 对于IE6等低版本浏览器:运用while循环通过判断子节点的父节点是否===本节点? 是,return true;否,return false。
    查看全部
  • http://img3.mukewang.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

  • domReady: html标签需要通过浏览器渲染引擎的解析才会变成dom节点,在刷新url地址的时候就有dom构建的过程。当所有html都转化为节点后,dom树才构建完毕,简称为dom ready。所以,一旦把script放在body前面,dom还没生成,就调用了dom(document.xxxx)明显是不行的(javascript以编写顺序解析---脚本语言)
    查看全部
    0 采集 收起 来源:什么是domReady

    采集自:qq_FAN_134084671 2019-12-12

  • https://img2.mukewang.com/5b6453c000018f0207010273.jpg

    本案例是“文档片段节点”的添加案例。

    innerHTML:设置或返回表格行的开始和结束标签之间的 HTML。

    appendchild:向节点添加最后一个子节点。一般用法:

                    对象名.appendchild(添加内容的对象名,如:li);

                    document.getElementById(被添加者,如:list-node).appendChild(对象名,如frag);

    2、节点分类

    Element:如html、head、meta、title、body、div、ul、script等;

    Attr:非文档树的一部分,包含于元素节点,如:lang、charset、id等;

    Ttext:字符数据,可有空白和更多的数据组成,元素的属性内容和属性的文本内容都是由Text表示,如标签间的文字,标签到标签间的空白;

    Comment:文档中的注释内容;

    Document:文档树的根节点,是其他节点的父节点,飞html、XML的根元素,因在其中像注释节点可在文档之外。我们将整个代码之上看做文档节点既document节点,它包含两个节点,分别是doctype节点和html节点;

    DocumentType:每个document节点都有一个documenttype节点,其值或是  (now?)或者document对象,如:<!DOCTYPE>定义就是documenttype节点;

    DocumentFragment:是轻量级的或者最小的document对象,它表示文档的一部分或者一段,不属于文档树,其有一个十分有用的特殊行为,如,当请求把一个documentfragment节点插入到文档树的时候,插入的不是documentfragment节点自身,而是它的子孙节点,此时它是有用的占位符,暂时存放那些一次插入的节点,同事它有利于实现文档的剪切、复制、粘贴等操作,如:frag。

    查看全部
    0 采集 收起 来源:DOM 节点类型

    采集自:弦上涟漪 2019-12-11

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

    采集自:麻小吉 2019-12-11

  • 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
    查看全部
    0 采集 收起 来源:课程介绍

    采集自:qq_Ostrovsky_0 2019-12-10

首页上一页1234567下一页尾页

举报

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

微信扫码,参与3人拼团

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

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