原生JS 实现 dom ready

记录一下项目技术问题: 记得:放在head标签内的脚本,第一时间执行 var baseTools = { // dom ready ready: function( f ){ var ie = !!(window.attachEvent && !window.opera); var wk = /webkit\/(\d+)/i.test(navigator.userAgent) && (RegExp.$1 < 525); var fn = []; var run = f…

框架操作DOM和原生js操作DOM比较

问题引出对于Angular和React操作DOM的速度,和原生js操作DOM的速度进行了一个比较: 一个同学做的demo 代码如下: <!DOCTYPE html> <html ng-app="test"> <head> <title>Performance Comparison for Knockout, Angular and React</title> <link href="//cdnjs.cloud…

原生JS获取DOM 节点到浏览器顶部的距离或者左侧的距离

关于js获取dom 节点到浏览器顶/左部的距离,Jquery里面有封装好的offset().top/offset().left,只到父级的顶/左部距离position().top/position().left: 原生写的话就是用获取节点,do while循环就可以了.代码如下 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta…

原生js操作Dom节点:CRUD

知识点,依然会遗忘.我在思考到底是什么原因.想到研究生考试准备的那段岁月,想到知识体系的建立,知识体系分为正向知识体系和逆向知识体系:正向知识体系可以理解为教科书目录,逆向知识体系可以理解考试真题. 按照知识体系建设这个思路,追求长久的深刻的记忆.决定建立正向知识体系.本文系正向知识体系的第一篇. 原生js操作dom节点:所谓的CRUD,代表create,read,update,del:也就是创建,读取,更新和删除.dom提供了api用于创建节点常用有 var div=document.crea…

关于Echarts的原生js获取DOM元素与动态加载DOM元素的冲突问题

1.前言: 最近在做的看板项目,因为需要循环加载后台数据,并且用Echarts做数据呈现,所以jQuery和angular等库统统靠边站,Echarts用的是原生js获取DOM元素,至于诸多不兼容等深水坑我就不多赘述了. 2.问题引入: 当我通过Ajax从后端取到需要展示的数据,拿过来动态渲染到页面上,增加Dom元素是常有的事,这个时候就会报错说Echarts没有获取到元素id. 3.解决方案: 至于要在外面包一个延时器,当然我试了一下即使把延时时间改到0也是能够顺利加载的. 暂时就这么解决了这…

原生js操作dom的方法

今天学习了原生js的dom节点的操作,就记录下来,仅供自己以后参考. 1)创建节点:除了可以使用createElement创建元素,也可以使用createTextNode创建文本节点. document.body指向的是<body>元素;document.documentElement则指向<html>元素 //创建节点 var createNode = document.createElement("div"); var createT…

原生Js操作DOM

查找DOM .querySelectorAll(),它接受包含一个CSS选择器的字符串参数,返回一个表示文档中匹配选择器的所有元素的NodeList元素. .querySelector(),返回第一个匹配的元素 <div class="wrap"> <div class="header">header</div> </div> <script> var oHeader = document.querySel…

抛开jQuery，拾起原生JS的DOM操作

常用的JS-DOM操作与jQuery的对比 jQuery用多了,还是需要来熟练熟练原生JS的操作,不然写JS都快离不开jQuery了目录 1. 获取DOM 2. 创建DOM 3. 添加DOM 4. 删除DOM 5. 添加class 6. 是否存在class 7. 删除class 8. 实现 JQ 的toggleClass 9. 获取DOM的css样式 10. 给DOM设置css样式 11. 删除DOM的css样样式 12. DOM的查找(遍历),例如查找父级,子级,兄弟等节点 13. 获取DO…

原生js封装dom操作库

var utils = (function(window) { var flag = "getComputedStyle" in window; function win(attr, value) { if(typeof value !== "undefined") { document.documentElement[attr] = value; document.body[attr] = value; } return document.documentElem…

原生js操作DOM基础-笔记

原文参考http://mp.weixin.qq.com/s?__biz=MzU3MDA0NTMzMA==&mid=2247485490&idx=1&sn=15197b4b53e0669e4a017e54a31fb39c&source=41#wechat_redirect 使用原生js为了提高效率,纯js操作dom一查询DOMdocument.querySelector()参数是任意css选择器格式,只会返回第一个匹配到值document.querySelectorAll(…

原生JS强大DOM选择器querySelector与querySelectorAll

在传统的 JavaScript 开发中,查找 DOM 往往是开发人员遇到的第一个头疼的问题,原生的 JavaScript 所提供的 DOM 选择方法并不多,仅仅局限于通过 tag, name, id 等方式来查找,这显然是远远不够的,如果想要进行更为精确的选择不得不使用看起来非常繁琐的正则表达式,或者使用某个库.事实上,现在所有的浏览器厂商都提供了 querySelector 和 querySelectorAll 这两个方法的支持,甚至就连微软也派出了 IE 8 作为支持这一特性的代表,quer…

原生JS的DOM节点操作

DOM(Document Object Model/文档对象模型)是针对HTML和XML文档的一个API.DOM节点树:在文档中出现的空格.回车.标签.注释.文本.doctype.标签等都属于DOM节点. 操作DOM节点的方式无非就是:创建.添加(插入).移除.替换.查找(获取).克隆DOM节点. 创建文本节点:var newText = document.createTextNode('文本节点');创建标签节点:var newNode = document.createElement('di…

前端面试(原生js篇) - DOM

根据我的面试经历,一般小公司的面试环节,比较关心框架的熟练程度,以及独立开发组件的能力但大厂通常有五轮以上的面试,而且对 js 基础语法很是看重于是我总结了一些关于 js 基础的面试对话,有的当时没答上来,就在总结的时候就加了点料忽然觉得又该读一遍犀牛书了... 一.面试对话问:你知道 js 是由哪三部分构成的么? 答:有 js 的语法核心 ECMAScript,还有文档对象模型 DOM,以及浏览器对象模型 BOM. 问:那你觉得 dom 的作用是什么? 答:喵喵喵??? 问:我换一个问…

原生js 操作dom

1.一些常用的方法 obj.getElementById() 返回带有指定 ID 的元素. obj.getElementsByTagName() 返回包含带有指定标签名称的所有元素的节点列表(集合/节点数组). obj.etElementsByClassName() 返回包含带有指定类名的所有元素的节点列表. obj.getElementsByName() 方法可返回带有指定名称的对象的集合.//表单中name还是蛮多的 node.childNodes 只读 childNodes 属性返回节点…

通过原生js对DOM事件的绑定的几种方式总汇

在网页开发中经常会有交互操作,比如点击一个dom元素,需要让js对该操作做出相应的响应,这就需要对Dom元素进行事件绑定来进行处理,js通常有三种常用的方法进行事件绑定:在DOM元素中直接绑定:在JavaScript代码中绑定:绑定事件监听函数. 直接在DOM元素绑定事件 <div id="btn" onclick="clickone()"></div> //直接在DOM里绑定事件 <script> function clicko…

原生JS中DOM节点相关API合集

节点属性 Node.nodeName //返回节点名称,只读 Node.nodeType //返回节点类型的常数值,只读 Node.nodeValue //返回Text或Comment节点的文本值,只读 Node.textContent //返回当前节点和它的所有后代节点的文本内容,可读写 Node.baseURI //返回当前网页的绝对路径 Node.ownerDocument //返回当前节点所在的顶层文档对象,即document Node.nextSibling //返回紧跟在当前节点…

原生js操作Dom命令总结

常用的dom方法 document.getElementById(“box”);//通过id获取标签 document.getElementsByTagName(“div”);根据标签名获取页面元素注意: 由于获取结果可能是多个,element后面要加s根据标签获取的结果是伪数组形式,伪数组是不具备数组的方法.要操作伪数组中的所有元素需要遍历伪数组. 根据标签名获取元素时,有可能获取到的标签只有一个,但是形式还是伪数组. 根据标签名获取时,document可以更换为任意标签在bo…

利用原生js的Dom操作实现简单的ToDoList的效果

效果如下: 前端及js代码如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>ToDOList</title> <link rel="stylesheet" href="todolist.css"> </head> <body st…

原生js的dom操作

父节点parentNode 第一个子节点只会获取到元素节点 firstElementChild ★★★★★ 第一个子节点 (如果有文本节点将会获取到文本节点) firstChild 最后一个节点只会获取到元素节点 lastElementChild ★★★★★ 最后一个子节点 (如果有文本节点将会获取到文本节点) lastChild 当前节点的后一个(下一个)节点注:只会获取到元素节点(dom操作推荐使用这种方法,IE9测试兼容,IE8未测试) nextElement…

原生js操作dom备忘

<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/> <title></title> </head> <body lang…

整理一下原生js的dom操作

获取元素 getElementById() getElementsByClass() getElementsByTagName getElementsByName node属性前.后.父.子 previousSibling nextSibling parentNode childNode children firstChild lastChild 操作 appendChild insertBefore removeChild replaceChild innerHtml innerText 创…

原生JS和jQuery操作DOM的区别小结

一.Js原生对象和jQuery实例对象的相互转化: (1).原生JS对象转JQ对象: $(DOM对象); (2). JQ对象转原生JS对象: $(DOM对象).get(index); //注意区分eq(index)是jQuery实例对象; 直接下标访问, $(DOM对象)[index]; 二.两者操作DOM的对比一.创建元素节点 1.1 原生JS创建元素/文本节点 document.createElement("p"); 1.2 jQuery创建元素/文本节点 $('<p>…

使用原生js与jQuery分别实现一个简单的tab页签

tab页签通常适用于空间有限而内容较多同时兼顾页面美观度不给用户一种信息过量视觉疲劳的情形.使用面非常广,下面我们用两种方法简单实现之. 首先,构建页面元素.页签的可点击部分我们通常用列表来承载,包括ul和ol,我们这里让页签呈横向分布,所以需要使之向左浮动.而页签内容部分使用div承载即可.另外,我们需要对具有共性的元素统一控制样式和行为,所以就有了下面的dom结构: <div id="main"> <ul id="tabbar" class=&…

原生js的各种方法

原生js操作dom元素 var link = document.createElement( "link" );link.type = "image/x-icon";link.rel = "icon";link.href = "https://i.alipayobjects.com/common/favicon/favicon.ico";document.getElementsByTagName('head')[0].appe…

原生JS实现Ajax及Ajax的跨域请求

前言如今,从事前端方面的程序猿们,如果,不懂一些前后台的数据交互方面的知识的话,估计都不太好意思说自己是程序猿.当然,如今有着许多的框架,都有相对应的前后台数据交互的方法. 而,其中,用得最多的应该苏算是JQuery的Ajax了.但是,今天,影子向大家介绍的是原生js的Ajax,及跨域请求. 一. JQuery的Ajax 首先,先回忆下JQuery的Ajax写法: $.ajax({ url: , type: '', dataType: '', data: { }, s…

js的dom操作（整理）（转）

js的dom操作整理(整理)(转) 一.总结一句话总结: dom操作有用原生js的dom操作,也可以用对js封装过的jquery等插件来来更加方便的进行dom操作 1.dom是什么? 对于JavaScript,为了能够使JavaScript操作Html,JavaScript就有了一套自己的dom编程接口. 对于Html,dom使得html形成一棵dom树,类似于一颗家族树一样,一层接一层,子子孙孙. 2.Html的DOM树是什么? HTML中的每个标签元素,属性,文本都能看做是一个DOM的节点…

js的DOM操作整理（整理）

js的DOM操作整理(整理) 一.总结一句话总结: dom操作有用原生js的dom操作,也可以用对js封装过的jquery等插件来更加方便的进行dom操作 1.dom是什么? 对于JavaScript,为了能够使JavaScript操作Html,JavaScript就有了一套自己的dom编程接口. 对于Html,dom使得html形成一棵dom树,类似于一颗家族树一样,一层接一层,子子孙孙. 2.Html的DOM树是什么? HTML中的每个标签元素,属性,文本都能看做是一个DOM的节点,这些d…

原生JS获取元素宽高实践详解

开篇的话任何不是亲身实践中求得的知识,都不是属于你的.任何求得的知识不去时常温习运用,也不是属于你的. 记录由来在做个上拉广告功能中遇到了一个"理所当然"觉得对的用法,慢慢才排查出是获取元素高度那里出了问题,这个问题记忆在书上或视频中看到过,许久没用,用的时候就想当然了.遂决定深入剖析用法,增加记忆,记录发表出来,也能给各位前端同行.求学者增加印象. 出错之处秉承结构.样式.行为分离的宗旨,每次不管大小案例都是分开写html.css.js.这也算抛砖引出了我犯错的玉. 原css:…

JS获取DOM元素的八种方法

JS获取DOM元素的方法(8种) 通过ID获取(getElementById) 通过name属性(getElementsByName) 通过标签名(getElementsByTagName) 通过类名(getElementsByClassName) 获取html的方法(document.documentElement) 获取body的方法(document.body) 通过选择器获取一个元素(querySelector) 通过选择器获取一组元素(querySelectorAll) 1.通过ID获…

原生js dom记忆的内容

1.DOM基础getElementByIdgetElementByTagNamegetElementByName getElementsByClass querySelector querySelectorAllgetAttributesetAttributeremoveAttribute domobj.tagNamedomobj.innerHTML innerHTML与innerText的区别.http://akunamotata.iteye.com/blog/440863domobj.idd…

【原生JS 实现 dom ready】的更多相关文章