获取元素类名、样式,获取DOM相关节点

165 阅读2分钟
  1. 获取元素类名

    获取:

    • 元素.className;
    • 元素.classList;

    设置:

    • 元素.className = '新的类名';会覆盖之前的类名;可以通过字符串拼接的方法设置
    oDiv.className = oDiv.className + 'new_name';
    
    • 元素.classList.add('新的类名');不会覆盖前面,只会增加;

      oDiv.classList.add('new_box')
      

    删除:元素.classList.remove('要删除的类名');

  2. 获取元素样式

    获取:元素.style.某个css属性;获取的是行内样式;

    获取:window.getComputedStyle(元素).某个css样式;可以获取非行内样式,是只读属性;

    设置:元素.style.某个css属性 = '要设置的属性值';

    oBox.style.backgroundColor = 'blue';
    
  3. 获取DOM节点

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

    元素.childNodes;获取所有的子节点(包含由换行识别来的text何标);

    获取DOM第一个子节点:元素.firstChild;是元素内部第一个子节点,不一定是子元素节点。

    元素.firstElementChild;是元素内部的第一个子元素节点。

    获取DOM最后一个子节点:元素.lastChild;是元素内部最后一个子节点,不一定是子元素节点。

    元素.lastElementChild;是元素内部的最后一个子元素节点。

    获取兄弟节点:元素.nextSibling;获取下一个兄弟节点;

    元素.nextElementSibling;获取下一兄弟元素节点。

    获取父级节点:元素.parentNode;获取元素的父级节点。

    节点分类:

    • 元素节点:标签节点;
    • 文本节点:文本,以及由换行识别来的空文本;
    • 属性节点:元素.attributes;得到的是一个伪数组,元素所带有的属性。

    节点类型:元素.nodeType,元素节点打印1,文本节点打印3,属性节点打印2。

    节点名称:元素.nodeName,元素节点名称大写,文本节点名称#text,属性节点名称为属性名。

    节点的值:元素.nodeValue,元素节点没有,文本节点的值是实际文本,属性节点的值是属性值。