第十讲_JavaScript文档对象模型DOM（一）

最新推荐文章于 2024-07-18 10:24:18 发布

文大奇Quiin

最新推荐文章于 2024-07-18 10:24:18 发布

阅读量657

点赞数 22

分类专栏： JavaScript 文章标签： javascript 开发语言

本文链接：https://blog.csdn.net/wenqi1992/article/details/135995774

版权

JavaScript 专栏收录该内容

12 篇文章 1 订阅

订阅专栏

JavaScript文档对象模型DOM（一）

1. 元素操作

1. 元素操作

1.1 获取 DOM 元素


// 通过css选择器匹配第一个满足条件的元素，返回一个HTMLElement对象
document.querySelector('css选择器')

// 通过css选择器匹配所有满足条件的元素，返回一个 NodeList
document.querySelectorAll('css选择器')

css选择器类型：

通用选择器
元素选择器
类选择器
id选择器
交集选择器
并集选择器
子代选择器
后代选择器
兄弟选择器
属性选择器
伪类选择器
伪元素选择器

详细了解css选择器可以阅读另一篇博文：css选择器详细介绍

1.2 操作 DOM 元素

innerText 属性：设置文本内容，显示纯文本，不解析标签。

<html>
  <div class="outer"></div>

  <script>
    const div = document.querySelector('div');
    div.innerText = '我是一个纯文本';
  </script>
</html>

innerHTML 属性：设置文本内容，解析标签。

<html>
  <div class="outer"></div>

  <script>
    const div = document.querySelector('div')
    div.innerHTML = '<h1>我是一个含标签的文本<h1>';
  </script>
</html>

DOM 元素的常用属性：src、title、href 等

style属性：修改元素样式

<html>
  <div class="outer"></div>

  <script>
    const div = document.querySelector('div')
    div.style.width = '100px';
    div.style.height = '100px';
    div.style.backgroundColor = "#000000";
  </script>
</html>

className属性：给元素设置一个类名

<html>
  <style>
    .box {
      height: 100px;
      width: 100px;
      background-color: red;
    }
  </style>

  <div class="outer"></div>

  <script>
    const div = document.querySelector('div')
    // 在css用类选择器box定义好样式
    div.className = 'box';
  </script>
</html>

classList属性：给元素设置一个或多个类名

<html>
  <style>
    .box1 {
      height: 100px;
      width: 100px;
      background-color: red;
    }

    .box2 {
      height: 100px;
      width: 100px;
      background-color: blue;
    }
  </style>

  <div class="outer"></div>

  <script>
    const div = document.querySelector('div')
    // 在css中定义类选择器box1和box2样式
    // 添加box1类名
    div.classList.add('box1');
    
    // 移除box1类名
    div.classList.remove('box1');
    
    // 切换类名（有这个类名就移除，没有就添加）
    div.classList.toggle('box2');
  </script>
</html>

自定义属性，属性名格式：data-xxx，data-是自定义属性的前缀，xxx是自定义属性名。获取自定义属性值dataset.xxx

<html>
  // 自定义属性名以data-开头
  <div class="outer" data-name="我是div"></div>

  <script>
    const div = document.querySelector('div')
    // 获取自定义属性名的值：dataset.属性名
    div.innerHTML = div.dataset.name;
  </script>
</html>

1.3 节点关系

const div = document.querySelector('div');
// 查找div的父节点
const parent = div.parentNode;

// 查找div的上一个兄弟
const previousSibling = div.previousElementSibling;

// 查找div的下一个兄弟
const nextSibling = div.nextElementSibling;

// 查找div的所有子
const children = div.children;

1.4 添加节点

const div = document.querySelector('div');
// 创建一个节点
const newDiv = document.createElement('div')

// 给新节点设置内容
newDiv.innerHTML = '内容';

// 添加新节点到div下
div.appendChild(newDiv);

1.5 克隆节点

<html>

  <div class="parent">
    <div class="child">
      子节点<div>孙节点</div>
    </div>
  </div>

  <script>
    const parent = document.querySelector('div');
    
    const child = document.querySelector('.child');

    // 克隆节点，true克隆下面的子节点，false只克隆当前节点不包含子节点
    const newNode = child.cloneNode(true)

    // 添加节点
    parent.appendChild(newNode);
  </script>
</html>

1.6 删除节点

<html>

  <div class="parent">
    <div class="child1">第一个子节点</div>
    <div class="child2">第二个子节点</div>
  </div>

  <script>
    const parent = document.querySelector('div');
    
    const child2 = document.querySelector('.child2');

    // 删除指定节点
    parent.removeChild(child2);
  </script>
</html>