JavaScript常⽤API合集汇总（⼀）
今天这篇⽂章跟⼤家分享⼀些JavaScript常⽤的API代码，内容太多，该篇只分享DOM操作。
下篇分享：CSS操作、对象（Object对象、Array对象、Number对象、String对象、Math对象、JSON对象和Console对象）操作，值得收藏。
JavaScript常⽤API合集汇总（⼆）
⼀、节点
1.1 节点属性
Node.baseURI    //返回当前⽹页的绝对路径
Node.ownerDocument  //返回当前节点所在的顶层⽂档对象，即document
Node.previousSibling  //返回当前节点前⾯的、距离最近的⼀个兄弟节点
Node.parentNode  //返回当前节点的⽗节点
Node.parentElement  //返回当前节点的⽗Element节点
Node.childNodes  //返回当前节点的所有⼦节点
Node.firstChild  //返回当前节点的第⼀个⼦节点
Node.lastChild  //返回当前节点的最后⼀个⼦节点
//parentNode接⼝
Node.children  //返回指定节点的所有Element⼦节点
Node.firstElementChild  //返回当前节点的第⼀个Element⼦节点
Node.lastElementChild  //返回当前节点的最后⼀个Element⼦节点
Node.childElementCount  //返回当前节点所有Element⼦节点的数⽬。
1.2 操作
Node.appendChild(node)  //向节点添加最后⼀个⼦节点
Node.hasChildNodes()  //返回布尔值，表⽰当前节点是否有⼦节点
Node.cloneNode(true);  // 默认为false(克隆节点), true(克隆节点及其属性，以及后代)
Node.insertBefore(newNode,oldNode)  // 在指定⼦节点之前插⼊新的⼦节点
NodepareDocumentPosition(node)  //返回⼀个7个⽐特位的⼆进制值，表⽰参数节点和当前节点的关系
Node.isEqualNode(noe)  //返回布尔值，⽤于检查两个节点是否相等。所谓相等的节点，指的是两个节点的类型相同、属性相同、⼦节点相同。
//ChildNode接⼝
Node.before()  //
Node.after()
1.3 Document节点
1.3.1 Document节点的属性
document.doctype  //
document.documentElement  //返回当前⽂档的根节点
document.defaultView  //返回document对象所在的window对象
document.body  //返回当前⽂档的<body>节点
document.head  //返回当前⽂档的<head>节点
document.activeElement  //返回当前⽂档中获得焦点的那个元素。
//节点集合属性
document.links  //返回当前⽂档的所有a元素
document.forms  //返回页⾯中所有表单元素
document.images  //返回页⾯中所有图⽚元素
document.scripts  //返回当前⽂档的所有脚本
document.styleSheets  //返回当前⽹页的所有样式表
//⽂档信息属性
document.documentURI  //表⽰当前⽂档的⽹址
document.URL  //返回当前⽂档的⽹址
document.domain  //返回当前⽂档的域名
document.lastModified  //返回当前⽂档最后修改的时间戳
document.location  //返回location对象，提供当前⽂档的URL信息
document.title    //返回当前⽂档的标题
document.characterSet属性返回渲染当前⽂档的字符集，⽐如UTF-8、ISO-8859-1。
document.designMode  //控制当前⽂档是否可编辑，可读写
documentpatMode  //返回浏览器处理⽂档的模式
1.3.2 Document节点的⽅法
（1）读写⽅法
document.open()  //⽤于新建并打开⼀个⽂档
document.close()  //不安⽐open⽅法所新建的⽂档
document.write()  //⽤于向当前⽂档写⼊内容
document.writeIn()  //⽤于向当前⽂档写⼊内容，尾部添加换⾏符。
（2）查节点
document.querySelector(selectors)  //接受⼀个CSS选择器作为参数，返回第⼀个匹配该选择器的元素节点。
document.querySelectorAll(selectors)  //接受⼀个CSS选择器作为参数，返回所有匹配该选择器的元素节点。
document.elementFromPoint(x,y)  //返回位于页⾯指定位置最上层的Element⼦节点。
（3）⽣成节点
（4）事件⽅法
document.addEventListener(type,listener,capture)  //注册事件
document.dispatchEvent(event)  //触发事件
（5）其他
document.hasFocus()  //返回⼀个布尔值，表⽰当前⽂档之中是否有元素被激活或获得焦点。
document.adoptNode(externalNode)  //将某个节点，从其原来所在的⽂档移除，插⼊当前⽂档，并返回插⼊后的新节点。
document.importNode(externalNode, deep)  //从外部⽂档拷贝指定节点，插⼊当前⽂档。
1.4 Element节点
1.4.1 Element节点的属性
（1）特性属性
Element.attributes  //返回当前元素节点的所有属性节点
Element.id  //返回指定元素的id属性，可读写
Element.tagName  //返回指定元素的⼤写标签名
Element.innerHTML  //返回该元素包含的HTML代码，可读写
Element.outerHTML  //返回指定元素节点的所有HTML代码，包括它⾃⾝和包含的的所有⼦元素，可读写
Element.className  //返回当前元素的class属性，可读写
Element.classList  //返回当前元素节点的所有class集合
Element.dataset  //返回元素节点中所有的data-*属性。
（2）尺⼨属性
Element.clientHeight  //返回元素节点可见部分的⾼度
Element.clientWidth  //返回元素节点可见部分的宽度
Element.clientLeft  //返回元素节点左边框的宽度
Element.clientTop  //返回元素节点顶部边框的宽度
Element.scrollHeight  //返回元素节点的总⾼度
Element.scrollWidth  //返回元素节点的总宽度
Element.scrollLeft  //返回元素节点的⽔平滚动条向右滚动的像素数值，通过设置这个属性可以改变元素的滚动位置
Element.scrollTop  //返回元素节点的垂直滚动向下滚动的像素数值
Element.offsetHeight  //返回元素的垂直⾼度(包含border,padding)
Element.offsetWidth    //返回元素的⽔平宽度(包含border,padding)
Element.offsetLeft    //返回当前元素左上⾓相对于Element.offsetParent节点的垂直偏移
Element.offsetTop  //返回⽔平位移
Element.style  //返回元素节点的⾏内样式
（3）节点相关属性
Element.children  //包括当前元素节点的所有⼦元素
Element.childElementCount  //返回当前元素节点包含的⼦HTML元素节点的个数
Element.firstElementChild  //返回当前节点的第⼀个Element⼦节点
Element.lastElementChild  //返回当前节点的最后⼀个Element⼦节点html document是什么
Element.previousElementSibling  //返回当前元素节点的前⼀个兄弟HTML节点
Element.offsetParent  //返回当前元素节点的最靠近的、并且CSS的position属性不等于static的⽗元素。1.4.2 Element节点的⽅法
（1）位置⽅法
getBoundingClientRect()
// getBoundingClientRect返回⼀个对象，包含top,left,right,bottom,width,height // width、height 元素⾃⾝宽⾼// top 元素上外边界距窗⼝最上⾯的距离
// right 元素右外边界距窗⼝最上⾯的距离
// bottom 元素下外边界距窗⼝最上⾯的距离
// left 元素左外边界距窗⼝最上⾯的距离
// width 元素⾃⾝宽(包含border,padding)
// height 元素⾃⾝⾼(包含border,padding)
getClientRects()  //返回当前元素在页⾯上形参的所有矩形。
// 元素在页⾯上的偏移量
var rect = el.getBoundingClientRect()
return {
top: p + document.body.scrollTop,
left: rect.left + document.body.scrollLeft
}
（2）属性⽅法
Element.setAttribute()：设置指定属性
Element.hasAttribute()：返回⼀个布尔值，表⽰当前元素节点是否有指定的属性
（3）查⽅法
Element.querySelector()
Element.querySelectorAll()
（4）事件⽅法
Element.addEventListener()：添加事件的回调函数
Element.dispatchEvent()：触发事件
//ie8
Element.attachEvent(oneventName,listener)
Element.detachEvent(oneventName,listener)
// event对象
var event = window.event||event;
/
/ 事件的⽬标节点
var target = event.target || event.srcElement;
// 事件代理
ul.addEventListener('click', function(event) {
if (event.LowerCase() === 'li') {
console.log(event.target.innerHTML)
}
});
（5）其他
Element.scrollIntoView()  //滚动当前元素，进⼊浏览器的可见区域
//解析HTML字符串，然后将⽣成的节点插⼊DOM树的指定位置。
Element.insertAdjacentHTML(where, htmlString);
Element.insertAdjacentHTML('beforeBegin', htmlString); // 在该元素前插⼊
Element.insertAdjacentHTML('afterBegin', htmlString); // 在该元素第⼀个⼦元素前插⼊
Element.insertAdjacentHTML('beforeEnd', htmlString); // 在该元素最后⼀个⼦元素后⾯插⼊
Element.insertAdjacentHTML('afterEnd', htmlString); // 在该元素后插⼊
Element.focus()  //⽤于将当前页⾯的焦点，转移到指定元素上

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。