[JavaScript] DOM操作事件

李桥桉

已于 2023-04-19 20:47:51 修改

阅读量420

点赞数

分类专栏：前端文章标签： javascript 前端 html

于 2023-04-01 22:36:10 首次发布

本文链接：https://blog.csdn.net/wodegecsdn/article/details/129898875

版权

DOM操作

JavaScript组成

ECMAScript：javascript核心
DOM：文档操作
BOM：浏览器对象

DOM

概念：

文档对象模型，网页解析过程中，会将所有标签整合起来看成一个document对象。这个对象里面包含各种操作元素的api。

DOM树

注意：每个html标签就是一个节点，其中属性和文本都是一个节点

元素节点
属性节点
文本节点

DOM 基本操作

获取节点

document.getElementById()

通过id获取元素

<body>
    <div id="app"></div>
</body>
<script>

    var odiv = document.getElementById('app')
    console.log(odiv); //一个元素

</script>

运行结果

document.getElementByClassName()

通过class名获取元素（获取的一组类数组）

<body>
    <div id="app"></div>
    <p class="p">这是p标签</p>
    <p class="p">这是p标签</p>
    <p class="p">这是p标签</p>
    <p class="p">这是p标签</p>
    <p class="p">这是p标签</p>
</body>
<script>

    var odiv = document.getElementById('app')
    console.log(odiv); //一个元素

    var op = document.getElementsByClassName('p')
    console.log(op); //获取一组节点 是类数组    

</script>

document.getElementByTagName()

通过标签名获取元素（获取的一组类数组）

<body>

    <span>span1</span>
    <span>span2</span>
    <span>span3</span>
</body>
<script>
 
    var span_new = document.getElementsByTagName('span')
    console.log(span_new);

</script>