DOM操作

94 阅读1分钟

获取元素类名

方法1
    元素.className          获取
    元素.className='新类名' 修改

方法2  
    元素.classList                  获取
    元素.classList.add('新类名')    修改
    元素.classList.remove('类名')   删除

获取元素样式

元素.style.样式                 获取内部样式
元素.getComputedStyle.样式      获取外部样式(只读)

获取所有节点

获取元素下的所有子节点 (会将换行识别为 text 获取到的就是text)
    元素.childNodes

获取元素所有的子级元素节点(只获取标签)
    元素.children
    

获取第一个子节点

获取元素下的第一个子节点(会将换行识别为 text 获取text)
    元素.firstChild

获取元素下的第一个标签子节点
    元素.firstElementChild

获取最后一个子节点

获取元素最后一个节点(会将换行识别为 text 获取text)
    元素.lastChild

获取元素下最后一个标签节点
    元素.lastElementChild

获取兄弟节点

获取下一个兄弟节点(会获取 text)
    元素.nextSibling

获取下一个标签兄弟节点
    元素.nextSibling

获取上一个兄弟节点(会获取 text)
    元素.previousSibling

获取上一个标签兄弟节点
    元素.previousElementSibling
    

获取父节点

获取父节点
    元素.parentNode

节点的分类

元素节点    元素.firstElementChild
文本节点    元素.firstChild
属性节点    元素.attributes[下标]

节点类型

元素节点.nodetype

节点名称

元素节点.nodeName

节点的值

元素节点.nodeValue