DOM 常用方法

本文详细介绍了DOM中各种节点类型及其属性,如Element、Text、Document等,并提供了常用DOM操作方法的说明,包括createAttribute、createComment、getElementById等,帮助读者深入理解DOM结构与操作。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

 

接口

nodeType常量

nodeType值

备注

Element

Node.ELEMENT_NODE

1

元素节点

Text

Node.TEXT_NODE

3

文本节点

Document

Node.DOCUMENT_NODE

9

document

Comment

Node.COMMENT_NODE

8

注释的文本

DocumentFragment

Node.DOCUMENT_FRAGMENT_NODE

11

document片断

Attr

Node.ATTRIBUTE_NODE

2

节点属性

 

 

方法

描述

createAttribute()

用指定的名字创建新的Attr节点。

createComment()

用指定的字符串创建新的Comment节点。

createElement()

用指定的标记名创建新的Element节点。

createTextNode()

用指定的文本创建新的TextNode节点。

getElementById()

返回文档中具有指定id属性的Element节点。

getElementsByTagName()

返回文档中具有指定标记名的所有Element节点。

 

 

属性

描述

attributes

如果该节点是一个Element,则以NamedNodeMap形式返回该元素的属性。

childNodes

以Node[]的形式存放当前节点的子节点。如果没有子节点,则返回空数组。

firstChild

以Node的形式返回当前节点的第一个子节点。如果没有子节点,则为null。

lastChild

以Node的形式返回当前节点的最后一个子节点。如果没有子节点,则为null。

nextSibling

以Node的形式返回当前节点的兄弟下一个节点。如果没有这样的节点,则返回null。下一个兄弟节点

nodeName

节点的名字,Element节点则代表Element的标记名称。

nodeType

代表节点的类型。

parentNode

以Node的形式返回当前节点的父节点。如果没有父节点,则为null。

previousSibling

以Node的形式返回紧挨当前节点、位于它之前的兄弟节点。如果没有这样的节点,则返回null。上一个兄弟节点

 

 

方法

描述

appendChild()

通过把一个节点增加到当前节点的childNodes[]组,给文档树增加节点。

cloneNode()

复制当前节点,或者复制当前节点以及它的所有子孙节点。

hasChildNodes()

如果当前节点拥有子节点,则将返回true。

insertBefore()

给文档树插入一个节点,位置在当前节点的指定子节点之前。如果该节点已经存在,则删除之再插入到它的位置。

removeChild()

从文档树中删除并返回指定的子节点。

replaceChild()

从文档树中删除并返回指定的子节点,用另一个节点替换它。

转载于:https://www.cnblogs.com/schumi-lds/archive/2013/03/27/2984714.html

以下是HTML DOM常用的一些方法: 1.ById(id):通过元素的id属性获取元素。 2. getElementsByTagName(tagName):通过元素的标签名获取元素集合。 3. getElementsByClassName(className):通过元素的类名获取元素集合。 4. querySelector(selector):通过CSS选择器获取匹配的第一个元素。 5. querySelectorAll(selector):通过CSS选择器获取所有匹配的元素。 6. createElement(tagName):创建一个新的元素节点。 7. createTextNode(text):创建一个包含指定文本内容的文本节点。 8. appendChild(node):将一个节点添加为另一个节点的子节点。 9. removeChild(node):从父节点中移除指定的子节点。 10. replaceChild(newNode, oldNode):用一个新节点替换父节点中的指定子节点。 11. cloneNode(deep):克隆一个节点。 12. parentNode:获取当前节点的父节点。 13. childNodes:获取当前节点的所有子节点集合。 14. firstChild:获取当前节点的第一个子节点。 15. lastChild:获取当前节点的最后一个子节点。 16. nextSibling:获取当前节点的下一个兄弟节点。 17. previousSibling:获取当前节点的上一个兄弟节点。 18. innerHTML:获取或设置当前元素的HTML内容。 19. value:获取或设置表单元素的值。 20. style:获取或设置元素的样式属性。 这只是一小部分常用方法,HTML DOM还有很多其他方法和属性可供使用。可以根据具体需求查阅相关文档或参考教程来了解更多方法和属性。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值