JS系列：DOM树和在js当中获取DOM元素的方法

最新推荐文章于 2023-04-10 21:05:46 发布

VIP文章公子清

最新推荐文章于 2023-04-10 21:05:46 发布

阅读量1.3k

点赞数

分类专栏： js系列

本文链接：https://blog.csdn.net/Josiah_Yuan/article/details/103567398

版权

DOM树

dom tree
当浏览器加载html页面时候，首先计算DOM结构，DOM结构就是DOM树。也就是（把页面中html标签像树桩结构一样，分析层级关系）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>tab选项卡</title>
</head>
<body>
    <div class="box" id="box">
        <ul>
            <li class="item1 item2">新闻</li>
            <li class="item1">音乐</li>
            <li class="item2">电影</li>
        </ul>
        <div>金三胖访华</div>
        <div>需要你陪</div>
        <div>复仇者联盟</div>
    </div>
 
</body>
</html>

DOM树描述了标签和标签之间的关系（节点关系），只要知道一个标签，就可以一次根据DOM中提供的属性和方法，获取任意一个标签和节点
DOM树层次关系:

在js当中获取DOM元素的方法

getElementById

通过元素的id获取指定的元素对象，使用的时候都是document.getElementById('')’此处的document是限制了获取元素的范围，我们把它称为上下文（context）

document.getElementById的上下文只能是document
严格意义上，id不能重复
如果id重复了，我们基于这个方法只能获取第一个元素，后面相同的元素无法获取
在ie6-7浏览器当中会把表单元素，（input）的name属性值会当做id来使用，不要让name和id冲突

getElementsByTagName

[context].getElementsByTagName() 在指定上下文中，根据标签名获取到一组元素集合（HTMLCollection）
1.获取元素集合是一个类数组（不能直接的使用数组中的方法）

   var oBox=document.getElementById('box'),
       divList=<

最低0.47元/天解锁文章

公子清

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
JS系列：DOM树和在js当中获取DOM元素的方法

DOM树dom tree当浏览器加载html页面时候，首先计算DOM结构，DOM结构就是DOM树。也就是（把页面中html标签像树桩结构一样，分析层级关系）<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>tab选项卡&lt...
复制链接

扫一扫