DOM元素节点常用操作

元素节点常见操作

• jd.className

  jd.className = jd.className + '类名'
  

• jd.classLIst.add('className')：添加元素节点类名，并保留原有的类名

• jd.classList.remove('className')：删除元素的类名

• jd.innerHTML：会清空jd的内容 innerHTML里面放置模板字符串

  jd.innerHTML = '666' // 先清除jd节点里面的所有内容，再添加成666
  

• jd.remove：移除节点，包括文档树内的对象

• jd.parentElement.removeChild(jdName)：移除节点

• jd.cloneNode()：返回一个克隆的标签

• jd.insertBefore(a1,a2)：把a1添加到a2的前面

获取节点

• document.getElementById('idName')
• document.getElementByClassName('className')
• document.getElementByTagName('TagName')
• document.querySelector('#idName .className')
• document.querySelectorAll('#idName .className')
• document.parentNode：节点在 DOM 树中的父节点 这个节点不限于元素节点，可以时文本
• document.parentElement：返回该节点的父元素，或者父元素不是DOM节点，则返回null
• document.children：是一个只读的属性，动态更新的
• document.childNodes：返回包含指定节点的子节点的集合，该集合为即时更新的集合
• document.firstElementChild | document.children[index]：
• document.firstChild | document.childNodes[index]
• document.nextElemnetSibling：返回指定节点后一个元素，如果时最后一个元素，则返回null
• document.nextSibling：只读元素，返回父元素childNodes紧跟后的节点，如果没有，返回null
• document.previousElementSibling：返回指定节点前一个元素，如果时最后一个元素，则返回null
• document.previousSibling：只读元素，返回父元素childNodes前一的节点，如果没有，返回null

创建元素节点

• document.createElement('TagName')

  这个元素不会渲染到页面上的，它不在文档树中

  • jd.appendChil
  • d(y)：把y节点添加到jd节点 此刻才添加到文档树中