DOM的一些操作流程

DOM操作系列目录

提示：这里可以添加系列文章的所有文章的目录，目录需要自己手动添加
例如：第一章 Python 机器学习入门之pandas的使用

---

提示：写完文章后，目录可以自动生成，如何生成可参考右边的帮助文档

---

前言

提示：这里可以添加本文要记录的大概内容：

介绍DOM的一些操作流程

---

提示：以下是本篇文章正文内容，下面案例可供参考

一、DOM是什么？

1 文档对象模型

DOM（Document Object Model）： 文档对象模型

DOM描绘了一个层次化的节点树，即HTML文档中的所有内容都是节点(node)。

DOM树中的所有节点均可通过JS进行访问，允许开发人员添加、移除、修改和查询页面的某一部分。

W3C规定的三类DOM标准接口
1、Core DOM（核心DOM），适用于各种结构化文档
2、XML DOM（Java OOP），专用于XML文档
3、HTML DOM，专用于HTML文档

DOM模型的节点：文档可以说是由节点构成的集合。在DOM模型中有以下3种常用节点：
1、元素节点：各种标签就是这些元素节点的名称，例如

、

等
2、文本节点：文本节点总是被包含在元素节点里面的内容，就是开始标签到结束标签之间各种内容

3、属性节点：一般用来修饰元素节点就称之为属性节点，就是标签中的属性

2.我们可以操作什么？

其实就是操作 html 中的标签的一些能力

我们可以操作哪些内容

获取一个元素

移除一个元素

创建一个元素

向页面里面添加一个元素

给元素绑定一些事件

获取元素的属性

给元素添加一些 css 样式

…

DOM 的核心对象就是 document对象

document 对象是浏览器内置的一个对象，里面存储着专门用来操作元素的各种方法

DOM： 页面中的标签，我们通过 js 获取到以后，就把这个对象叫做 DOM 对象
是DOM中的核心对象，里面的方法专门用来操作节点的动态获取内容

二、使用步骤

1.获取标签的方式

1. 通过标签id名 - document.getElementById(‘id名’)

代码如下（示例）：

  <button id="btn">按钮</button>
  var btn = document.getElementById('var')
    console.log(btn);

2. 通过类名 - document.getElementsByClassName(‘类名’) 获取到的是所有类名是指定的类名的标签组成的一个集合

   <div class="box">盒子2</div>
    <div class="box">盒子3</div>
   var box = document.getElementsByClassName('box')
    console.log(box);
    console.log(box[0]);
    获取到的集合 - 伪数组， 不是数组， 但是可以像数组一样取下标， 有长度， 可以遍历 - 但是不能使用数组的方法
    box.push(111) // 报错

3. 通过标签名 - document.getElementsByTagName(‘标签名’) - 获取到的是伪数组集合

  <div class="box">盒子2</div>
    <div class="box">盒子3</div>
  var divs = document.getElementsByTagName('div')
    console.log(divs);

4. 通过name属性来获取标签 - document.getElementsByName(‘name属性的值’)

  <input type="text" name="username">
    <input type="radio" name="sex">男
    <input type="radio" name="sex">女
var username = document.getElementsByName('username')
    console.log(username);

    var sexes = document.getElementsByName('sex')
    console.log(sexes);

5. 通过css选择器来获取一个标签 - document.querySelector(‘css选择器’)

   <button id="btn">按钮</button>
    <button id="var">按钮</button>
    <div class="box">盒子1</div>
    <div class="box">盒子2</div>
    <div class="box">盒子3</div>

    <input type="text" name="username">
    <input type="radio" name="sex">男
    <input type="radio" name="sex">女
    var username = document.querySelector('[name="username"]')
    console.log(username);

    var div = document.querySelector('div')
    console.log(div);

    var box = document.querySelector('.box')
    console.log(box);

    var btn = document.querySelector('#var')
    console.log(btn);

6. 通过css选择器选择所有满足选择器的标签 - document.querySelectorAll(‘css选择器’)

   <div class="box">盒子1</div>
    <div class="box">盒子2</div>
    <div class="box">盒子3</div>document.querySelectorAll('css选择器')
    var divs = document.querySelectorAll('div')
    console.log(divs);

2.标签内容的小操作

1.innerText的操作 —设置标签的内容 - 标签.innerText = 值

代码如下（示例）：

<button>按钮</button>
    <div>盒子</div>
     var btn = document.querySelector('button')
    console.log(btn);
      // 设置标签的内容 - 标签.innerText = 值
    btn.innerText = '确定'
       // 获取标签内容
    console.log(btn.innerText);
 var div = document.querySelector('div')
    console.log(div.innerText);

    div.innerText = '哈哈'
    div.innerText = '<b>哈哈</b>'
    // innerText不能获取/设置 标签中包含的标签

2.innerHTML - 让设置的内容中的标签被解析，获取到包含标签的内容 --------设置标签的内容 - 标签.innerHTML= 值

代码如下（示例）：

 <div>盒子</div>
     var div = document.querySelector('div')
  div.innerHTML = '<b>哈哈</b>'
 console.log( div.innerHTML );

3.表单元素通过value属性来进行操作的—设置表单元素的内容 - 表单元素.value = 值

<input type="text" value="哈哈">
  var input = document.querySelector('input')
    获取表单元素的内容 - 标签.value
    console.log(input.value);

    设置表单元素的内容 - 表单元素.value = 值
    input.value = '呵呵'

4.小结：

双标签.innerText // 获取/设置标签中的文本内容
双标签.innerHTML // 获取/设置包含标签的内容
表单元素.value // 获取/设置表单元素的内容

3.属性操作

1.获取标签属性的值—标签.getAttribute(‘属性名’)

html代码
   <img src="./images/1.webp" alt="">
   
   js代码
   var img = document.querySelector('img')
    console.log(img.getAttribute('src'));

2.设置标签属性 - 标签.setAttribute(‘属性名’, ‘值’)

 <img src="./images/1.webp" alt="">
var img = document.querySelector('img')

img.setAttribute('src', './images/2.webp')
 

3. 删除标签属性 - 标签.removeAttribute(‘属性名’)

 <img src="./images/1.webp" alt="">
var img = document.querySelector('img')

    img.removeAttribute('src')

补充：1.标签.XX - 对象访问属性的语法

 <img src="./images/1.webp" alt="">
var img = document.querySelector('img')
 console.log(img);
    console.log(typeof img);
       //  dom中的元素，有一个特点，console.log只能输出标签的样子，不能输出原本的对象的样子

 // 通过console.dir输出dom元素，就是对象形式了
  console.dir(img)

2.将标签看做对象的话，对象也是有属性的

 <img src="./images/1.webp" alt="">
var img = document.querySelector('img'