DOM的基本概念

本文详细介绍了文档对象模型(DOM)的基本概念及其操作方法,包括通过ID、类名、标签名等获取节点的方式,以及如何创建、添加、删除和替换节点。同时,还提供了获取和设置属性的方法。

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

文档对象模型(Document Object Model,简称DOM)


获取节点

getElementById                                    由id来进行获取

语法:node.getElementById("id"); 

getElementsByClassName                    由class获取 

语法:node. getElementsByClassName("class");(如有多个,按类数组排序,起始为0)

getElementsByTagName                       由标签名获取

语法:node. getElementsByTagName(“h1 ");(如有多个,按类数组排序,起始为0)

getElementsByName                             由name获取

语法:node. getElementsByName(“name1 ");(如有多个,按类数组排序,起始为0)

查看节点类型

语法:nodeObject.[nodeType][nodeName ][nodeValue ] 

nodeType 返回以数字值返回指定节点的节点类型。如果节点是元素节点,则返回 1。如果节点是属性节点,则返回 2。

nodeName 返回节点名称(大写的标签名)

nodeValue 文本节点返回文本内容,其他节点返回null

DOM属性获取与设置

获取方法: 

element[attributename]  

element . attributename

getAttribute( attributename )    
设置属性:     
setAttribute( attributename, attributevalue )
删除属性:     

removeAttribute( attributename )

常用属性:

className                              类名

offsetWidth                             宽

offsetHeight                            高

offsetLeft offsetTop                获取距离第一个定位父节点左上角的距离

操作子节点

创建节点 

createElement( )

子节点的增删改

appendChild 在DOM子集最后添加子节点

insertBefore 在指定的已有子节点之前插入新的子节点

removeChild 删除一个节点

replaceChild 替换节点
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值