一篇文章搞定JavaScript Dom操作

最新推荐文章于 2024-05-12 17:09:30 发布

MCM Code

最新推荐文章于 2024-05-12 17:09:30 发布

阅读量929

点赞数 30

文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/mcm0115/article/details/136783846

版权

本文详细介绍了JavaScript中DOM操作的核心概念，包括通过id、标签、name、类名获取元素，querySelector和querySelectorAll的选择器功能，以及如何使用document对象的属性、创建新元素和添加事件监听。

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

1. Dom介绍

文档对象模型，通常被称为DOM，是使网站交互的一个重要部分，它是一个接口，允许JavaScript处理网站的内容、结构和样式
示例

<html>
  <head>
  <title>Example</title>
  </head>  
  <h1>Example Page</h1>
  <p>This is an example page</p>
  </html>

以上代码的Dom表示如下
在这里插入图片描述

2. 获取元素

id获取元素

document.getElementsById(‘id’)

是由document对象提供的用于查找元素的方法，该方法返回的是拥有指定id的元素，如果没有找到指定id的元素则返回null，如果存在多个指定id的元素则返回undefined

<div id="box">你好</div>
<script>
   var a = document.getElementById('box');
   console.log(a);
   // 结果为：<div id="box">你好</div>
</script>

标签获取元素

document.getElementsByTagName(‘标签名’)
由于相同标签名的元素可能有多个，上述方法返回的不是单个元素对象，而是一个集合。这个集合是一个类数组对象，或称为伪数组，它可以像数组一样用索引来访问元素，但不能使用push()等方法，使用Array.isArray()也可以证明它不是一个数组。
getElementsByTagName()方法获取到的集合是动态集合，也就是说，当页面增加了标签，这个集合中也会自动增加元素。

name获取元素

document.getElementsByName(‘name名’)
案例需求：在复选框中选择最喜欢的水果（多选）。

<body>
  <p>请选择你最喜欢的水果（多选）</p>
  <label><input type="checkbox" name="fruit" value="苹果">苹果</label>
  <label><input type="checkbox" name="fruit" value="香蕉">香蕉</label>
  <label><input type="checkbox" name="fruit" value="西瓜">西瓜</label>
  <script>
    var fruits = document.getElementsByName('fruit'); // 返回对象集合
    fruits[0].checked = true; // 将fruits中的第1个元素的checked属性值设置为true
  </script>
</body>

类名获取

document.getElementsByClassName()方法，用于通过类名来获得某些元素集合。

<body>
  <span class="one">英语</span> <span class="two">数学</span>
  <span class="one">语文</span> <span class="two">物理</span>
  <script>
    var Ospan1 = document.getElementsByClassName('one');
    var Ospan2 = document.getElementsByClassName('two');
    Ospan1[0].style.fontWeight = 'bold';
    Ospan2[1].style.background = 'red';
  </script>
</body>

querySelector()和querySelectorAll()

querySelector()方法用于返回指定选择器的第一个元素对象。
querySelectorAll()方法返回指定选择器的所有元素对象集合。

<body>
  <div class="box">盒子1</div>
  <div class="box">盒子2</div>
  <div id="nav">
    <ul>
      <li>首页</li>
      <li>产品</li>
    </ul>
  </div>
</body>
<script>
    var firstBox = document.querySelector('.box'); 
    console.log(firstBox); // 获取class为box的第1个div
    var nav = document.querySelector('#nav');
    console.log(nav);        // 获取id为nav的第1个div 
    var li = document.querySelector('li');
    console.log(li);            // 获取匹配到的第一个li
    var allBox = document.querySelectorAll('.box');
    console.log(allBox);    // 获取class为box的所有div
    var lis = document.querySelectorAll('li');
    console.log(lis);          // 获取匹配到的所有li
</script>

获取子节点

const  container = document.querySelector("#container");
//返回集合
container.children

3 .document对象的属性

innerHTML的属性设置或返回元素的HTML内容。

返回innerHTML属性：element.innerHTML
设置innerHTML属性：element.innerHTML=text

document.getElementById("para").innerHTML="Hello World"

4. 创建元素

使用document.createElement()方法可以创建元素

<div id="container"> </div>
<script>
//创建<p>元素
const p=document.createElement("p");
//追加子节点，文本
p.append("hello world");
//选择#container div
const container = document.querySelector("#container")
//添加p元素到#container div
container.append(p);
//修改p文字为红色
p.style="color:Red;padding:20px;";

5. 添加事件

使用addEventListener(eventName,listener)

eventName: string，事件名
listener: function, 事件监听

事件名

click：鼠标/屏幕点击
mouseenter/mouseleave：鼠标进入/移出元素区域
drag/dragstart/dragend：元素被拖拽/拖拽开始/拖拽结束
input：< input >、< select >、< textarea >内容改变
focus/blur：获取/失去焦点
keydown/keyup：键盘按下/松开
play/pause：媒体（视频、音频）播放/暂停

示例：给一个按钮添加点击事件，弹出一个“hello world”的弹窗

//选择按钮元素
const btn=document.quaryselector("#btn");

//创建事件监听函数
const btnClick=function(event){
 console.log(btn === event.target);
 alart("hello world!");
}

//给按钮添加点击事件
btn.addEventListener("click",btnClick);