JAVASCRIPT常用API总结
目录
元素查找
class操作
节点操作
属性操作
内容操作
css操作
位置大小
事件
DOM加载完毕
绑定上下文
去除空格
Ajax
JSON处理
节点遍历
元素查找
// Node document.getElementById(id) // document.getElementById('test') document.querySelector(selectors) // document.querySelector('#test div') document.doctype document.documentElement document.head document.title document.body // NodeList document.getElementsByClassName(names) // document.getElementsByClassName('test') document.getElementsByName(name) // document.getElementsByName('demo') document.getElementsByTagName(name) // document.getElementsByTagName('div') document.getElementsByTagNameNS(namespace, name) // document.getElementsByTagNameNS('http://www.w3.org/1999/xhtml', 'div') document.querySelectorAll(selectors) // document.querySelectorAll('#test div') document.links document.scripts document.images document.embeds document.forms
class操作
// ie8 // add class el.className += ' ' + className; // has class function hasClass(el,className){ return new RegExp('(^| )' + className + '( |$)', 'gi').test(el.className); } // toggle class function toggleClass(el,className){ var classes = el.className.split(' '); var existingIndex = -1; for (var i = classes.length; i--;) { if (classes[i] === className){ existingIndex = i; } } if (existingIndex >= 0){ classes.splice(existingIndex, 1); } else{ classes.push(className); } el.className = classes.join(' '); } // remove class function remove(el,className){ el.className = el.className.replace(new RegExp('(^|\\b)' + className.split(' ').join('|') + '(\\b|$)', 'gi'), ' '); } // ie 10 el.classList.add(className); // add class el.classList.remove(className); // remove class el.classList.contains(className); // has class el.classList.toggle(className); // toggle class
节点操作
// 创建
var el = document.createElement(name);
// 复制
el.cloneNode(true); // 默认为false(克隆节点及其后代), true(克隆节点及其属性,以及后代)
// 向节点添加最后一个子节点
parent.appendChild(el);
// 在指定子节点之前插入新的子节点
parent.insertBefore(el, parent.childNodes[0]); // insertAdjacentHTML方法 el.insertAdjacentHTML(where, htmlString); el.insertAdjacentHTML('beforeBegin', htmlString); // 在该元素前插入 el.insertAdjacentHTML('afterBegin', htmlString); // 在该元素第一个子元素前插入 el.insertAdjacentHTML('beforeEnd', htmlString); // 在该元素最后一个子元素后面插入 el.insertAdjacentHTML('afterEnd', htmlString); // 在该元素后插入
// 父元素
el.parentNode
// 删除节点
el.parentNode.removeChild(el);
// 兄弟节点 ie9+
var siblings = Array.prototype.filter.call(el.parentNode.children, function(child){ return child !== el; })
// 下一个兄弟节点
// ie8 function nextElementSibling(el) { do { el = el.nextSibling; } while ( el && el.nodeType !== 1 ); return el; } nextElementSibling(el); // ie9+ el.nextElementSibling;
// 上一个兄弟节点
// ie8 function previousElementSibling(el) { do { el = el.previousSibling; } while ( el && el.nodeType !== 1 ); return el; } previousElementSibling(el); // ie9+ el.previousElementSibling;
// 子节点Children
// ie8 var children = []; for (var i = el.children.length; i--;) { // Skip comment nodes on IE8 if (el.children[i].nodeType != 8) children.unshift(el.children[i]); } // ie9+ el.children
属性操作
// 获取属性值
el.getAttribute('alt');
// 设置属性值
el.setAttribute('alt', '图片描述');
内容操作
// 获取元素内容 el.innerHTML // 设置元素内容 el.innerHTML = string // 获取元素内容(包含元素自身) el.outerHTML // 设置元素内容(包含元素自身) el.outerHTML = string // 获取文本内容 // ie8 el.innerText // ie9+ el.textContent // 设置文本内容 // ie8 el.innerText = string // ie9+ el.textContent = string
CSS操作
// 获取css样式 // ie8 el.currentStyle[attrName] // ie9+ window.getComputedStyle(el)[attrName] // 伪类 window.getComputedStyle(el , ":after")[attrName]; // 设置CSS样式 el.style.display = 'none';
位置大小
// getBoundingClientRect返回一个对象,包含top,left,right,bottom,width,height // width、height 元素自身宽高 // top 元素上外边界距窗口最上面的距离 // right 元素右外边界距窗口最上面的距离 // bottom 元素下外边界距窗口最上面的距离 // left 元素左外边界距窗口最上面的距离 // width 元素自身宽(包含border,padding) // height 元素自身高(包含border,padding) // 元素在页面上的偏移量 var rect = el.getBoundingClientRect() return { top: rect.top + document.body.scrollTop, left: rect.left + document.body.scrollLeft } // 元素自身宽(包含border,padding) el.offsetWidth // 元素自身高(包含border,padding) el.offsetHeight // 元素的左外边框至包含元素的左内边框之间的像素距离 el.offsetLeft // 元素的上外边框至包含元素的上内边框之间的像素距离 el.offsetTop //通常认为 <html> 元素是在 Web 浏览器的视口中滚动的元素(IE6 之前版本运行在混杂模式下时是 <body> 元素) //因此,带有垂直滚动条的页面总高度就是 document.documentElement.scrollHeight // 在没有滚动条的情况下,元素内容的总高度 scrollHeight // 在没有滚动条的情况下,元素内容的总宽度 scrollWidth // 被隐藏在内容区域左侧的像素数。通过设置这个属性可以改变元素的滚动位置 scrollLeft // 被隐藏在内容区域上方的像素数。通过设置这个属性可以改变元素的滚动位置 scrollTop
// 视口大小
// ie9+ var pageWidth = window.innerWidth, pageHeight = window.innerHeight; if (typeof pageWidth != "number"){ // ie8 if (document.compatMode == "CSS1Compat"){ pageWidth = document.documentElement.clientWidth; pageHeight = document.documentElement.clientHeight; } else { // ie6混杂模式 pageWidth = document.body.clientWidth; pageHeight = document.body.clientHeight; } }
事件
// 绑定事件
// ie9+ el.addEventListener(eventName, handler , Booleans); // Booleans默认false(事件在冒泡阶段执行),true(事件在捕获阶段执行) // ie8 el.attachEvent('on' + eventName, function(){ handler.call(el); });
// 移除事件
// ie9+ el.removeEventListener(eventName, handler); // ie8 el.detachEvent('on' + eventName, handler);
// 事件触发
if (document.createEvent) { // ie9+ var event = document.createEvent('HTMLEvents'); event.initEvent('change', true, false); el.dispatchEvent(event); } else { // ie8 el.fireEvent('onchange'); }
// event对象
var event = window.event||event;
// 事件的目标节点
var target = event.target || event.srcElement;
// 事件代理
ul.addEventListener('click', function(event) { if (event.target.tagName.toLowerCase() === 'li') { console.log(event.target.innerHTML) } });
DOM加载完毕
function ready(fn) { if (document.readyState != 'loading'){ // ie9+ document.addEventListener('DOMContentLoaded', fn); } else { // ie8 document.attachEvent('onreadystatechange', function() { if (document.readyState != 'loading'){ fn(); } }); } }
绑定上下文
// ie8 fn.apply(context, arguments); // ie9+ fn.bind(context);
去除空格
// ie8 string.replace(/^\s+|\s+$/g, ''); // ie9+ string.trim();
ajax
// GET var request = new XMLHttpRequest(); request.open('GET', 'user.php?fname=Bill&lname=Gates', true); // false(同步) request.send(); // ie8 request.onreadystatechange = function() { if (this.readyState === 4) { if (this.status >= 200 && this.status < 400) { // Success! var data = JSON.parse(this.responseText); } else { // 错误 } } }; // ie9+ request.onload = function() { if (request.status >= 200 && request.status < 400) { // Success! var data = JSON.parse(request.responseText); } else { // 服务器返回出错 } }; request.onerror = function() { // 连接错误 }; // POST var request = new XMLHttpRequest(); request.open('POST', 'user.php', true); // false(同步) request.setRequestHeader("Content-type","application/x-www-form-urlencoded"); request.send(dataString);
JSON处理
JSON.parse(string); JSON.String(Object)
节点遍历
function forEach( nodeList, callback ) { if(Array.prototype.forEach){ // ie9+ Array.prototype.forEach.call( nodeList, callback ); }else { // ie8 for (var i = 0; i < nodeList.length; i++){ callback(nodeList[i], i);
}
}
} forEach(document.querySelectorAll(selector),function(el, i){ })
转载自:http://mp.weixin.qq.com/s/RqTnRZ9bpmJpxrGiv9KUsw
JAVASCRIPT常用API总结的更多相关文章
- JavaScript常用API
JavaScript常用API 节点属性 文档节点 事件监听.一出事件 获取元素方法
- JavaScript常用API合集汇总(一)
今天这篇文章跟大家分享一些JavaScript常用的API代码,有DOM操作.CSS操作.对象(Object对象.Array对象.Number对象.String对象.Math对象.JSON对象和Con ...
- javascript 常用api
常用API合集 来源于:https://www.kancloud.cn/dennis/tgjavascript/241852 一.节点 1.1 节点属性 Node.nodeName //返回节点名称, ...
- javaScript常用API合集
节点 1.1 节点属性 Node.nodeName //返回节点名称,只读 Node.nodeType //返回节点类型的常数值,只读 Node.nodeValue //返回Text或Com ...
- js的常用api
JavaScript常用API总结 原创 2016-10-02 story JavaScript 下面是我整理的一些JavaScript常用的API清单. 目录 元素查找 class操作 节点操作 属 ...
- 第二篇、JavaScript常用的API
下面是我整理的一些JavaScript常用的API清单. 目录 元素查找 class操作 节点操作 属性操作 内容操作 css操作 位置大小 事件 DOM加载完毕 绑定上下文 去除空格 Ajax JS ...
- 【repost】Javascript操作DOM常用API总结
Javascript操作DOM常用API总结 文本整理了javascript操作DOM的一些常用的api,根据其作用整理成为创建,修改,查询等多种类型的api,主要用于复习基础知识,加深对原生js的认 ...
- Javascript数组与字符串常用api
目录 javaScript(api学习) 数组有关的api 创建数组 数组的增删改查 indexOf(); push(),pop(),unshift(),shift() forEach() map() ...
- JavaScript之数组常用API
这篇文章主要帮助大家简单理解数组的一些常用API用法,许多小伙伴常用方法记不住?别急,看完下面的介绍您一定就会明白各个方法是如何用的了.该文章适合新手小白看,大佬可以多多指点️! 1.数组的创建以及A ...
随机推荐
- JavaScript备忘录
提取字符串substring(start,end)substr(start [, length ])JavaScript substr() 方法 --
- Beta阶段第七次Scrum Meeting
Beta阶段第七次Scrum Meeting 情况简述 BETA阶段第七次Scrum Meeting 敏捷开发起始时间 2016/12/20 00:00 敏捷开发终止时间 2016/12/21 00: ...
- HDU 1233 还是畅通工程(最小生成树)
传送门 还是畅通工程 Time Limit: 4000/2000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Others)Total ...
- Day10-线程进程
什么是进程? 程序并不能单独运行,只有将程序装载到内存中,系统为它分配资源才能运行,而这种执行的程序就称之为进程.程序和进程的区别就在于:程序是指令的集合,它是进程运行的静态描述文本:进程是程序的一次 ...
- PHP安装kafka插件
在工作中我们经常遇到需要给php安装插件,今天把php安装kafka的插件的步骤整理下,仅供大家参考 1:需要先安装librdkafka git clone https://github.com/ed ...
- 大神php摘录
1. $rs = M('order')->where('id='.$res['id'])->save($order); )){ M('member')->where('id='.$m ...
- mysql 数据类型
1.整型 MySQL数据类型 含义(有符号) tinyint(m) 1个字节 范围(-128~127) smallint(m) 2个字节 范围(-32768~32767) mediumint(m) ...
- zen Code 支持的代码样式
这里是一个支持的属性和操作符的列表: E 元素名称(div, p); E#id 使用id的元素(div#content, p#intro, span#error); E.class 使用类的元素(di ...
- vtk多线程简单测试
vtkMultithreader is a class that provides support for multithreaded execution using sproc() on an SG ...
- Android日记-SimpleAdapter和BaseAdapter
SimpleAdapter 这是一个简单的适配器,可以将静态数据映射到XML文件中定义好的视图.你可以指定由Map组成的List(比如ArrayList)类型的数据.在ArrayList中的每个条目对 ...