DOM(document object model)

本文详细介绍了如何使用各种DOM方法选择、遍历、增加、插入、删除和替换网页元素,包括实时和非实时的选择方法,以及节点树的遍历技巧。

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

1.选择元素(标签)的方法

1、document.getElementById(),通过id选择元素,又因为id仅可以标识唯一的元素所以选出来的元素是唯一的

2、document.getElementsByTagName(),通过标签名选择元素,是一个伪数组

3、document.getElementsByClassName(),通过类名选择。是一个伪数组

4、document.getElementsByName(),通过标签的name属性来选择,一般只有少数的元素起作用(input,iframe img类似有数据交互)

以上四个都是实时的,下面两个则是非实时的(静态的)

5、css选择器:document.querySelector(div>span strong)选出一个元素,类似css的写法,比如这里选出div下面span标签的strong

6/document.getquerySelectorAll()选一组元素

2遍历节点树

节点类型:                                                        nodeType对应的值

在这里插入图片描述

一、查询方法

1、遍历节点
parentNode(),返回该节点的父级节点,最顶端的parentNode为#document

childNodes(),返回本节点的直接子级节点们

firstChild(),返回该节点的第一个子节点
lastChild(),返回该节点的最后一个节点

nextSilbling() ,返回该节点的下一个兄弟节点
previousSibling() ,返回该节点的前一个兄弟节点

二、遍历元素的节点
1、parentElement(),返回该元素的父级元素
2、children(),返回该元素的子级元素们(除了该方法其他IE不好使)
3、childElementCount(),求该元素的子级元素的个数
4、fristChildElement(),第一个子级元素
5、lastChildElement(),最后一个子级元素
6、nextElementSibling()该元素的下一个兄弟元素
7、previousElementSibling()该元素的前一个兄弟元素

二、增加节点

1、createElement(string)创建元素节点
2、createTextNode(string)创建文本节点
3、createComment(string)创建注释节点

三、插入节点

1、appendChild()任何元素节点都有该方法类似push(),如果将已经存在页面的东西插入就会变成剪切
2、insertBefore(a,b)insert a before b

四、删除

1、parent.removeChild()父级删除字迹元素(他杀)
2、child.remove()子级子级删除(自杀)

五、替换

reaplaceChild(new,origin),以新new换旧origin

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值