DOM常⽤API合集
常⽤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)  //返回布尔值，⽤于检查两个节点是否相等。所谓相等的节点，指的是两个节点的类型相同、属性相同、⼦节点相同。alize()  //⽤于清理当前节点内部的所有Text节点。
它会去除空的⽂本节点，并且将毗邻的⽂本节点合并成⼀个。
//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⼦节点
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()  //⽤于将当前页⾯的焦点，转移到指定元素上
⼆、CSS操作
（1）类名操作
//ie8以下
Element.className  //获取元素节点的类名
Element.className += ' ' + newClassName  //新增⼀个类名
//判断是否有某个类名
function hasClass(element,className){
return new RegExp(className,'gi').test(element.className);
}
//移除class
function removeClass(element,className){
element.className = place(new RegExp('(^|\\b)' + className.split(' ').join('|') + '(\\b|$)', 'gi'),'');
}
//ie10
element.classList.add(className)  //新增
ve(className)  //删除
ains(className)  //是否包含
le(className)  //toggle class
（2）style操作
element.setAttribute('style','')
element.style.backgroundColor = 'red'
element.style.cssText //⽤来读写或删除整个style属性
element.style.setProperty(propertyName,value)  //设置css属性
PropertyValue(property)  //获取css属性
veProperty(property)  //删除css属性
操作⾮内联样式
element表格横向滚动条/
/ie8
element.currentStyle[attrName]
//ie9+
//伪类
三、对象
3.1 Object对象
（1）⽣成实例对象
var o = new Object()
（2）属性
Object.prototype  //返回原型对象
（3）⽅法
Object.keys(o)  //遍历对象的可枚举属性
对象实例的⽅法
valueOf()：返回当前对象对应的值。
toString()：返回当前对象对应的字符串形式。
toLocaleString()：返回当前对象对应的本地字符串形式。
hasOwnProperty()：判断某个属性是否为当前对象⾃⾝的属性，还是继承⾃原型对象的属性。
isPrototypeOf()：判断当前对象是否为另⼀个对象的原型。
propertyIsEnumerable()：判断某个属性是否可枚举。
3.2 Array对象
（1）⽣成实例对象
var a = new Array()
（2）属性
a.length  //长度
（3）Array.isArray()
Array.isArray(a)  //⽤来判断⼀个值是否为数组
（4）Array实例的⽅法
a.valueof()  //返回数组本⾝
a.push()  //⽤于在数组的末端添加⼀个或多个元素，并返回添加新元素后的数组长度。
pop()  //⽤于删除数组的最后⼀个元素，并返回该元素
join()  //以参数作为分隔符，将所有数组成员组成⼀个字符串返回。如果不提供参数，默认⽤逗号分隔。
concat()  //⽤于多个数组的合并。它将新数组的成员，添加到原数组的尾部，然后返回⼀个新数组，原数组不变。
shift()  //⽤于删除数组的第⼀个元素，并返回该元素。
unshift(value)  //⽤于在数组的第⼀个位置添加元素，并返回添加新元素后的数组长度。
reverse()  //⽤于颠倒数组中元素的顺序，返回改变后的数组
slice(start_index, upto_index);  //⽤于提取原数组的⼀部分，返回⼀个新数组，原数组不变。第⼀个参数为起始位置（从0开始），第⼆个参数为终⽌位置（但该位置的元素本⾝不包括在内）。如果省略第⼆个参数，则⼀直返回到原splice(index, count_to_remove, addElement1, addElement2, ...);  //⽤于删除原数组的⼀部分成员，并可以在被删除的位置添加⼊新的数组成员，返回值是被删除的元素。第⼀
个参数是删除的起始位置，第⼆个参数是被删除的元素sort()  //对数组成员进⾏排序，默认是按照字典顺序排序。排序后，原数组将被改变。如果想让sort⽅法按照⾃定义⽅式排序，可以传⼊⼀个函数作为参数，表⽰按照⾃定义⽅法进⾏排序。该函数本⾝⼜接受两个参数，表⽰进⾏⽐较map()  //对数组的所有成员依次调⽤⼀个函数，根据函数结果返回⼀个新数组。
map(elem,index,arr)  //map⽅法接受⼀个函数作为参数。该函数调⽤时，map⽅法会将其传⼊三个参数，分别是当前成员、当前位置和数组本⾝。
forEach()  //遍历数组的所有成员，执⾏某种操作，参数是⼀个函数。它接受三个参数，分别是当前位置的值、当前位置的编号和整个数组。
filter()  //参数是⼀个函数，所有数组成员依次执⾏该函数，返回结果为true的成员组成⼀个新数组返回。该⽅法不会改变原数组。
some()    //⽤来判断数组成员是否符合某种条件。接受⼀个函数作为参数，所有数组成员依次执⾏该函数，返回⼀个布尔值。该函数接受三个参数，依次是当前位置的成员、当前位置的序号和整个数组。只要有⼀个数组成员的返回值every()  //⽤来判断数组成员是否符合某种条件。接受⼀个函数作为参数，所有数组成员依次执⾏该函数，返回⼀个布尔值。该函数接受三个参数，依次是当前位置的成员、当前位置的序号和整个数组。所有数组成员的返回值都是tr reduce()  //依次处理数组的每个成员，
最终累计为⼀个值。从左到右处理（从第⼀个成员到最后⼀个成员）
reduceRight()  //依次处理数组的每个成员，最终累计为⼀个值。从右到左（从最后⼀个成员到第⼀个成员）
indexOf(s)  //返回给定元素在数组中第⼀次出现的位置，如果没有出现则返回-1。可以接受第⼆个参数，表⽰搜索的开始位置
lastIndexOf()  //返回给定元素在数组中最后⼀次出现的位置，如果没有出现则返回-1。
3.3 Number对象
（1）⽣成对象
var n = new Number()
（2）Number对象的属性
Number.POSITIVE_INFINITY：正的⽆限，指向Infinity。
Number.NEGATIVE_INFINITY：负的⽆限，指向-Infinity。
Number.NaN：表⽰⾮数值，指向NaN。
Number.MAX_VALUE：表⽰最⼤的正数，相应的，最⼩的负数为-Number.MAX_VALUE。
Number.MIN_VALUE：表⽰最⼩的正数（即最接近0的正数，在64位浮点数体系中为5e-324），相应的，最接近0的负数为-Number.MIN_VALUE。
Number.MAX_SAFE_INTEGER：表⽰能够精确表⽰的最⼤整数，即9007199254740991。
Number.MIN_SAFE_INTEGER：表⽰能够精确表⽰的最⼩整数，即-9007199254740991。
（4）Number对象实例的⽅法
toString()  //⽤来将⼀个数值转为字符串形式.可以接受⼀个参数，表⽰输出的进制。如果省略这个参数，默认将数值先转为⼗进制，再输出字符串；否则，就根据参数指定的进制，将⼀个数字转化成某个进制的字符串。
toFixed()  //⽤于将⼀个数转为指定位数的⼩数，返回这个⼩数对应的字符串。
toExponential()  //⽤于将⼀个数转为科学计数法形式。可传⼊⼀个参数，参数表⽰⼩数点后有效数字的位数，范围为0到20，超出这个范围，会抛出⼀个RangeError。
toPrecision()  //⽤于将⼀个数转为指定位数的有效数字。
3.4 String 对象
（1）⽣成实例对象
var s = new String()
（2）String对象的属性
s.length  //返回字符串的长度
（3）⽅法
s.chatAt(index)  //返回指定位置的字符
s.fromCharCode()    //该⽅法的参数是⼀系列Unicode码点，返回对应的字符串。
s.charCodeAt(index)    //返回给定位置字符的Unicode码点（⼗进制表⽰）
s.slice(start,end)  //⽤于从原字符串取出⼦字符串并返回，不改变原字符串。第⼀个参数是⼦字符串的开始位置，第⼆个参数是⼦字符串的结束位置（不含该位置）。如果参数是负值，表⽰从结尾开始倒数计算的位置，即该负值加上s.substring(start,end)  //⽤于从原字符串取出⼦字符串并返回，不改变原字符串.第⼀个参数表⽰⼦字符串的开始位置，第⼆个位置表⽰结束位置。
s.substr(start,length)  //⽤于从原字符串取出⼦字符串并返回，不改变原字符串。第⼀个参数是⼦字符串的开始位置，第⼆个参数是⼦字符串的长度。如果第⼀个参数是负数，表⽰倒数计算的字符位置。如果第⼆个参数是负数，将被s.indexOf(s)  //返回给定元素在字符串中第⼀次出现的位置，如果没有出现则返回-1。可以接受第⼆个参数，表⽰搜索的开始位置
s.lastIndexOf()  //返回给定元素在字符串中最后⼀次出现的位置，如果没有出现则返回-1。
s.localeCompare(s2)  //⽤于⽐较两个字符串。它返回⼀个整数，如果⼩于0，表⽰第⼀个字符串⼩于第⼆个字符串；如果等于0，表⽰两者相等；如果⼤于0，表⽰第⼀个字符串⼤于第⼆个字符串。
s.match(regexp)  //⽤于确定原字符串是否匹配某个⼦字符串，返回⼀个数组，成员为匹配的第⼀个字符串。如果没有到匹配，则返回null。
s.search()  //返回值为匹配的第⼀个位置。如果没有到匹配，则返回-1。
s.split()  //按照给定规则分割字符串，返回⼀个由分割出来的⼦字符串组成的数组。还可传⼊第⼆个参数，决定了返回数组的成员数。
3.5 Math对象
（1）属性
Math.E：常数e。
Math.LN2：2的⾃然对数。
Math.LN10：10的⾃然对数。
Math.LOG2E：以2为底的e的对数。
Math.LOG10E：以10为底的e的对数。
Math.PI：常数Pi。
Math.SQRT1_2：0.5的平⽅根。
Math.SQRT2：2的平⽅根。
（2）数学⽅法
Math.abs()：返回参数的绝对值
Math.floor()：向下取整
Math.max(n,n1,...)：可接受多个参数，返回最⼤值
Math.min(n,n1,..)：可接受多个参数，返回最⼩值
Math.pow(n,e)：指数运算, 返回以第⼀个参数为底数、第⼆个参数为幂的指数值。
Math.sqrt()：返回参数值的平⽅根。如果参数是⼀个负值，则返回NaN。
Math.log()：返回以e为底的⾃然对数值。
Math.random()：返回0到1之间的⼀个伪随机数，可能等于0，但是⼀定⼩于1。
（3）三⾓函数⽅法
Math.sin()：返回参数的正弦
Math.tan()：返回参数的正切
Math.asin()：返回参数的反正弦（弧度值）
Math.acos()：返回参数的反余弦（弧度值）
Math.atan()：返回参数的反正切（弧度值）
3.6 JSON对象
（1）⽅法
JSON.stringify()
//⽤于将⼀个值转为字符串。该字符串应该符合JSON格式，并且可以被JSON.parse⽅法还原。
//（JSON.stringify(obj, selectedProperties)）还可以接受⼀个数组，作为第⼆个参数，指定需要转成字符串的属性。
//还可以接受第三个参数，⽤于增加返回的JSON字符串的可读性。如果是数字，表⽰每个属性前⾯添加的空格（最多不超过10个）；如果是字符串（不超过10个字符），则该字符串会添加在每⾏前⾯。
JSON.parse()  //⽤于将JSON字符串转化成对象。
3.7 console对象
（1）⽅法
console.log(text,text2,...)  //⽤于在console窗⼝输出信息。它可以接受多个参数，将它们的结果连接起来输出。如果第⼀个参数是格式字符串（使⽤了格式占位符），console.log⽅法将依次⽤后⾯的参数替换占位符，然后再进⾏输console.info()  //在console窗⼝输出信息，同时，会在输出信息的前⾯，加上⼀个蓝⾊图标。
console.debug()  //在console窗⼝输出信息，同时，会在输出信息的前⾯，加上⼀个蓝⾊图标。
console.warn()  //输出信息时，在最前⾯加⼀个黄⾊三⾓，表⽰警告；
<()  //输出信息时，在最前⾯加⼀个红⾊的叉，表⽰出错，同时会显⽰错误发⽣的堆栈
console.table()  //可以将复合类型的数据转为表格显⽰。
console.dir()    //⽤来对⼀个对象进⾏检查（inspect），并以易于阅读和打印的格式显⽰。
console.dirxml()  //⽤于以⽬录树的形式，显⽰DOM节点。
console.assert()  //接受两个参数，第⼀个参数是表达式，第⼆个参数是字符串。只有当第⼀个参数为false，才会输出第⼆个参数，否则不会有任何结果。
//这两个⽅法⽤于计时，可以算出⼀个操作所花费的准确时间。
console.time()
console.timeEnd()
//time⽅法表⽰计时开始，timeEnd⽅法表⽰计时结束。它们的参数是计时器的名称。调⽤timeEnd⽅法之后，console窗⼝会显⽰“计时器名称: 所耗费的时间”。
console.profile()  //⽤来新建⼀个性能测试器（profile），它的参数是性能测试器的名字。
console.profileEnd()  //⽤来结束正在运⾏的性能测试器。
//上⾯这两个⽅法⽤于将显⽰的信息分组。它只在输出⼤量信息时有⽤，分在⼀组的信息，可以⽤⿏标
折叠/展开。
console.clear()  //⽤于清除当前控制台的所有输出，将光标回置到第⼀⾏。

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