[JavaScript] DOM知识点汇总

最新推荐文章于 2022-10-20 23:21:37 发布

天才小熊猫一号

最新推荐文章于 2022-10-20 23:21:37 发布

阅读量1k

点赞数 2

分类专栏： javascript 笔记文章标签： javascript html css

本文链接：https://blog.csdn.net/weixin_46076151/article/details/114905783

版权

这篇博客详细介绍了DOM的基本概念，包括DOM树、元素获取、事件基础、元素操作和节点操作。重点讲解了通过getElementById、getElementsByTagName等方法获取元素，以及如何改变元素内容、属性和样式。此外，还涉及事件的执行步骤、常见鼠标事件以及节点的创建、添加、删除和复制。

摘要由CSDN通过智能技术生成

一、DOM简介

文档对象模型（Document Object Module 简称DOM），是处理可扩展标记语言（HTML/XML）的接口，主要是用来处理网页的，通过DOM接口对浏览器的元素进行操作来改变网页的内容，结构和样式。

（学习接口时要像学习内置对象一样，要知道接口是什么，有没有参数，参数有什么要求，返回值是什么）

1.1DOM树

DOM树

文档：在DOM中可以把浏览器的页面看作是一个文档，在DOM中用document来表示。一个页面就是一个文档。
元素：网页中所有的标签都是一个元素，在DOM中用element来表示。
节点：网页中的所有内容都是一个节点（标签，属性，文本，注释），在DOM中用node来表示。
DOM把以上内容都看作是对象

DOM把DOM树里面的内容都看作是对象，对象有自己的属性和方法，所以DOM叫文档对象模型，DOM是按照树形结构展现给我们的。

二、获取元素

1.根据ID获取

getElementById()获取带有ID的元素对象。

<body>
<div id="time">2021-3-17<div>
<script>
var time=document.getElementById('time');
console.log(time);
</script>
</body>

2.2根据标签名获取

通过getElementByTagName()获取指定标签的元素对象的集合,以伪数组的形式进行存储。

<body>
<ul>
<li>种太阳</li>
<li>种太阳</li>
<li>种太阳</li>
<li>种太阳</li>
</ul>

<script>
var li=document.getElementById('li');
     console.log(li);
我们想要依次打印里面的元素对象，我们可以遍历伪数组
for(i=0;i<li.length;i++){
   
     console.log(li[i]);
}
</script>
</body>

还可以获取某个父元素里面的所有指定标签名的子元素
element.getElementByTagName();
注意：父元素必须是单个对象（必须指明获取哪一个元素对象），获取的时候不包括父元素自己）

<body>
<ul>
<li>种太阳</li>
<li>种太阳</li>
<li>种太阳</li>
<li>种太阳</li>
</ul>
<ol id="ol">
<li>啦啦啦</li>
<li>啦啦啦</li>
</ol>

<script>
 var ol=document.getElementById('ol');
 var li= ol.getElementByTagName('li');
   console.log(li);
<script>
</body>

2.3HTML5新增获取方法

querySelector(),返回指定元素对象中的第一个元素对象。
querySelectorAll(),返回所有指定元素对象，以伪数组进行存储。
**document.getElementByClassName()**通过类名获取元素对象

<body>
<ul id="ul">
<li>种太阳</li>
<li>种太阳</li>
<li>种太阳</li

最低0.47元/天解锁文章