dom对象

JavaScript组成

拟墨画扇 提交于 2020-01-29 04:05:12
JavaScript由ECMAScript,Dom,Bom三部分组成. ECMAScript是一种由Ecma国际(前身为欧洲计算机制造商协会,英文名称是European Computer Manufacturers Association)通过ECMA-262标准化的脚本程序设计语言。这种语言在万维网上应用广泛,它往往被称为JavaScript或JScript,但实际上后两者是ECMA-262标准的实现和扩展。 DOM:标准化组织是W3C, HTML文档模型节点 BOM:Browers Object Model 浏览器对象模型 缺乏标准 来源: https://www.cnblogs.com/tx720/p/5687353.html

前端基础之BOM和DOM

时光总嘲笑我的痴心妄想 提交于 2020-01-28 17:06:26
BOM:浏览器对象模型,可以使JS有能力操作浏览器 DOM:文档对象模型,可以访问HTML文档内的所有元素 Window对象 所有浏览器都支持 window 对象。它表示浏览器窗口 一些常用的Window方法: window.innerHeight - 浏览器窗口的内部高度 window.innerWidth - 浏览器窗口的内部宽度 window.open() - 打开新窗口 window.close() - 关闭当前窗口 window的子对象 navigator对象(了解即可) 浏览器对象,通过这个对象可以判定用户所使用的浏览器,包含了浏览器相关信息。 navigator . appName   // Web浏览器全称 navigator . appVersion   // Web浏览器厂商和版本的详细字符串 navigator . userAgent   // 表示是否是一个浏览器 navigator . platform    // 浏览器运行所在的操作系统 screen对象(了解即可) 屏幕对象,不常用。 screen.availWidth - 可用的屏幕宽度 screen.availHeight - 可用的屏幕高度 history对象(了解即可) window.history 对象包含浏览器的历史。 history . forward ( ) // 前进一页

.prop()与.attr()

倖福魔咒の 提交于 2020-01-28 05:35:57
因此, jQuery 1.6具有新的功能 prop() 。 $(selector).click(function(){ //instead of: this.getAttribute('style'); //do i use: $(this).prop('style'); //or: $(this).attr('style'); }) 还是在这种情况下他们做同样的事情? 如果我 确实 必须切换到使用 prop() ,那么如果我切换到1.6,所有旧的 attr() 调用都会中断? 更新 selector = '#id' $(selector).click(function() { //instead of: var getAtt = this.getAttribute('style'); //do i use: var thisProp = $(this).prop('style'); //or: var thisAttr = $(this).attr('style'); console.log(getAtt, thisProp, thisAttr); }); <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.0/jquery.min.js"></script> <div id='id' style=

webWorker

左心房为你撑大大i 提交于 2020-01-27 02:53:02
一、webWorker之初体验 在 "setTimeout那些事儿" 中,说到JavaScript是单线程。也就是同一时间只能做同一事情。 也好理解,作为浏览器脚本语言,如果JavaScript不是单线程,那么就有点棘手了。比如,与用户交互或者对DOM进行操作时,在一个线程上修改某个DOM,另外的线程删除DOM,这时浏览器该如何抉择呢? 所以,JavaScript是单线程也是有背景的。 如下: <!DOCTYPE html> <head> <title>singleThread</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> </head> <body> <script> //添加到任务队列中,待同步任务所处的‘执行栈’执行完毕,1秒后执行任务队列中的这个匿名函数 setTimeout(function(){ console.log('come on'); },1000); //只要不关闭该alert,‘执行栈’就没结束,从而也就不会进入到任务队列中 alert('waiting'); </script> </body> </html> 但, HTML5引入了一个 工作线程(webWorker) 的概念。它允许开发人员编写能够长时间运行而不被用户所中断的后台程序

DOM的简介

五迷三道 提交于 2020-01-27 02:47:57
DOM 是网页中的用来表示文档中对象的标准模型,通过JavaScript可以对网页中的所有DOM对象进行操作,是由万维网联盟W3C组织制定的标准编程接口。 文档对象模型( Document Object Model,简称DOM ),是W3C组织推荐的处理可扩展标志语言的标准编程接口。在网页上,组织页面(或文档)的对象被组织在一个树形结构中,用来表示文档中对象的标准模型就称为DOM。 Document Object Model的历史可以追溯至1990年代后期微软与Netscape的“浏览器大战”,双方为了在JavaScript与JScript一决生死,于是大规模的赋予浏览器强大的功能。 微软在网页技术上加入了不少专属事物,既有VBScript、ActiveX、以及微软自家的DHTML格式等,使不少网页使用非微软平台及浏览器无法正常显示。 DOM的分级: 根据W3C规范,将DOM分为1级、2级、3级共3个级别。 1、1级DOM 1级DOM在1998年10月份成为W3C的提议,由DOM核心与DOM HTML两个模块组成。DOM核心能映射以XML为基础的文档结构,允许获取和操作文档中的任意部分。 2、2级DOM 鉴于1级DOM仅以映射文档结构为目标,DOM 2级面向更为宽广。通过对原有DOM的扩展,2级DOM通过对象接口增加了对鼠标和用户界面事件、范围、遍历(重复执行DOM文档

解析XML文件

白昼怎懂夜的黑 提交于 2020-01-26 17:39:00
文章目录 1.xml解析方式 2.Jsoup解析器 Jsoup解析步骤 3.快捷查询方式 selector选择器 JsoupXpath解析 上期文章回顾:【 XML基础 】 1.xml解析方式 解析xml文档:操作xml文档,将文档中的数据读取到内存中 操作xml文档 解析(读取):将文档中的数据读取到内存中 写入:将内存中的数据保存到xml文档中( 持久化的存储 ) 解析xml 的方式: DOM:将标记语言文档一次性加载进内存,在内存中形成一颗DOM树 优点:操作方便,可以对文档进行CRUD的所有操作 缺点:占内存 SAX:逐行读取,基于事件驱动的 优点:不占内存 缺点:只能读取逐条读取,不能增删改 xml常见的解析器 JAXP:sun公司提供的解析器,支持DON和SAX两种思想 DOM4J:一款非常优秀的解析器 Jsoup:是一款Java的HTML解析器,可直接解析某个URL地址、HTML文本内容。它提供了一套非常省力的API,可通过DOM,CSS以及类似于jouery的操作方法来取出和操作数据。 PULL:Android操作系统内置的解析器,SAX方式 【 Jsoup及JsoupXpath下载 】 提取码:1tcs 2.Jsoup解析器 Jsoup是一款Java的HTML解析器,可直接解析某个URL地址、HTML文本内容。它提供了一套井常省力的API,可通过DOM

Property和Attribute的区别

╄→гoц情女王★ 提交于 2020-01-26 15:37:05
property 和 attribute非常容易混淆,两个单词的中文翻译也都非常相近(property:属性,attribute:特性),但实际上,二者是不同的东西,属于不同的范畴。 property是DOM中的属性,是JavaScript里的对象; attribute是HTML标签上的特性,它的值只能够是字符串; 基于JavaScript分析property 和 attribute html中有这样一段代码: <input id="in_1" value="1" sth="whatever"> 简单的在html页面上创建一个input输入栏(注意在这个标签中添加了一个DOM中不存在的属性“sth”),此时在JS执行如下语句 var in1 = document.getElementById('in_1'); 执行语句 console.log(in1); 从console的打印结果,可以看到in1含有一个名为“attributes”的属性,它的类型是NamedNodeMap,同时还有“id”和“value”两个基本的属性,但没有“sth”这个自定义的属性。 attributes: NamedNodeMap value: "1" id: "in_1" 有些console可能不会打印in1上的属性,那么可以执行以下命令打印要观察的属性: console.log(in1.id); //

JavaScript HTML DOM

末鹿安然 提交于 2020-01-26 12:57:17
1DOM 简介 1、HTML DOM (文档对象模型) 1.1当网页被加载时,浏览器会创建页面的文档对象模型(Document Object Model)。 1.2HTML DOM 模型被构造为对象的树。 1.3通过可编程的对象模型,JavaScript 获得了足够的能力来创建动态的 HTML。 JavaScript 能够改变页面中的所有 HTML 元素 JavaScript 能够改变页面中的所有 HTML 属性 JavaScript 能够改变页面中的所有 CSS 样式 JavaScript 能够对页面中的所有事件做出反应 2、查找 HTML 元素 2.1通过 JavaScript,您需要操作 HTML 元素。 * 通过 id 找到 HTML 元素 * 通过标签名找到 HTML 元素 * 通过类名找到 HTML 元素 3、通过 id 查找 HTML 元素 var x=document.getElementById("intro"); 4、通过标签名查找 HTML 元素 var x=document.getElementById("main"); var y=x.getElementsByTagName("p"); 2DOM HTML 1、改变 HTML 输出流 1.1在 JavaScript 中,document.write() 可用于直接向 HTML 输出流写内容。 <

AngularJS的启动引导过程

我与影子孤独终老i 提交于 2020-01-25 18:06:59
原文:http://www.angularjs.cn/A137?utm_source=ourjs.com 目录: 引导之前 自动引导启动框架 手工引导启动框架 引导第1步:创建注入器 引导第2步:创建根作用域 引导第3步:编译DOM子树 编译器/$compile 指令/directive 指令的规范化 1.引导之前:库阶段 在示例中,我们定义了一个指令ez-duang, 它应该会展开成一个动画 显示出来。 AngularJS代码: angular.module("ezstuff",[]) .directive("ezDuang",function(){ return { restrict : "E", template : "<img src='http://ww4.sinaimg.cn/bmiddle/757eb2ffjw1eptcr4qobjg209205dthh.gif'>" }; }); html代码: 应该在下面看到一幅动画才对! 但是,看起来没有什么动画显示出来。AngularJS似乎没有工作,为什么? 有点像操作系统,AngularJs也有一个启动引导的概念。 当你在HTML文件中引入angular.min.js时,AngularJS只是建立了一个全局的 angular对象,这个对象有一些方法可供开发者调用,但应用的框架还没有建立。 在这个阶段

DOM解析方式的一些概念

狂风中的少年 提交于 2020-01-25 07:46:07
DOM解析方式的一些概念 DOM:Document Object Model(文档对象模型) 用来将标记型文档封装成对象,并将标记型文档中的所以内容(标签,文本,属性等)都封装成对象 目的:为了更为方便地操作这些文档以及文档中的所有内容,因为对象的出现,就可以有属性和行为被调用。 文档对象模型 文档:标记型文档 对象:封装了属性和行为的实体,可以直接调用 模型:所有标记型给文档都具备一些共性特征的一个体现。 标记型文档(标签,属性,标签中封装的数据) 只要是标记型文档,DOM这种技术都可以对其进行操作。 常见的标记型文档:html xml DOM如何对标记型文档进行操作? 要操作标记型文档,必须对其进行解析 DOM技术的解析方式:将标记型文档解析成一棵DOM树,并将书中的内容都封装成节点对象。 注意:这种DOM解析方式的好处在于可以对树中的节点进行任意操作,比如:增删改查 弊端:这种解析需要将整个标记型文档加载进内存。意味着如果标记型文档过大,会浪费内存空间 简介另一种解析方式:SAX:是由一些组织定义的一种民间常用的一种解析方式,并不是W3C的标准。 而DOM是W3C的标准。 SAX解析的方式:基于事件驱动的解析。查询数据的速度很快,但是不能对标记进行增删改的动作。 DOM模型有三种 DOM level 1:将html文档封装成对象。 DOM level 2