原生JS中DOM节点相关API合集
节点属性
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
操作
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()
Document节点
属性
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
Document节点的方法
读写方法
document.open()
document.close()
document.write()
document.writeIn()
查找节点
document.querySelector(selectors)
document.querySelectorAll(selectors)
document.getElementsByTagName(tagName)
document.getElementsByClassName(className)
document.getElementsByName(name)
document.getElementById(id)
document.elementFromPoint(x,y)
生成节点
document.createElement(tagName)
document.createTextNode(text)
document.createAttribute(name)
document.createDocumentFragment()
(4)事件方法
document.createEvent(type)
document.addEventListener(type,listener,capture)
document.removeEventListener(type,listener,capture)
document.dispatchEvent(event)
其他
document.hasFocus()
document.adoptNode(externalNode)
document.importNode(externalNode, deep)
Element节点
Element节点
Element节点的属性
特性属性
Element.attributes
Element.id
Element.tagName
Element.innerHTML
Element.outerHTML
Element.className
Element.classList
Element.dataset
尺寸属性
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
节点相关属性
Element.children
Element.childElementCount
Element.firstElementChild
Element.lastElementChild
Element.nextElementSibling
Element.previousElementSibling
Element.offsetParent
Element节点的方法
位置方法
getBoundingClientRect()
getClientRects()
var rect = el.getBoundingClientRect()
return {
top: rect.top + document.body.scrollTop,
left: rect.left + document.body.scrollLeft
}
属性方法
Element.getAttribute():读取指定属性
Element.setAttribute():设置指定属性
Element.hasAttribute():返回一个布尔值,表示当前元素节点是否有指定的属性
Element.removeAttribute():移除指定属性
查找方法
Element.querySelector()
Element.querySelectorAll()
Element.getElementsByTagName()
Element.getElementsByClassName()
事件方法
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)
}
});
其他
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()