Dom原生操作和jquery操作

Posted by Shen Chaoran on August 6, 2018

DOM

  • Node 和 Element 的区别：node 是一个接口/基类，Element 继承了Node，Node 类型包括有 element, attribute, text, comment, document, document fragment, notation等。

原生 DOM 操作

element.getElementById('id')
element.getElementsByName('name')
element.getElementsByClass('className')
element.getElementsByTagName('li')
// 这个特殊字符要转义
element.querySelector('li.menu a')
element.querySelectorAll('li.menu a')

document.createElement()
document.createTextNode()
document.createDocumentFragment()
document.createComment()
document.createElementNS()

node.childNodes()
node.firstChild()
node.lastChild()
node.nextSibling()
node.previousSibling()
node.parentNode()
node.textContent()
node.parentElement()
node.appendChild()
node.removeChild()
node.innerHTML()
node.outerHTML()
node.innerText()    // 块级标签会加换行符
node.textContent()  // 只把标签去掉，其他格式与原本 html 内容完全相同

// 删除自身
node.remove()
node.replaceChild()
node.cloneNode()
document.importNode(oldNode, isDeep)

element.getAttribute()
element.setAttribute()
element.style[styleName] = ''

jQuery DOM 操作

// insert
append()
appendTo()
prepend()
prependTo()
before()
after()
insertAfter()
insertBefore()
clone()
remove()
detach()
empty()

hasClass()
addClass()
removeClass()

attr()
prop()
css()

// innerHtml
html()
text()
// form control value
val()

height()
innerHeight()
innerWidth()
outerHeight()
outerWidth()
FEATURED TAGS
生活 如何优雅地写好代码 Angular 响应式编程 RxJS 组件生命周期 组件实例 异步 NodeJS express ControlValueAccessor Depend Injection Change Detection Angular 5 CSS 模型共享与集成 JavaScript event jQuery 浏览器兼容 变化检测 前端
FRIENDS