JavaScript DOM 操作

Traveler.png

已于 2022-11-05 22:12:37 修改

阅读量257

点赞数

文章标签： javascript 前端 html

于 2022-11-05 22:06:23 首次发布

本文链接：https://blog.csdn.net/weixin_74448257/article/details/127709866

版权

DOM

HTML DOM
获取文档元素
事件
操作元素
- 操作元素的内容
- 操作元素的属性
节点操作
事件监听
- 删除事件
事件流
事件对象
事件委托

HTML DOM

当网页被加载时，浏览器会创建页面的DOM(文档对象模型)，

该模型将页面中的标签，全部转换为对象，使JavaScript可以借此对标签的属性、样式以及内容进行修改

DOM模型可以结构为对象树的形式：
在这里插入图片描述

对下文中用到的名词简单解释一下：

文档：一个页面就是一个文档，DOM中使用document表示

元素：页面中的所有标签都是元素，用element表示

节点：页面中的所有内容都是节点（标签，属性，文本，注释等），用node表示

获取文档元素

通过ID值获取元素
1. doucment.getElementById(“id值”)
根据标签名获取元素
1. document.getElementByTagName(“标签名”)
通过css选择器获取元素
1. document.querySelector(“选择器”) 获取一个元素
  
  doucment.querySelectorAll(“选择器”) 获取组元素

<body>
  <button id="but">button按钮</button>
  <input class="but" type="button" value="Input按钮">
  <ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
  </ul>
    <script>
        let ele1 = document.getElementById("but");
        //输出返回的结果，发现是以完整的html标签的形式返回
        console.log(ele1); //=><button id="but">button按钮</button>
        //而它的真实类型实际是一个对象
        console.log(typeof ele1); //=>object
        console.dir(ele1) //console.dir可以输出一个对象的属性和方法

        let ele2 = document.getElementsByTagName("li");
        //通过标签名获取元素 会将所有符合条件的存放到一个类似数组中
        console.log(ele2); //=>HTMLCollection(4)

        let ele3 = document.querySelector("ul");
        console.log(ele3);//=> <ul>...</ul>
        let ele4 = document.querySelectorAll("li");
        //获取多个元素同样会存放到类似数组的结构中
        console.log(ele4);//=>NodeList(4)
    </script>
</body>

获取HTML元素和Body元素较为特殊

document.body 属性返回body元素对象
document.documentElement 返回html元素对象

let body = document.body;
console.dir(body);
let html = document.documentElement;
console.dir(html);

事件

JavaScript的职责就是让页面可以进行交互，而交互就是由事件完成的

事件由三部分组成：事件源、事件类型、事件处理程序

事件源：由谁触发事件

事件类型：触发什么类型的事件即怎样触发事件

事件处理程序：触发事件后该做什么

<body>
    <button id="but">button按钮</button>
  <script>
    let but = document.querySelector("#but");
    //事件源 but对象
    //事件类型 onclick点击事件
    //事件处理函数 function
    but.onclick = function () {
      alert("点击了button按钮") };
  </script>
</body>

操作元素

操作元素的内容

element.innerText 获取和修改元素的内容
element.innerHTML 获取和修改元素的内容，且可以识别HTML标签

<body>
  <button id="but">button按钮</button>
  <input class="but" type="button" value="Input按钮">
  <div style="background-color: pink;width: 200px;height: 200px;"></div>
  <script>
    let but = document.querySelector("#but");
    let div = document.querySelector("div")