Web前端开发笔记37——DOM元素获取

最新推荐文章于 2025-06-01 21:17:58 发布

原创最新推荐文章于 2025-06-01 21:17:58 发布 · 198 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#dom操作

#Web前端开发入门专栏收录该内容

57 篇文章

订阅专栏

本文介绍了文档对象模型（DOM）的基本概念及应用，包括如何通过不同方式获取页面元素，并演示了具体的示例代码。此外还介绍了如何利用DOM接口改变网页的内容、结构和样式。

1.文档对象模型（DOM），是W3C组织推荐的处理可扩展标记语言的标准编程接口。

通过DOM接口，就可以改变网页的内容、结构和样式了。

2.获取ID的方法：

document.getElementById('testplace');

注意：这里我们在写script代码时要写在div之后，才能运行。不过后面我们可以修改它，让其运行在各个地方。

示例：

<div id="testplace" class="divtest">这是一个普通的文字块！</div>
<script>
    document.getElementById('testplace').innerText = "I changed the Text!";
</script>

效果如下：

上面的代码，以改变内部文字举个例子。

3.我们通过console.dir('对象')来详细的查看对象下面的属性和方法。

4.通过标签名获取：

document.getElementsByTagName('div');

这样可以获取对象的集合。

var div1tag=document.getElementsByTagName('div');
    console.dir(div1tag);
    for (var i = 0; i < div1tag.length; i++) {
        console.log(div1tag[i]);
    }

如果我想要某一元素下的某些元素，该使用什么呢？

同样的我们可以将document换成某一元素对象，示例：

<div id="testplace" class="divtest">这是一个普通的文字块！</div>
<div id="testplace1" class="divtest" style="top: 80%">这是一个普通的文字块2！</div>
<div id="divin">
    <div>newplace</div>
</div>



var divin=document.getElementById('divin');
    console.log(divin.getElementsByTagName('div'));

5.H5新增的方法获取：