JavaScript常用API总结

本文总结了JavaScript中常用的核心API,包括元素查找、class操作、节点操作等,适用于不同版本的浏览器,如IE8及更高版本。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

下面是我整理的一些JavaScript常用的API清单。

目录

  1. 元素查找

  2. class操作

  3. 节点操作

  4. 属性操作

  5. 内容操作

  6. css操作

  7. 位置大小

  8. 事件

  9. DOM加载完毕

  10. 绑定上下文

  11. 去除空格

  12. Ajax

  13. JSON处理

  14. 节点遍历

元素查找

// 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){

 

})

### 常用 JavaScript API 列表及用法 #### 1. 遍历数组的常见方法 JavaScript 提供了多种用于遍历数组的方法,这些方法可以简化开发过程并提高代码可读性。以下是几种常见的数组遍历方式及其用途: - **`forEach()`**: 对数组中的每一项运行给定函数,不返回任何值。 ```javascript const array = [1, 2, 3]; array.forEach(item => console.log(item)); // 输出: 1, 2, 3 ``` - **`map()`**: 创建一个新数组,其结果是对调用数组中的每个元素执行回调函数的结果。 ```javascript const newArray = array.map(item => item * 2); // 返回 [2, 4, 6] ``` - **`filter()`**: 创建一个新数组,包含所有通过测试的元素。 ```javascript const filteredArray = array.filter(item => item > 1); // 返回 [2, 3] ``` - **`reduce()`**: 执行 reducer 函数,将其结果汇总为单个输出值。 ```javascript const sum = array.reduce((acc, curr) => acc + curr, 0); // 返回 6 ``` 上述方法均属于高频使用的数组操作工具[^1]。 --- #### 2. 数组的操作类 API 除了遍历外,还有一些专门用来修改或查询数组结构的 API: - **`push()` 和 `pop()`**: 向数组末尾添加/移除元素。 ```javascript array.push(4); // 添加元素到末尾 array.pop(); // 移除最后一个元素 ``` - **`shift()` 和 `unshift()`**: 删除第一个元素或将新元素插入开头。 ```javascript array.shift(); // 删除首个元素 array.unshift(0); // 插入到首位 ``` - **`slice()`**: 截取子数组而不改变原始数据。 ```javascript const subArray = array.slice(1, 3); // 返回 [2, 3] ``` - **`splice()`**: 修改现有数组,删除、替换或新增指定位置上的项目。 ```javascript array.splice(1, 1, 'a'); // 替换索引为1的位置为'a' ``` 这些功能强大的 API 能够帮助开发者快速完成复杂的数组管理任务[^3]。 --- #### 3. 拖拽事件相关 API 对于交互性强的应用场景,比如拖放文件上传或者日程安排界面设计,原生支持的一系列拖拽事件非常实用: - **`ondragstart`**: 当用户开始拖动某个对象时触发此事件。 - **`ondragover`**: 默认情况下浏览器会阻止该行为;如果希望允许放置,则需显式设置 `event.preventDefault()`。 - **`ondrop`**: 发生在目标区域接受被释放的对象之后。 下面是一个简单的例子展示如何利用这些特性构建基本的功能模块: ```html <div id="draggable" draggable="true">Drag me</div> <div id="droptarget"></div> <script> document.getElementById('draggable').addEventListener('dragstart', (e) => { e.dataTransfer.setData("text/plain", "Data"); }); document.getElementById('droptarget').addEventListener('drop', (e) => { e.preventDefault(); alert(e.dataTransfer.getData("text/plain")); }); </script> ``` 这段脚本展示了基于 HTML5 标准定义下的标准拖拽流程实现细节[^2]。 --- ### 总结 以上列举了几大类别下最常遇到的一些核心接口说明文档链接地址已经给出,请进一步查阅官方资料获取更详尽的信息以便深入理解掌握它们的具体应用场景和技术要点。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值