DOM预习

最新推荐文章于 2024-08-25 09:57:22 发布

芒果软糖_

最新推荐文章于 2024-08-25 09:57:22 发布

阅读量103

点赞数

文章标签： javascript 前端 html

本文链接：https://blog.csdn.net/m0_73908308/article/details/130398461

版权

DOM(Document Object Model) 是一种文档对象模型，同时也是用于html编程的接口，通过DOM来操作页面中的元素。当html页面被实现加载的时候，浏览器会创建一个DOM，给文档提供了一种新的逻辑结构，并且可以改变内容和结构。

DOM中的元素以树状结构表示层级关系，所有又叫DOM树，每个元素都是DOM树的节点。

W3C DOM标准被分为3个不同的部分：

使用DOM提供的属性和方法可以通过编写JS代码来实现页面动态的功能

常见DOM类型：

选择元素：
<div id="www"></div>
document.querySelector("#www")

创建元素：
<div></div>
document.creatElement("div")

const divs=document.querySelectorAll("div")

const btn = document.querySelector("#btn")

方式：
1.根据ID获取
2.根据标签名获取
3.通过HTML5新增的方法获取
4.特殊元素获取

根据ID获取

<body>
    <div id="www">ok</div>
    <script>
        var aaa = document.getElementById('www');
        console.log(aaa);
    </script>
</body>

根据标签名获取

<body>
	<ul >
        <li>1</li>
    </ul>
	<script >
            var aLi=document.getElementsByTagName('li');
    </script>
</body>

通过HTML5新增的方法获取

特殊元素获取

获取body

<body>
	<script>
	var a=document.body;
	</script>
</body>

获取HTML元素

<body>
	<script>
	var a=document.documentElement;
	</script>
</body>

事件概述
JavaScript 使我们有能力创建动态页面，而事件基础是可以被JavaScript侦测到的行为。

简单理解：触发—响应机制

操作元素
JavaScript的 DOM 操作可以改变网页内容、结构和样式，我们可以利用 DOM 操作元素来改变元素里面的内容、属性等。

改变元素内容有两种方式：
element.innerText和element.innerHTML

interText 和 innerHTML的区别

关注