DOM常用操作

xiaoxiao2021-02-28  64

查找节点

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

新建节点

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

增加节点

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

删除节点

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

修改节点

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

转载请注明原文地址: https://www.6miu.com/read-84536.html

最新回复(0)