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节点 此刻才添加到文档树中