-
获取元素类名
获取:
- 元素.className;
- 元素.classList;
设置:
- 元素.className = '新的类名';会覆盖之前的类名;可以通过字符串拼接的方法设置
oDiv.className = oDiv.className + 'new_name';-
元素.classList.add('新的类名');不会覆盖前面,只会增加;
oDiv.classList.add('new_box')
删除:元素.classList.remove('要删除的类名');
-
获取元素样式
获取:元素.style.某个css属性;获取的是行内样式;
获取:window.getComputedStyle(元素).某个css样式;可以获取非行内样式,是只读属性;
设置:元素.style.某个css属性 = '要设置的属性值';
oBox.style.backgroundColor = 'blue'; -
获取DOM节点
获取子节点:元素.children;获取元素所有的子级元素节点(只有标签)
元素.childNodes;获取所有的子节点(包含由换行识别来的text何标);
获取DOM第一个子节点:元素.firstChild;是元素内部第一个子节点,不一定是子元素节点。
元素.firstElementChild;是元素内部的第一个子元素节点。
获取DOM最后一个子节点:元素.lastChild;是元素内部最后一个子节点,不一定是子元素节点。
元素.lastElementChild;是元素内部的最后一个子元素节点。
获取兄弟节点:元素.nextSibling;获取下一个兄弟节点;
元素.nextElementSibling;获取下一兄弟元素节点。
获取父级节点:元素.parentNode;获取元素的父级节点。
节点分类:
- 元素节点:标签节点;
- 文本节点:文本,以及由换行识别来的空文本;
- 属性节点:元素.attributes;得到的是一个伪数组,元素所带有的属性。
节点类型:元素.nodeType,元素节点打印1,文本节点打印3,属性节点打印2。
节点名称:元素.nodeName,元素节点名称大写,文本节点名称#text,属性节点名称为属性名。
节点的值:元素.nodeValue,元素节点没有,文本节点的值是实际文本,属性节点的值是属性值。