一、节点
1.1 节点属性
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
| Node.nodeName
Node.nodeType
Node.nodeValue
Node.textContent
Node.baseURI
Node.ownerDocument
Node.nextSibling
Node.previousSibling
Node.parentNode
Node.parentElement
Node.childNodes
Node.firstChild
Node.lastChild
Node.children
Node.firstElementChild
Node.lastElementChild
Node.childElementCount
|
1.2 操作
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
| Node.appendChild(node)
Node.hasChildNodes()
Node.cloneNode(true);
Node.insertBefore(newNode,oldNode)
Node.removeChild(node)
Node.replaceChild(newChild,oldChild)
Node.contains(node)
Node.compareDocumentPosition(node)
Node.isEqualNode(noe)
Node.normalize()
Node.remove()
Node.before()
Node.after()
Node.replaceWith()
|
1.3 Document节点
1.3.1 Document节点的属性
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
| document.doctype
document.documentElement
document.defaultView
document.body
document.head
document.activeElement
document.links
document.forms
document.images
document.embeds
document.scripts
document.styleSheets
document.documentURI
document.URL
document.domain
document.lastModified
document.location
document.referrer
document.title
document.characterSet属性返回渲染当前文档的字符集，比如UTF-8、ISO-8859-1。
document.readyState
document.designMode
document.compatMode
document.cookie
|
1.3.2 Document节点的方法
（1）读写方法
1
2
3
4
| document.open()
document.close()
document.write()
document.writeIn()
|
（2）查找节点
1
2
3
4
5
6
7
| document.querySelector(selectors)
document.querySelectorAll(selectors)
document.getElementsByTagName(tagName)
document.getElementsByClassName(className)
document.getElementsByName(name)
document.getElementById(id)
document.elementFromPoint(x,y)
|
（3）生成节点
1
2
3
4
| document.createElement(tagName)
document.createTextNode(text)
document.createAttribute(name)
document.createDocumentFragment()
|
（4）事件方法
1
2
3
4
| document.createEvent(type)
document.addEventListener(type,listener,capture)
document.removeEventListener(type,listener,capture)
document.dispatchEvent(event)
|
（5）其他
1
2
3
| document.hasFocus()
document.adoptNode(externalNode)
document.importNode(externalNode, deep)
|
1.4 Element节点
1.4.1 Element节点的属性
（1）特性属性
1
2
3
4
5
6
7
8
| Element.attributes
Element.id
Element.tagName
Element.innerHTML
Element.outerHTML
Element.className
Element.classList
Element.dataset
|
（2）尺寸属性
1
2
3
4
5
6
7
8
9
10
11
12
13
| Element.clientHeight
Element.clientWidth
Element.clientLeft
Element.clientTop
Element.scrollHeight
Element.scrollWidth
Element.scrollLeft
Element.scrollTop
Element.offsetHeight
Element.offsetWidth
Element.offsetLeft
Element.offsetTop
Element.style
|
（3）节点相关属性
1
2
3
4
5
6
7
| Element.children
Element.childElementCount
Element.firstElementChild
Element.lastElementChild
Element.nextElementSibling
Element.previousElementSibling
Element.offsetParent
|
1.4.2 Element节点的方法
（1）位置方法
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
| getBoundingClientRect()
getClientRects()
var rect = el.getBoundingClientRect()
return {
top: rect.top + document.body.scrollTop,
left: rect.left + document.body.scrollLeft
}
|
（2）属性方法
1
2
3
4
| Element.getAttribute()：读取指定属性
Element.setAttribute()：设置指定属性
Element.hasAttribute()：返回一个布尔值，表示当前元素节点是否有指定的属性
Element.removeAttribute()：移除指定属性
|
（3）查找方法
1
2
3
4
| Element.querySelector()
Element.querySelectorAll()
Element.getElementsByTagName()
Element.getElementsByClassName()
|
（4）事件方法
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
| Element.addEventListener()：添加事件的回调函数
Element.removeEventListener()：移除事件监听函数
Element.dispatchEvent()：触发事件
Element.attachEvent(oneventName,listener)
Element.detachEvent(oneventName,listener)
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)
}
});
|
（5）其他
1
2
3
4
5
6
7
8
9
10
11
| Element.scrollIntoView()
Element.insertAdjacentHTML(where, htmlString);
Element.insertAdjacentHTML('beforeBegin', htmlString);
Element.insertAdjacentHTML('afterBegin', htmlString);
Element.insertAdjacentHTML('beforeEnd', htmlString);
Element.insertAdjacentHTML('afterEnd', htmlString);
Element.remove()
Element.focus()
|
二、CSS操作
（1）类名操作
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
|
Element.className
Element.className += ' ' + newClassName
function hasClass(element,className){
return new RegExp(className,'gi').test(element.className);
}
function removeClass(element,className){
element.className = element.className.replace(new RegExp('(^|\\b)' + className.split(' ').join('|') + '(\\b|$)', 'gi'),'');
}
element.classList.add(className)
element.classList.remove(className)
element.classList.contains(className)
element.classList.toggle(className)
|
（2）style操作
1
2
3
4
5
6
7
8
9
| element.setAttribute('style','')
element.style.backgroundColor = 'red'
element.style.cssText
element.style.setProperty(propertyName,value)
element.style.getPropertyValue(property)
element.style.removeProperty(property)
|
（3）操作非内联样式
1
2
3
4
5
6
7
|
element.currentStyle[attrName]
window.getComputedStyle(el,null)[attrName]
window.getComputedStyle(el,null).getPropertyValue(attrName)
window.getComputedStyle(el,':after')[attrName]
|
三、对象
3.1 Object对象
（1）生成实例对象
var o = new Object()
（2）属性
（3）方法
1
2
3
4
5
6
7
8
| Object.keys(o)
Object.getOwnPropertyName(o)
valueOf()：
toString()：
toLocaleString()：
hasOwnProperty()：
isPrototypeOf()：
propertyIsEnumerable()：
|
3.2 Array对象
（1）生成实例对象
（2）属性
（3）Array.isArray()
（4）Array实例的方法
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
| a.valueof()
a.toString()
a.push(value,vlaue....)
pop()
join()
concat()
shift()
unshift(value)
reverse()
slice(start_index, upto_index);
splice(index, count_to_remove, addElement1, addElement2, ...);
sort()
map()
map(elem,index,arr)
forEach()
filter()
some()
every()
reduce()
reduceRight()
indexOf(s)
lastIndexOf()
|
3.3 Number对象
（1）生成对象
（2）Number对象的属性
1
2
3
4
5
6
7
| 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对象实例的方法
1
2
3
4
| toString()
toFixed()
toExponential()
toPrecision()
|
3.4 String 对象
（1）生成实例对象
（2）String对象的属性
（3）方法
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
| s.chatAt(index)
s.fromCharCode()
s.charCodeAt(index)
s.concat(s2)
s.slice(start,end)
s.substring(start,end)
s.substr(start,length)
s.indexOf(s)
s.lastIndexOf()
s.trim()
s.toLowerCase()
s.toUpperCase()
s.localeCompare(s2)
s.match(regexp)
s.search()
s.replace(oldValue,newValue)
s.split()
|
3.5 Math对象
（1）属性
1
2
3
4
5
6
7
8
| 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）数学方法
1
2
3
4
5
6
7
8
9
10
11
| Math.abs()：返回参数的绝对值
Math.ceil()：向上取整，接受一个参数，返回大于该参数的最小整数。
Math.floor()：向下取整
Math.max(n,n1,...)：可接受多个参数，返回最大值
Math.min(n,n1,..)：可接受多个参数，返回最小值
Math.pow(n,e)：指数运算, 返回以第一个参数为底数、第二个参数为幂的指数值。
Math.sqrt()：返回参数值的平方根。如果参数是一个负值，则返回NaN。
Math.log()：返回以e为底的自然对数值。
Math.exp()：返回e的指数，也就是常数e的参数次方。
Math.round()：四舍五入
Math.random()：返回0到1之间的一个伪随机数，可能等于0，但是一定小于1。
|
（3）三角函数方法
1
2
3
4
5
6
| Math.sin()：返回参数的正弦
Math.cos()：返回参数的余弦
Math.tan()：返回参数的正切
Math.asin()：返回参数的反正弦（弧度值）
Math.acos()：返回参数的反余弦（弧度值）
Math.atan()：返回参数的反正切（弧度值）
|
3.6 JSON对象
（1）方法
1
2
3
4
5
6
| JSON.stringify()
JSON.parse()
|
3.7 console对象
（1）方法
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
| console.log(text,text2,...)
console.info()
console.debug()
console.warn()
console.error()
console.table()
console.count()
console.dir()
console.dirxml()
console.assert()
console.time()
console.timeEnd()
console.profile()
console.profileEnd()
console.group()
console.groupend()
console.groupCollapsed()
console.trace()
console.clear()
|