JavaScript基础知识：浏览器（二）

最新推荐文章于 2023-01-06 18:15:00 发布

原创最新推荐文章于 2023-01-06 18:15:00 发布 · 245 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript

javascript 专栏收录该内容

40 篇文章

订阅专栏

这篇博客介绍了DOM操作的基本方法，包括getElement*系列方法如getElementById、getElementsByTagName、getElementsByClassName和getNameElements，以及querySelector和querySelectorAll的使用。此外，还详细讲解了如何通过getComputedStyle获取元素的计算样式，展示了获取和设置元素特性的方法。示例代码展示了在实际场景中的应用。

一、查找元素

1. getElement*

使用 getElement 常用的获取方式：

1） document.getElementById(id) ：通过 id 获取
2）elem.getElementsByTagName(tag) ：查找具有给定标签的元素，并返回它们的集合。
3） elem.getElementsByClassName(className) ：返回具有给定CSS类的元素。
4） document.getElementsByName(name) 返回在文档范围内具有给定 name 特性的元素。很少使用。

<!--document.getElementById(id)-->
<div id="elem">
  <div id="elem-content">Element</div>
</div>

<script>
  // document.getElementById(id)
  // 获取该元素
  let elem = document.getElementById('elem');

  // 将该元素背景改为红色
  elem.style.background = 'red';
</script>

<!--2) 3) 4) 返回的都是集合-->
<form name="my-form">
  <div class="article">Article</div>
  <div class="long article">Long article</div>
</form>

<script>
  // 按 name 特性查找
  let form = document.getElementsByName('my-form')[0];

  // 在 form 中按 class 查找
  let articles = form.getElementsByClassName('article');
  alert(articles.length); // 2, found two elements with class "article"
</script>

2. querySelector*

使用 querySelector 常用的获取方式：

1） elem.querySelectorAll(css) ：返回 elem 中与给定 CSS 选择器匹配的所有元素
2） elem.querySelector(css) ：返回给定 CSS 选择器的第一个元素，换句话说，结果与** elem.querySelectorAll(css)[0]** 相同

<!--1) elem.querySelectorAll(css)-->
<ul>
  <li>The</li>
  <li>test</li>
</ul>
<ul>
  <li>has</li>
  <li>passed</li>
</ul>
<script>
  let elements = document.querySelectorAll('ul > li:last-child');

  for (let elem of elements) {
    alert(elem.innerHTML); // "test", "passed"
  }
 </script>

3. 获取特性

操作特性的方法：

elem.hasAttribute(name) — 检查是否存在这个特性。
elem.getAttribute(name) — 获取这个特性值。
elem.setAttribute(name, value) — 设置这个特性值。
elem.removeAttribute(name) — 移除这个特性。
elem.attributes — 所有特性的集合。

例如：从文档（document）中获取带有 data-widget-name 特性（attribute）的元素，并读取它的值。

二、计算样式（getComputedStyle）

怎么给样式赋值很简单，那么怎么得到元素已有的样式呢？？？

<!doctype html>
<title>测试</title>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
    body{color:#333;}
    </style>
 </head>
 <body>
   <script>
     alert(document.body.style.color);  //  空
   </script>
 </body>
 </html>

在这里插入图片描述

获取样式值，可以用 getComputedStyle

1）语法如下：

getComputedStyle(element, [pseudo])

2）说明：

element：需要被读取样式值的元素。
pseudo：伪元素（如果需要），例如 ::before。空字符串或无参数则意味着元素本身。

<!doctype html>
<title>测试</title>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
    body{color:#333;}
    </style>
 </head>
 <body>
   <script>
     let comStyle = getComputedStyle( document.body );
     alert(comStyle.color);  // rgb(51, 51, 51)
   </script>
 </body>
 </html>