【星星dom】的更多相关文章

星星dom

<!DOCTYPE html><html><head><meta charset="UTF-8"><title>星星</title></head><body><canvas id="canvas"> 当前浏览器不支持Canvas,请更换浏览器后再试</canvas> <script type=text/javascript> windo…

微信小程序滚动动画，点击事件及评分星星制作！

前言 小程序上线刷爆了朋友圈,但是最近渐渐消沉了,很少有动静!最近公司项目需要,体验了一下微信小程序,制作了几个功能,布局感觉很简单,但是交互和动画等写起来确实很费劲,主要是因为他不能操作DOM,只能修改数据!下面介绍一下我制作小程序完成的几个小的功能,希望能够给开发小程序的朋友带来帮助! 滚动动画制作 小程序制作回到顶部,或者滚动到某个位置,很简单,也有很多实现方法! 例如: .动态改变它的 scroll-top .scroll-into-view 滚动到某个ID的位置 但是,问题来了,这个效…

【JavaScript学习整理】DOM对象(location history screen navigator)

DOM: 描述网页各个组成部分之间的关系. parentNode: 父节点 childNode: 子节点 firstChild: 第一个子节点 lastChild: 最后一个子节点 nextSibling: 下一个姐妹或兄弟节点 previousSibling: 前一个兄弟节点 案例:打开网页出现随机位置星星,点击星星,星星消失 <script type="text/javascript"> window.onload = init; function init() { w…

014、BOM与DOM对象的应用

Screen屏幕对象 Width:屏幕的宽度 Height:屏幕的高度 availWidth:屏幕的有效宽度(不含任务栏) availHeight:屏幕的有效高度(不含任务栏) colorDepth:色深 <script type="text/javascript"> //实例:测试自己显示屏幕相关信息 var str = "<h2>自己屏幕的相关信息</h2>"; str += "总宽度:"+screen.w…

html dom 转化成图片踩坑记（canvas toDataURL）

需求 在开发过程中遇到这么一个需求,h5页面需要将一个html dom转化成图片,便于用户保存. 面向百度搜索第三方得 html2canvas 和 dom-to-image 两者在写这篇笔记之前在github上的星星数分别是 dom-to-image 4k ️ html2canvas 13.7k ️ 两者都有尝试过,都有意想不到的bug,包括 部分手机有某些背景图片无法展示,为空白 iphone8 plus ios 11中根本不调用这个转换方法,从而得不到想要的图片. 等等 自己动手 思路 利用…

JS运算符，流程控制，函数，内置对象，BOM与DOM

运算符 1.算数运算符 运算符 描述 + 加 - 减 * 乘 / 除 % 取余(保留整数) ++ 递加 - - 递减 ** 幂 var x=10; var res1=x++; '先赋值后自增1' 10 var res2=++x; '先自增1后赋值' 12 2.赋值运算符 运算符 例子 等同于 = x = y x = y += x += y x = x + y -= x -= y x = x - y *= x *= y x = x * y /= x /= y x = x / y %= x %= y…

关于DOM的操作以及性能优化问题-重绘重排

 写在前面: 大家都知道DOM的操作很昂贵. 然后贵在什么地方呢? 一.访问DOM元素 二.修改DOM引起的重绘重排 一.访问DOM 像书上的比喻:把DOM和JavaScript(这里指ECMScript)各自想象为一个岛屿,它们之间用收费桥梁连接,ECMAScript每次访问DOM,都要途径这座桥,并交纳"过桥费",访问DOM的次数越多,费用也就越高.因此,推荐的做法是尽量减少过桥的次数,努力待在ECMAScript岛上.我们不可能不用DOM的接口,那么,怎样才能提高程序的效率? 既…

读书笔记：JavaScript DOM 编程艺术（第二版）

读完还是能学到很多的基础知识,这里记录下,方便回顾与及时查阅. 内容也有自己的一些补充. JavaScript DOM 编程艺术(第二版) 1.JavaScript简史 JavaScript由Netscape公司与Sun公司合作开发,在JavaScript之前,web浏览器只是显示文本文档的软件,JavaScript之后,网页内容不再局限于枯燥的文本,交互性显著改善.在JavaScript的第一个版本,即JavaScript 1.0版本,出现在1995年推出的Netscape Navigator…

页面嵌入dom与被嵌入iframe的攻防

1.情景一:自己的页面被引入(嵌入)至别人的页面iframe中 if(window.self != window.top){ //url是自己页面的url window.top.location.href = url } 通过顶层框架的判断,得知自己所在的框架是否是顶层框架.来判断自己页面所在的情况. 知识点:不同域中的iframe不能相互访问. 比如我们的页面在别人的页面iframe中,我们的页面跟别人的页面就在不同的域中. 这时候我们通过window.top.location是无法访问loc…

通俗易懂的来讲讲DOM

DOM是所有前端开发每天打交道的东西,但是随着jQuery等库的出现,大大简化了DOM操作,导致大家慢慢的“遗忘”了它的本来面貌.不过,要想深入学习前端知识,对DOM的了解是不可或缺的,所以本文力图系统的讲解下DOM的相关知识,如有遗漏或错误,还请大家指出一起讨论^ ^. 一.DOM是什么? DOM(文档对象模型)是针对HTML和XML文档的一个API,通过DOM可以去改变文档. 这个说法很官方,大家肯定还是不明白. 举个例子:我们有一段HTML,那么如何访问第二层第一个节点呢,如何把最后一个节…

HTML DOM 介绍

本篇主要介绍DOM内容.DOM 节点.节点属性以及获取HTML元素的方法. 目录 1. 介绍 DOM:介绍DOM,以及对DOM分类和功能的说明. 2. DOM 节点:介绍DOM节点分类和节点层次. 3. HTML DOM 节点属性:介绍HTML DOM节点属性,如:innerHTML.innerText.nodeName.nodeValue以及nodeType等. 4. 获取 HTML 元素节点方法:介绍文档节点(document).元素节点可以通过getElementById.getEleme…

HTML DOM 对象

本篇主要介绍HTML DOM 对象:Document.Element.Attr.Event等4个对象. 目录 1. Document 对象:表示文档树的根节点,大部分属性和方法都是对元素进行操作. 2. Element 对象:表示文档中的元素,可包含为元素节点.文本节点以及注释节点. 3. Attr 属性对象:表示一个Element节点的属性.可获取.添加.修改指定的属性. 4. Event 对象:表示事件发生时的状态,比如事件在其中发生的元素.键盘按键的状态.鼠标的位置.鼠标按钮的状态等等.…

重撸js_2_基础dom操作

1.node 方法 返回 含义 nodeName String 获取节点名称 nodeType Number 获取节点类型 nodeValue String 节点的值(注意:文本也是节点) 2.innerText和innerHTML 方法 含义 innerText 设置或返回表格行的开始和结束标签之间的文本(剥离html) innerHTML 设置或返回表格行的开始和结束标签之间的HTML 3.遍历操作 方法 返回 含义 firstChild Node 返回子节点列表中的第一个节点 lastCh…

虚拟dom与diff算法 分析

好文集合: 深入浅出React(四):虚拟DOM Diff算法解析 全面理解虚拟DOM,实现虚拟DOM…

窥探Vue.js 2.0 - Virtual DOM到底是个什么鬼？

引言 你可能听说在Vue.js 2.0已经发布,并且在其中新添加如了一些新功能.其中一个功能就是"Virtual DOM". Virtual DOM是什么 在之前,React和Ember早就开始用虚拟DOM技术来提高页面更新的速度了. 若想了解它是如何工作的,就要先认清这几个概念: 1.更新DOM是非常昂贵的操作 当我们使用Javascript来修改我们的页面,浏览器已经做了一些工作,以找到DOM节点进行更改,例如: document.getElementById('myId').ap…

jQuery学习之路（2）-DOM操作

▓▓▓▓▓▓ 大致介绍 jQuery作为JavaScript库,继承并发扬了JavaScript对DOM对象操作的特性,使开发人员能方便的操作DOM对象. ▓▓▓▓▓▓ jQuery中的DOM操作 看看DOM操作都有哪些 逐一来看 先写一份HTML代码,后面的代码将操作这份HTML代码 <p title="选择你最喜欢的水果">你最喜欢的水果?</p> <ul> <li title="苹果">苹果</li>…

DOM、BOM 操作超级集合

本章内容: 定义 节点类型 节点关系 选择器 样式操作方法style 表格操作方法 表单操作方法 元素节点ELEMENT 属性节点attributes 文本节点TEXT 文档节点 Document 位置操作方法 定时器 弹出框 location 其它 事件操作 实例 定义 文档对象模型(Document Object Model,DOM)是一种用于HTML和XML文档的编程接口. 节点类型 12中节点类型都有NodeType属性来表明节点类型 节点类型 描述 1 Element 代表元素 2 A…

JavaScript实现DOM对象选择器

目的: 根据传入的选择器类型选出第一个符合的DOM对象. ①可以通过id获取DOM对象,例如 $("#adom"); ②可以通过tagName获取DOM对象,例如 $("a"); ③可以通过样式名称获取DOM对象,例如 $(".classa"); ④可以通过attribute匹配获取DOM对象,例如 $("[data-log]"),$("[data-time=2015]"); ⑤可以通过层叠组合获取DOM对…

文档对象模型DOM通俗讲解

转自:http://www.jb51.net/article/42671.htm 在开始之前先说一点,DOM是非常容易理解的,但是大家说的太官方,让人很是难于理解,我们就用非常简单的语言翻译一遍.加深对DOM的理解,从而对它有一个全面的认识. 什么是DOM DOM的全称是Document Object Model,即文档对象模型,它允许脚本控制Web页面.窗口和文档. 如果没有DOM,JavaScript将是另外一种脚本语言:而有了DOM,它将成为制作动态页面的强有力工具.DOM不是JavaSc…

Javascript高性能编程-提高Dom访问速度

在浏览器中对于Dom的操作和普通的脚本的操作处于两个不同的dll中,两个dll的交互是比较耗时的,优化对Dom的操作可以提高脚本的执行速度.下面是对如何优化的一些总结: 将需要多次操作的节点存储在一个变量中,避免多次获取. 对于大多数浏览器来说innerHTML操作比Dom操作速度要快,最新的浏览器则相反,但对于大多数日常操作来说具体差异并不大,另外,如果需要新创建的html片段中的脚本能够执行则需要使用Dom操作.       不建议用数组的 length 属性做循环判断条件.访问集合的 le…

深入理解DOM节点操作

× 目录 [1]创建节点 [2]插入节点 [3]移除节点[4]替换节点[5]复制节点 前面的话 一般地,提起操作会想到“增删改查”这四个字,而DOM节点操作也类似地对应于此,接下来将详细介绍DOM的节点操作方法 前提 DOM提供节点操作的方法是因为DOM节点关系指针都是只读的 下列代码中想通过修改myUl的父级节点来修改其节点关系,但由于parentNode属性是只读的,所以修改无效,在IE8-浏览器下甚至会报错 <div id="myDiv"></div> &…

Android之DOM解析XML

一．DOM解析方法介绍 DOM是基于树形结构的节点或信息片段的集合,允许开发人员使用DOM API遍历XML树,检索所需数据.分析该结构通常需要加载整个文档和构造树形结构,然后才可以检索和更新节点信息. Android完全支持DOM解析.利用DOM中的对象可以对XML文档进行读取.搜索.修改.添加和删除等操作. DOM的工作原理:使用DOM对XML文件进行操作时,首先要解析文件,将文件分为独立的元素.树形和注释等,然后以节点树的形式在内存中对XML文件进行表示,就可以通过节点树访问文档的内容,并…

HTML 学习笔记 JQuery（DOM 操作2）

接着上一节的将,这一节从复制节点讲起 复制节点 继续使用之前的例子 如果单击<li>元素后 需要在复制一个<li>元素,可以使用clone()方法完成.全部代码如下 <html> <head> <meta charset="UTF-8"> <title></title> <script src="../js/jquery-2.1.1.min.js"></script…

一步步学习javascript基础篇（7）：BOM和DOM

一.什么是BOM.什么是DOM BOM即浏览器对象模型,主要用了访问一些和网页无关的浏览器功能.如:window.location.navigator.screen.history等对象. DOM即文档对象模型,针对HTML(或XML)文档的API(应用程序编程接口).描绘的一个层次化的节点树,开发人员可以添加.修改和删除页面的某一部分. 二.细说BOM对象 1.window对象 window对象表示浏览器的一个实例,同时也是ECMAScript 规定的 Global 对象.(Global :所…

判断一个对象是jQuery对象还是DOM对象

今天调试一段代码的时候,看到其中一个变量,想知道它到底是jquery对象还是dom对象. 虽然直接console出这个对象,看它的内部可以判断出来.但是我想有没有什么更方便的方法呢. 后来我想到了一个办法,就是使用instanceof方法来判断. 代码如下: var jqueryObject = $("#check"); jqueryObject instanceof jQuery; //jqueryObject 是jQuery对象 var domObject = document.q…

说说DOM的那些事儿

引子 先来一颗栗子: <img src="/sub/123.jpg" alt="test" /> <script type="text/javascript"> var img = document.getElementsByTagName('img')[0]; console.log('src:', img.src); </script> 输出 src: sub/123.jpg?No,输出的是 src: ht…

抛弃jQuery：DOM API之操作元素

原文链接:http://blog.garstasio.com/you-dont-need-jquery/dom-manipulation/ 我的Blog:http://cabbit.me/you-dont-need-jquery/manipulation/ 在上一篇文章里我们讨论了如何在没有jQuery的支持下选择元素,这次我们来聊一聊如何使用DOM API创建新元素.修改已有元素的属性或者移动元素的位置.原生的浏览器API已经给我们提供了DOM操作的所有功能,我们能够不借助jQuery或者其他…

抛弃jQuery：DOM API之选择元素

原文链接:http://blog.garstasio.com/you-dont-need-jquery/selectors/ 我的Blog:http://cabbit.me/you-dont-need-jquery/selector/ 上一篇文章抛弃jQuery:Why?引起了很多朋友的讨论,在这里我想强调,这一系列文章从来不希望开发人员不分情况的丢弃jQuery,也绝对不会抵制使用JavaScript库,手工处理兼容性问题,这篇及后面的专题都提供了一些能够替代jQuery的库. 如果我说"抛弃…

DOM对象模型接口规范中的四个基本接口

DOM对象模型的四个基本接口 在DOM对象模型接口规范中,有四个基本的接口:Document,Node,NodeList以及NamedNodeMap.在这四个基本接口中,Document接口是对文档进行操作的入口,它是从Node接口继承过来的.Node接口是其他大多数接口的父类,象Documet,Element,Attribute,Text,Comment等接口都是从Node接口继承过来的.NodeList接口是一个节点的集合,它包含了某个节点中的所有子节点.NamedNodeMap接口也是一个…

dom 操作

1.dom 的查找 (1)根据id 查找 var object = document.getElementById("id 值"): (2)根据 name 查找:返回 dom 对象的数组: var arr = document.getElementByName("name"): (3)根据 标记名查找:返回dom对象的数组: var arr = doucument.getElementByTagName("标记名"); 2.dom 的遍历(有浏览…