DOM基础：事件、获取元素、操作元素

最新推荐文章于 2024-02-28 16:07:09 发布

VIP文章 Rain_xyy

最新推荐文章于 2024-02-28 16:07:09 发布

阅读量1.6k

点赞数

文章标签：前端 javascript html

本文链接：https://blog.csdn.net/m0_63669414/article/details/126334837

版权

JS的组成

Web APIs是JS的应用，大量使用JS基础语法做交互效果。

API和Web API

API:(Application Programming Interface，应用程序编程接口）；
Web API：浏览器提供的一套操作浏览器功能和页面元素的API（BOM,DOM）,主要针对浏览器做交互效果。

DOM简介

DOM:文档对象模型（Document Object Model），是W3C推荐的处理HTML或XML的标准编程接口。通过这些DOM接口可以改变网页的内容、结构和样式。

DOM树

文档：一个页面就是一个文档，在DOM中用document表示；
元素：页面中所有标签都是元素，在DOM中用element表示；
节点：页面中所有内容都是节点，在DOM中用node表示；

在DOM中，以上内容都看做对象

在DOM中获取元素

根据id获取元素

利用document.getElementById(id)来根据id获取相应的元素。

参数id是不忽略大小写的字符串；
返回一个元素对象；

<body>
    <div id = 'time'>2022-8-13</div>
    //文档在加载时从上往下加载，要先有标签，script写到标签下
    <script>
     var timer = document.getElementById('time');
     // 结果<div id = 'time'>2022-8-13</div>
     console.log(timer);
     // object
     console.log(typeof timer);
     //console.dir 打印返回的元素对象，更详细地查看里面的属性和方法
     // div#time
     console.dir(timer);
 </script>
</body>

根据标签名获取

利用getElementByTagName()

返回带有指定标签名的对象的集合，以伪数组的形式存储；
如果页面中的只有一个相应标签，仍然以伪数组的形式返回；
如果页面中没有相应标签，仍然以空的伪数组的形式返回；
不仅有document.getElementByTagName(),还有element.getElementByTagName(),但是父元素element必须是单个元素，不能是伪数组形式；

<body>
    <ul id = 'ul'>
        <li>你好我好大家好</li>
        <li>你好我好大家好</li>
        <li>你好我

最低0.47元/天解锁文章

Rain_xyy

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
DOM基础：事件、获取元素、操作元素

DOM:文档对象模型（Document Object Model），是W3C推荐的处理HTML或XML的标准编程接口。通过这些DOM接口可以改变网页的内容、结构和样式。自定义属性目的：为了保存并使用数据，有些数据可以保存到页面而不用保存到数据库中。...
复制链接

扫一扫