原生JavaScript常用的DOM操作

【原生JavaScript常用的DOM操作】的更多相关文章

原生JavaScript常用的DOM操作

之前项目一直都是用JQuery或者Vue来做的,确实好用,毕竟帮我们解决了很多浏览器兼容问题,但是后面发现大公司面试题都是要原生Javascript来做,然后我就一脸懵逼哈哈哈,毕竟大公司需要的框架或者库好多都是公司内部自己构建的,所以说到头来还是要原生JavaScript,这里总结了一些原生js常用的dom操作函数. 一:节点关系 //元素的子元素都可以通过someNode下的childNodes对象来访问 var firstChild = someNode.firstChild; //获得第…

原生JavaScript常用本地浏览器存储方法一(方法类型)

有时需要将网页中的一些数据保存在浏览器端.好处就是当下次访问页面时,直接就可以从本地读取数据,不需要再次向服务器请求数据.目前常用的有以下几种方法: 1.cookie cookie会随着每次HTTP请求头信息一起发送,无形中增加了网络流量,另外,cookie能存储的数据容量有限,根据浏览器类型不同而不同,IE6大约只能存储2K. 2.Flash ShareObject 这种方式能能解决上面提到的cookie存储的两个弊端,而且能够跨浏览器,应该说是目前最好的本地存储方案.不过,需要在页面中插入…

[笔记]原生JS实现的DOM操作笔记

原生JS实现的DOM一系列操作参考: 原生JavaScript封装DOM库 siblings: 原生JS-查找相邻的元素-siblings方法的实现 addClass,removeClass,hasClass,toggleClass:原生js添加删除class 原生js添加删除class 代码如下: var dom = { /** 功能说明:匹配元素是否含有指定class * @param el 指定的DOM元素 * @param className 匹配的class名 * */ hasClas…

javascript教程2:---DOM操作

1.DOM 简介当页面加载时,浏览器会创建页面的文档对象模型(Document Object Model).文档对象模型定义访问和处理 HTML 文档的标准方法.DOM 将 HTML 文档呈现为带有元素.属性和文本的树结构,即节点树.通过 DOM,JS 可创建动态的 HTML,可以使网页显示动态效果并实现与用户的交互功能.JS 能够改变页面中所有的 HTML 元素.属性和 CSS 样式,并对页面中所有事件做出响应.所以学习 JS 的起点就是处理网页,处理网页就需要使用 DOM 进行操作. 2.…

mui项目中如何使用原生JavaScript代替jquery来操作dom 转自【B5教程网】:http://www.bcty365.com/content-146-3661-1.html

最近在用mui写页面,当然了在移动App里引入jq或zepto这些框架,肯定是极不理性的.原生JS挺简单,为何需要jq?jq的成功当时是因为ie6.7.8.9.10.chrome.ff这些浏览器不兼容,让开发者崩溃,而且pc上浏览器性能好,跨平台兼容也不影响性能.但jq根本就不是为手机设计的.手机上只有webkit浏览器(忽略wp,反正mui不支持wp),根本就不需要jq这种封装框架来操作dom.选择元素//jq$('.el');//js document.querySelector("di…

mui项目中如何使用原生JavaScript代替jquery来操作dom

最近在用mui写页面,当然了在移动App里引入jq或zepto这些框架,肯定是极不理性的.原生JS挺简单,为何需要jq?jq的成功当时是因为ie6.7.8.9.10.chrome.ff这些浏览器不兼容,让开发者崩溃,而且pc上浏览器性能好,跨平台兼容也不影响性能.但jq根本就不是为手机设计的.手机上只有webkit浏览器(忽略wp,反正mui不支持wp),根本就不需要jq这种封装框架来操作dom.选择元素//jq$('.el');//js document.querySelector("di…

MUI常用脚本及原生JavaScript常用操作元素方法

1.mui元素转换html元素 var obj=mui("#id")[0]; 2.事件绑定 var btn = document.getElementById("login"); btn.addEventListener('tap',function(){ //事件处理 }); /*给address内的所有含有ajaxbtn类名的元素单击事件 */ mui('.address').on('tap','.ajaxbtn',function(){ dpajax(t…

原生JavaScript对【DOM元素】的操作——增、删、改、查

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> #…

网页制作之JavaScript部分 2 - DOM操作

1.DOM的基本概念 htmlDOM是一种面向对象的树的模型,它包含html中的所有元素:通过html可以找到所有包含在dom中的元素. DOM是文档对象模型,这种模型为树模型:文档是指标签文档:对象是指文档中每个元素:模型是指抽象化的东西. 2.Windows对象操作一.属性和方法: 属性(值或者子对象): opener:打开当前窗口的源窗口,如果当前窗口是首次启动浏览器打开的,则opener是null. dialogArgument:对话框返回值. 子对象:history,locatio…

JavaScript基础：DOM操作详解

本文最初发表于博客园,并在GitHub上持续更新前端的系列文章.欢迎在GitHub上关注我,一起入门和进阶前端. 以下是正文. 前言 JavaScript的组成 JavaScript基础分为三个部分: ECMAScript:JavaScript的语法标准.包括变量.表达式.运算符.函数.if语句.for语句等. DOM:文档对象模型,操作网页上的元素的API.比如让盒子移动.变色.轮播图等. BOM:浏览器对象模型,操作浏览器部分功能的API.比如让浏览器自动滚动. 事件 JS是以事件驱动为核心…

总结js常用的dom操作（js的dom操作API）

转载:https://www.haorooms.com/post/js_dom_api 前言很多同学用惯了jquery操作dom,让他们用js操作的时候,常常力不从心,本文总结了常用的js的dom操作方法,供大家翻阅!其实说起js操作dom,我很久很久之前有篇文章,jquery属性的相关js实现方法,里面囊括了很大一部分js操作dom的常用方法,但是不是很系统.不能说是API,今天来系统总结一下! 节点查找API document.getElementById :根据ID查找元素,大小写敏感,…

JavaScript里面之dom操作

1.dom之选择元素 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>你好</title> </head> <body> <div> <div class="c1"></div> <div class="c1&…

原生JavaScript常用本地浏览器存储方法四(HTML5 LocalStorage sessionStorage)

HTML5 LocalStorage浏览器的支持的情况如上图,IE在8.0的时候就支持了.不过需要注意的是,IE测试的时候需要服务器环境(或者localhost). 测试自然是检测浏览器是否支持本地存储.在HTML5中,本地存储是一个window的属性,包括localStorage和 sessionStorage,从名字应该可以很清楚的辨认二者的区别,前者是一直存在本地的,后者只是伴随着session,窗口一旦关闭就没了.二者用法完全相同,这里以localStorage为例. 存储数据的方法就是…

原生JavaScript常用本地浏览器存储方法二(cookie)

JavsScript Cookie概述 cookie是浏览器提供的一种机制,它将document对象的cookie属性提供给JavaScript.可以由JavaScript对其进行控制,而并不是JavaScript本身的性质.cookie是存于用户硬盘的一个文件,这个文件通常对应于一个域名,当浏览器再次访问这个域名时,便使这个cookie可用.因此,cookie可以跨越一个域名下的多个网页,但不能跨越多个域名使用.不同的浏览器对cookie的实现也不一样,但其性质是相同的.例如在Windows…

javascript常用的数组操作

数组的定义 var arr=new Array(); var arr=[]; var arr=new Array(10);//定义一个长度为10的数组数组元素的访问 var temp=arr[1];//获取数组的元素值 arr[1]="new"//给数组元素赋新值数组元素的添加 arr.push();//添加一个元素或者多个元素到原数组的结尾,并返回新长度 arr.unshift();//添加到一个元素或者多个元素到原数组的开始,其他元素后移,并返回新长度 arr.splice()…

原生JavaScript常用本地浏览器存储方法五(LocalStorage+userData的一个浏览器兼容类)

基于LocalStorage+globalStorage+userData实现的一个本地存储类 userData用来兼容ie6 ie7 由userData模仿Session的方法:浏览器关闭删除保存的记录 var userStorage = { isIE : null, Local : function(){ if(document.all){ var oUserData; if(!userStorage.isIE){ userStorage.isIE =(function(){ oUserDa…

原生JavaScript常用本地浏览器存储方法三(UserData IE Only)

UserData的应用范围 serData是微软为IE专门在系统中开辟的一块存储空间,所以说只支持Windows+IE的组合,实际测试在2000(IE5.5).XP(IE6.IE7),Vista(IE7)下都是可以正常使用的. UserData存储在哪儿? 首先设置文件夹全部显示,在XP下,一般位于C:\Documents and Settings\用户名\UserData,有些时候会在C:\Documents and Settings\用户名\Application Data\Microsof…

Javascript的DOM操作 - 你真的了解吗?

摘要想稍微系统的说说对于DOM的操作,把Javascript和jQuery常用操作DOM的内容归纳成思维导图方便阅读,同时加入性能上的一些问题. 前言在前端开发的过程中,javascript极为重要的一个功能就是对DOM对象的操作,无论增删改查在前端页面操作这一范围内都是比较消耗性能的.如何高效率的,便捷的操作DOM,这就是本文要讲述的.希望看完全文,你能知道如何更高效的通过原生js以及jQuery操作DOM元素. 操作DOM 这里我希望介绍的相对系统一点,而不是东一句西一句,所以把Java…

（转）Javascript的DOM操作 - 性能优化

转载:https://my.oschina.net/blogshi/blog/198910 摘要: 想稍微系统的说说对于DOM的操作,把Javascript和jQuery常用操作DOM的内容归纳成思维导图方便阅读,同时加入性能上的一些问题. 前言在前端开发的过程中,javascript极为重要的一个功能就是对DOM对象的操作,无论增删改查在前端页面操作这一范围内都是比较消耗性能的.如何高效率的,便捷的操作DOM,这就是本文要讲述的.希望看完全文,你能知道如何更高效的通过原生js以及jQ…

原生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…

100个常用的原生JavaScript函数

1.原生JavaScript实现字符串长度截取复制代码代码如下: function cutstr(str, len) { var temp; var icount = 0; var patrn = /[^\x00-\xff]/; var strre = ""; for (var i = 0; i < str.length; i++) { if (icount < len - 1) { temp = str.…

js常用DOM操作

在博客园看到了苏夏写的常用DOM整理文章,地址:http://www.cnblogs.com/cabbagen/p/4579412.html,然后抽时间都试了一下这些常用的DOM操作.在这里记录一下. <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>常用dom</title> <script>…

Javascript学习笔记二——操作DOM

Javascript学习笔记 DOM操作: 一．GetElementById() ID在HTML是唯一的,getElementById()可以定位唯一的一个DOM节点二．querySelector() 返回文档中匹配指定CSS选择器中的一个元素例子: Document.querySelector(“#test”); //查找ID =”test” 的节点 Document.querySelector(“p”);//获取文档中第一个p元素 Document.querySelector(“.exa…

JS的DOM操作 - 你真的了解吗?

摘要想稍微系统的说说对于DOM的操作,把Javascript和jQuery常用操作DOM的内容归纳成思维导图方便阅读,同时加入性能上的一些问题. 前言在前端开发的过程中,javascript极为重要的一个功能就是对DOM对象的操作,无论增删改查在前端页面操作这一范围内都是比较消耗性能的.如何高效率的,便捷的操作DOM,这就是本文要讲述的.希望看完全文,你能知道如何更高效的通过原生js以及jQuery操作DOM元素. 操作DOM 这里我希望介绍的相对系统一点,而不是东一句西一句,所以把Java…

jQuery中的DOM操作——《锋利的JQuery》

jQuery封装了大量DOM操作的API,极大提高了操作DOM节点的效率. 1.查找节点通过我们上一节介绍了JQuery选择器,可以非常轻松地查找节点元素.不过,这时得到的是jQuery对象,只能使用jQuery的API. 1.1 查找属性节点:attr()方法,可以接受一个参数,也可以接受两个.当参数是一个时,则是要查询的属性的名字,这里接受的是标签固有属性,非样式属性! 2.创建节点利用jQuery的工厂函数$(),我们可以随意创建任何元素节点.文本节点.属性节点,然后赋值给一个(以…

原生JavaScript技巧大收集100个

原生JavaScript技巧大收集 1.原生JavaScript实现字符串长度截取function cutstr(str, len) { var temp; var icount = 0; var patrn = /[^\x00-\xff]/; var strre = ""; for (var i = 0; i < str.length; i++) { if (icount < len - 1) { temp = str.substr(i, 1); if (patrn.ex…

（七）jQuery中的DOM操作

一.jQuery的DOM操作 (1)查找节点: 查找元素节点: 1. 获取指定的标签节点 $(“上级标签标签:eq(“标签索引”) ; 如:var li = $("ul li:eq(2)"); 2. 获取标签节点$(“标签”) 3. 获取标签节点文本text() 查找属性节点: 利用attr()方法来获取它的各种属性的值.Attr()里的参数是一个时:是要查询的属性的名称,也可以是两个. 1. 获取标签节点 2. 获取标签节点属性:方法attr() (2)创建节点: 创建元素节点:…

第二章 jquery的dom操作

三个方面 dom核心,html-dom和css-dom 一. 1.dom core核心 document.getElementsByTagName("form") 获取表单对象 element.getAttribute("src") 2.html_dom document.forms emement.src 但是只能用来处理web文档 3.css_dom 针对css的操作. element.style.color="red" 二.jque…

angular的Dom操作

原文 https://www.jianshu.com/p/9d7249922bda 大纲 1.angular的DOM操作 2.为什么不能直接操作DOM? 3.三种错误操作DOM的方式 4.angular2如何DOM操作的机制? 5.正确操作DOM的方式 6.为什么需要ElementRef 7.使用ElementRef的代码实例及优化 8.代码资源 angular的DOM操作 angular2的设计目标本来就是要让浏览器和DOM独立.DOM是复杂的,因此使组件与它分离,会让我们的应用程序,更容易测…

超详细的DOM操作（增删改查）

操作DOM的核心就是增删改查原文地址:https://jianshu.com/p/b0aa846f4dcc 目录一.节点创建型API 1.1 createElement 1.2 createTextNode 1.3 cloneNode 1.4 createDocumentFragment 二.页面修改形API(包括删除和添加)(删)(改) 2.1 appendChild(追加为子元素) 2.2 insertBefore(插入前面) 2.3 removeChild(删除子元素) 2.4 rep…