DOM常用操作

来源:互联网 发布:深圳淘宝大学培训 编辑:程序博客网 时间:2024/05/20 06:08
  1. 查找节点

    通过ID查找DOM节点:getElementById
    通过class属性查找:getElementsByClassName
    通过标签名查找:getElementsByTagNames
    通过指定名称查找:getElementsByName
    匹配选择器,只返回匹配的第一个元素:querySelector()
    匹配选择器,返回匹配的所有元素:querySelectorAll()
    获取页面中的HTML标签:document.documentElement
    获取页面中的BODY标签:document.body
    获取页面中的所有元素节点的对象集合型:document.all[”]

  2. 新建节点

    创建新的元素节点:createElement()
    创建新的属性节点:createAttribute()
    创建新的文本节点:createTextNode()
    创建新的注释节点:createComment()
    创建文档片段节点:createDocumentFrament()

  3. 增加节点

    向父元素的最后一个子节点追加新节点 appendChild()
    向父节点的某个特定子节点之前插入新节点 insertBefore()
    给元素增加属性节点和设置值 setAttribute()

  4. 删除节点

    删除已有的子节点,返回值为删除节点 parentNode.removeChild( existingChild );
    删除具有指定属性名称的属性,无返回值 element.removeAttribute(‘属性名’);
    删除指定属性,返回值为删除的属性 element.removeAttributeNode( attrNode );

  5. 修改节点

    用新节点替换父节点中已有的子节点 parentNode.replaceChild( newChild, existingChild );
    若原元素已有该节点,此操作能达到修改该属性值的目的 element.setAttributeNode( attributeName );
    若原元素已有该节点,此操作能达到修改该属性值的目的 element.setAttribute( attributeName, attributeValue );