关闭

javascript新的原生态API

标签: javascriptapiw3c
528人阅读 评论(0) 收藏 举报
分类:

     以下是最新的w3c标准的javascript,目前支持运行在firefox, chrome,IE9以上版本的浏览器

     参考资料:https://developer.mozilla.org/ru/docs/Web/API

                         http://docs.webplatform.org/wiki/dom


选择元素
var els = document.querySelectorAll('.el');

var $ = function (el) {
  return document.querySelectorAll(el);
}

var els = $('.el');

创建元素

var newEl = document.createElement('div');
Add event listener

事件绑定

[].forEach.call(document.querySelectorAll('.el'), function (el) {
  el.addEventListener('event', function() {

  }, false);
});

set/get操作

document.querySelector('.el').setAttribute('key', 'value');
document.querySelector('.el').getAttribute('key');

添加、移除、变换样式类

document.querySelector('.el').classList.add('class');
document.querySelector('.el').classList.remove('class');
document.querySelector('.el').classList.toggle('class');

追加节点

document.querySelector('.el').appendChild(document.createElement('div'));

克隆节点

var clonedEl = document.querySelector('.el').cloneNode(true);

移除节点

remove('.el');

function remove(el) {
  var toRemove = document.querySelector(el);

  toRemove.parentNode.removeChild(toRemove);
}

父元素

document.querySelector('.el').parentNode;

前后元素

document.querySelector('.el').previousElementSibling;
document.querySelector('.el').nextElementSibling;

get/post的Ajax操作

// get
var xhr = new XMLHttpRequest();

xhr.open('GET', url);
xhr.onreadystatechange = function (data) {

}
xhr.send();

// post
var xhr = new XMLHttpRequest()

xhr.open('POST', url);
xhr.onreadystatechange = function (data) {

}
xhr.send({data: data});


0
0

猜你在找
【直播】机器学习&数据挖掘7周实训--韦玮
【套餐】系统集成项目管理工程师顺利通关--徐朋
【直播】3小时掌握Docker最佳实战-徐西宁
【套餐】机器学习系列套餐(算法+实战)--唐宇迪
【直播】计算机视觉原理及实战--屈教授
【套餐】微信订阅号+服务号Java版 v2.0--翟东平
【直播】机器学习之矩阵--黄博士
【套餐】微信订阅号+服务号Java版 v2.0--翟东平
【直播】机器学习之凸优化--马博士
【套餐】Javascript 设计模式实战--曾亮
查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:525920次
    • 积分:7938
    • 等级:
    • 排名:第2578名
    • 原创:234篇
    • 转载:225篇
    • 译文:1篇
    • 评论:19条
    文章分类
    最新评论