第十讲_JavaScript文档对象模型DOM(一)

JavaScript文档对象模型DOM(一)

  • 1. 元素操作
    • 1.1 获取 DOM 元素
    • 1.2 操作 DOM 元素
    • 1.3 节点关系
    • 1.4 添加节点
    • 1.5 克隆节点
    • 1.6 删除节点

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 = '

我是一个含标签的文本

'; script> html>

DOM 元素的常用属性:srctitlehref

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-xxxdata-是自定义属性的前缀,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>

你可能感兴趣的:(JavaScript,javascript,开发语言)