随笔分类 - DOM操作
摘要：前端发展很快，现代浏览器原生 API 已经足够好用。我们并不需要为了操作 DOM、Event 等再学习一下 jQuery 的 API。同时由于 React、Angular、Vue 等框架的流行，直接操作 DOM 不再是好的模式，jQuery 使用场景大大减少。本项目总结了大部分 jQuery API
阅读全文
摘要：原生JS实现的DOM一系列操作参考： 原生JavaScript封装DOM库 siblings: 原生JS-查找相邻的元素-siblings方法的实现 addClass,removeClass,hasClass,toggleClass：原生js添加删除class 原生js添加删除class 代码如下：
阅读全文
摘要：示例html代码： 获得id为test的DOM对象，下面就不一一获取了。 test.innerHTML 描述：也就是从对象的起始位置到终止位置的全部内容,包括Html标签。 上例中的test.innerHTML的值也就是“<span style="color:red">test1</span> te
阅读全文
摘要：基本介绍 (obj).height() (obj).height() ：jquery方式获取元素的宽高，不包括滚动条与工具条 (window).height()：获得的是屏幕可视区域的宽高，不包括滚
阅读全文
摘要：childNodes 属性 标准的，childNodes 属性返回节点的子节点集合，以 NodeList 对象。包括HTML节点，所有属性，文本。可以通过nodeType来判断是哪种类型的节点，只有当nodeType==1时才是元素节点，2是属性节点，3是文本节点。 所有主流浏览器都支持 child
阅读全文
摘要：文本整理了javascript操作DOM的一些常用的api，根据其作用整理成为创建，修改，查询等多种类型的api，主要用于复习基础知识，加深对原生js的认识。 基本概念 在讲解操作DOM的api之前，首先我们来复习一下一些基本概念，这些概念是掌握api的关键，必须理解它们。 Node类型 DOM1级
阅读全文
摘要：在实际开发中会遇到确实需要获取隐藏元素的宽高，这儿所说的隐藏元素是display为none的元素。 可使用jQuery Actual Plugin插件来完成，其源码如下： 当然如果要支持模块化开发，直接使用官网下载的文件即可，源码也贴上： 代码实例： 插件地址：http://dreamerslab.
阅读全文
摘要：例如： 判断html节点的class是否有no-js。 1.jquery的实现方式 jquery源码的实现方式： 源码里面用到了nodeType，nodeType是HTML DOM 的nodeType 属性，nodeType 属性返回以数字值返回指定节点的节点类型。常用的一般有三种： 例如，获得 b
阅读全文
摘要：页面DOM里的每个节点上都有一个classList对象，程序员可以使用里面的方法新增、删除、修改节点上的CSS类。使用classList，程序员还可以用它来判断某个节点是否被赋予了某个CSS类。 添加类（add） 为 <div> 元素添加多个类: 移除类(remove) 使用remove方法，你可以
阅读全文
摘要：在对网页进行调试的过程中，经常会用到js来获取元素的CSS样式，方法有很多很多，现在仅把我经常用的方法总结如： 1. obj.style：这个方法只能JS只能获取写在html标签中的写在style属性中的值（style=”…”），而无法获取定义在<style type="text/css">里面的属
阅读全文
摘要：js获取键盘按下的键值有event.keyCode,event.charCode和event.which 其中： 谷歌浏览器对event.keyCode,event.charCode和event.which都兼容。 火狐浏览器对event.keyCode部分键值有效，如上下左右键(37,38,39,
阅读全文
摘要：摘要 想稍微系统的说说对于DOM的操作,把Javascript和jQuery常用操作DOM的内容归纳成思维导图方便阅读,同时加入性能上的一些问题. 前言 在前端开发的过程中,javascript极为重要的一个功能就是对DOM对象的操作,无论增删改查在前端页面操作这一范围内都是比较消耗性能的.如何高效
阅读全文
摘要：在一些DOM操作中我们经常会跟元素的位置打交道，鼠标交互式一个经常用到的方面，令人失望的是不同的浏览器下会有不同的结果甚至是有的浏览器下没结果，这篇文章就上鼠标点击位置坐标获取做一些简单的总结，没特殊声明代码在IE8，FireFox，Chrome下进行测试兼容 方法介绍 关于js鼠标事件综合各大浏览
阅读全文
摘要：IE下,event对象有srcElement属性,但是没有target属性; Firefox下,event对象有target属性,但是没有srcElement属性.但他们的作用是相当的，即： firefox 下的 event.target = IE 下的 event.srcElement 解决方法:
阅读全文
摘要：在传统的 JavaScript 开发中，查找 DOM 往往是开发人员遇到的第一个头疼的问题，原生的 JavaScript 所提供的 DOM 选择方法并不多，仅仅局限于通过 tag, name, id 等方式来查找，这显然是远远不够的，如果想要进行更为精确的选择不得不使用看起来非常繁琐的正则表达式，或
阅读全文
