Js进阶31-DOM 操作专题

最新推荐文章于 2024-06-10 22:18:41 发布

晴雪月乔

最新推荐文章于 2024-06-10 22:18:41 发布

阅读量1k

点赞数 25

分类专栏： Js进阶文章标签： javascript 前端

本文链接：https://blog.csdn.net/m0_57521762/article/details/135469029

版权

Js进阶专栏收录该内容

31 篇文章 0 订阅

订阅专栏

1. JavaScript 的组成部分：

ECMAScript：简称 ES，它是欧洲计算机协会，大概每年的六月中旬定制语法规范。
DOM：全称 Document Object Model，即为文档对象类型。
BOM：全称 Browser Object Model，即为浏览器对象类型。

2. 节点树

节点即为标签，节点之间的这种关系，我们称之为“节点树”，因为很像一棵大树。

DOM：文档对象类型，可以理解为是整个节点树最外层“根元素”。DOM 其实就是 JS 语言中内置的引用类型 document 对象，DOM 对象经常用来操作节点，也就是标签。比如节点样式、属性、文本等等。

<script type="text/javascript">
  // DOM：其实就是内置的 document 对象，引用类型数据
  console.log(document);  // #document
  console.log(typeof document); // object
</script>

3. DOM 属性

DOM 在 JS 中，是引用类型数据，官方给我们提供了很多属性进行操作 DOM。

documentElement：获取节点树的 html 标签
head：获取节点树的 head 标签
title：获取节点 title 标签的文本
body：获取节点树的 body 标签

<script type="text/javascript">
  // DOM 常用属性
  // documentElement：获取节点树的 html 标签
  console.log(document.documentElement); // <html>...</html>
  // head：获取节点树的 head 标签
  console.log(document.head); // <head>...</head>
  // title：获取节点 title 标签的文本
  console.log(document.title); // 节点树认知
  // body：获取节点树的 body 标签
  console.log(document.body); // <body>...</body>
</script>

4. DOM 方法

官方也给我们提供了很多方法用来操作节点树上的标签，返回获取到的节点对象（单个）。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta id="cur" charset="UTF-8">
  <title>Title</title>
  <style type="text/css">
    * {
      margin: 0;
      padding: 0;
    }
    #box {
      color: red;
      text-indent: 3em;
      background-color: cyan;
    }
  </style>
</head>
<body>
  <div id="box">我爱你我的祖国</div>
  <ul>
    <li>1</li>
    <li id="me">2</li>
    <li class="green">3</li>
    <li>4</li>
    <li class="green">5</li>
  </ul>
  <input type="checkbox" name="hobby" /> 读书
  <input type="checkbox" name="hobby" /> 游泳
  <input type="checkbox" name="hobby" /> 画画
</body>
</html>

(1) getElementById

getElementById 方法是 document 对象的方法，可以通过标签的 Id 属性，在节点树中获取节点。

// getElementById 方法：可以根据 id 获取到节点树上的任意节点。需要给标签添加 id 属性，通过 id 选择器获取
const element = document.getElementById('box');
const eleCur = document.getElementById('cur');
const eleMe = document.getElementById('me');
console.log(element); // <div id="box">...</div>
console.log(eleCur); // <meta id="cur" charset="UTF-8">
console.log(eleMe); // <li id="me">2</li>
console.log(typeof element); // object

getElementById 方法可以通过标签 ID 选择器获取对应节点。
一般我们将 script 标签放在程序最底部。
不管节点（标签）在网页中嵌套关系如何复杂，都可以通过这个方法获取。
注意：节点（标签）在 JS 中属于引用类型数据。

(2) getElementsByName

getElementsByName 方法可以根据 name 属性获取到节点树上的节点，返回获取到的所有节点（多个）。

// getElementsByName 方法：可以根据 name 获取到节点树上的任意节点。需要给标签添加 name 属性，通过 name 选择器获取
const eleHobbies = document.getElementsByName('hobby');
console.log(eleHobbies); // NodeList(3) [input, input, input]

这个方法在实际应用中有些限制，它通常用于获取带有 name 属性的表单元素，如 input、button、select 标签等。

(3) getElementsByTagName

getElementsByTagName 方法可以根据标签名获取到节点树上的节点，返回获取到的所有节点（多个）。

// getElementsByTagName 方法：可以根据标签名获取到节点树上的任意节点。
const eleDivs = document.getElementsByTagName('div');
const eleLis = document.getElementsByTagName('li');
console.log(eleDivs); // HTMLCollection(1) [div#box]
console.log(eleLis); // HTMLCollection(5) [li, li#me, li.green, li, li.green]

(4) getElementsByClassName

getElementsByClassName 方法可以根据类名获取到节点树上的节点，返回获取到的所有节点（多个）。

// getElementsByClassName 方法：可以根据类名获取到节点树上的任意节点，需要给标签添加 class 属性，通过类选择器获取
const eleGreens = document.getElementsByClassName('green');
console.log(eleGreens); // HTMLCollection(2) [li.green, li.green]

(5) querySelector

querySelector 方法可以根据 css 选择器获取到节点树上的节点，返回第一个匹配的节点（单个）。

// querySelector 方法：可以根据 css 选择器获取到节点树上的任意节点
const eleBox = document.querySelector('#box');
const eleLi = document.querySelector('li');
const eleGreen = document.querySelector('.green');
console.log(eleBox); // <div id="box">...</div>
console.log(eleLi); // <li>1</li>
console.log(eleGreen); // <li class="green">3</li>

(6) querySelectorAll

querySelectorAll 方法可以根据 css 选择器获取到节点树上的节点，返回所有匹配的节点（多个）。

// querySelectorAll 方法：可以根据 css 选择器获取到节点树上的任意节点
const eleLisAll = document.querySelectorAll('li');
console.log(eleLisAll); // NodeList(5) [li, li#me, li.green, li, li.green]

上面这些用于获取 DOM 节点的方法可以从任意的父节点调用，而不仅仅是从 document 对象。这意味着我们可以从任何特定的 DOM 元素开始搜索，以获取其子元素或者与之相关的元素。

1 通过 id 获取元素
从任何节点调用 getElementById 并不常见，因为 id 应该是唯一的，所以 document.getElementById 已足够。但理论上，从某个较大的节点开始调用此方法，它仍然会在整个文档范围内查找该 id。

2 通过类名获取一组元素
var elements = parentNode.getElementsByClassName('className');
这里，parentNode 可以是任何 DOM 节点，它将返回该节点下所有具有指定类名的子元素。

3 通过标签名获取一组元素
var elements = parentNode.getElementsByTagName('tagName');
类似地，parentNode 是想要开始搜索的节点，它将返回该节点下所有具有指定标签名的子元素。

4 通过 CSS 选择器获取一个元素
var element = parentNode.querySelector('.className');
在这里，parentNode.querySelector 将返回第一个匹配 CSS 选择器的子元素。

5 通过 CSS 选择器获取一组元素
var elements = parentNode.querySelectorAll('.className');
这将返回 parentNode 下所有匹配 CSS 选择器的子元素。

在使用这些方法时，只要确保 parentNode 是一个有效的 DOM 节点即可。这种方法的优势在于它允许我们更具体地定位搜索范围，从而在大型文档中更有效率地找到需要的元素。

getElementsByName 实际上是一个定义在 document 对象上的方法。这意味着它不能从任意父节点调用，而只能从 document 调用。

例如，document.getElementsByName('nameValue') 是有效的，但如果尝试从非 document 节点调用此方法，则会导致错误。

5. 操作 DOM 节点

我们可以通过 DOM 方法获取到节点树上的任意节点（标签），经常通过点语法来操作节点的属性、文本、样式等。

(1) 操作节点属性

我们可以通过 DOM 方法获取节点，进而操作节点属性。

通过节点对象.属性名，可以获取节点某一个属性的属性值，当然也可以通过 JS 来动态设置新的属性值。

<div id="box" class="cur">我是祖国的未来</div>
<div>
  <input type="text" id="box1">
</div>

// JS 当中经常通过 DOM 获取节点，经常用来操作节点属性
const div = document.getElementById('box');
const input = document.getElementById('box1');

// 获取节点属性值
console.log(div.id); // box
console.log(div.className); // cur
console.log(input.type); // text

// 设置节点属性值
div.id = 'memeda';
div.className = 'hahaha';
input.type = 'password';

也可以通过节点对象的 getAttribute 方法和 setAttribute 方法来操作节点属性。
// 获取节点属性
console.log(div.getAttribute('id')); // box
console.log(input.getAttribute('type')); // text

// 设置节点属性
div.setAttribute('id', 'memeda');
input.setAttribute('type', 'password');

(2) 操作节点文本

我们可以通过 DOM 对象提供的方法获取对应的节点，我们也可以通过点语法操作节点文本。

节点开始标签和结束标签之间的内容就称为节点的文本。
<p>段落文本</p>
上面的“段落文本”就是 p 标签的文本。

<p id="cur">我最近想学习 web 前端</p>
<p>
  <input type="text" id="container" value="我是默认的文本，需通过 value 属性获取和设置">
</p>

操作节点文本分为两种情况：

操作表单元素文本，需要通过 value 属性进行操作。

// 表单元素：input、select、textarea、button 这些元素
// 表单元素操作文本，需要使用 value 属性
const input = document.getElementById('container');
// 获取文本
console.log(input.value); // 我是默认的文本，需通过 value 属性获取和设置
// 设置文本
input.value = '通过 JS 给表单元素重新设置新的文本';

操作非表单元素，需要通过 innerHTML 属性和 InnerText 属性进行操作。

// 非表单元素：不是 input、select、textarea、button 这些元素，如 div、span、a、img 等
// 非表单元素操作文本，需要使用 innerHTML 属性和 innerText 属性
const p = document.getElementById('cur');
// 获取文本
p.innerHTML = '我最近想学习 <span style="color: red;">web 前端</span>';
p.innerText = '我是中国最帅的帅大哥';
// 设置文本
p.innerHTML = '我是中国最帅的帅大哥';

(3) 操作节点样式

我们可以通过 DOM 方法获取节点，可以操作节点的行内样式。

<p id="box" style="width: 100px; height: 100px; color: red; background-color: cyan">我是大帅哥</p>

// 获取节点
const p = document.getElementById('box');

// 获取节点的行内样式
console.log(p.style); // CSSStyleDeclaration {0: "width", 1: "height", 2: "color", 3: "background-color", width: "100px", height: "100px", color: "red", backgroundColor: "cyan", length: 4}
console.log(p.style.width); // 100px
console.log(p.style['color']); // red

// 设置节点的行内样式
p.style.width = '200px';
p.style.height = '200px';
p.style['color'] = 'cyan';
p.style.backgroundColor = 'red'; // 驼峰