DOM&BOM-制作网页特效

破晓*

已于 2025-03-06 03:53:24 修改

阅读量665

点赞数 24

文章标签：前端 javascript html

于 2024-12-16 13:19:41 首次发布

本文链接：https://blog.youkuaiyun.com/2301_79757798/article/details/144491533

版权

JS的主要功能之一就是制作网页特效，DOM&BOM就是用来制作网页特效的

DOM：文档对象模型

DOM是W3C（万维网联盟）推荐的处理可扩展标记语言（html或者xhtml）的标准编程接口

页面特效：调用这些接口可以改变网页的内容，结构，属性，样式，从而让页面发生变化

DOM有一个非常重要的概念，html文档可以理解成一棵树，叫DOM树（文档树模型）

文档：一个页面就是一个文档，DOM中使用document表示

节点：网页中所有内容，在文档树中都是节点（标签，属性，文本，注释），使用node表示

getElementByld

网页特效实现步骤

1.找到要改动的html标签（获取页面元素）

2.修改标签的样式，内容，属性等

<style>
      div{
         width:200px;
         height:200px;
         background-color: orange;
      }
    </style>
</head>
<body>
  <div></div>
  <script>
    //1.获取html标签元素
    var div=document.querySelector('div');
    //2.修改标签的内容，样式，属性等等
    div.style.backgroundColor='#000';
  </script>
</body>
</html>

获取页面元素

从页面中获取要操作的标签：

getElementById，getElementsByTagName，getElementsByClassName
querySelector/querySelectorAll

getElementById：

根据id值获取标签对象（元素）

格式：document.getElementById（"id值"）

特点：一次只能获取一个标签对象

案例：

<p id="p1">

俺不怕写错字，但怕俺文化太高

</p>

var pDom=

document.getElementById("p1");

console.dir(pDom)

这个图显示的是p标签详细的细节，但只显示了一小部分，还有很多很多没显示出，它的结构是非常常复杂的，我们只需要掌握一部分。

案例演示：

 <p id="p1">
   俺从不写错字，俺只会写英文
 </p>

 <script>
  //目标：获取p标签对象
  var pDom=document.getElementById('p1');
  console.log(pDom);
  </Script>

结果显示：

pDom里保存的确实是p标签对象，但是我们想看里面的细节而不是p标签，我们便可以用另外一种方法console.dir(pDom)

<body>
 <p id="p1">
   俺从不写错字，俺只会写英文
 </p>

 <script>
  //目标：获取p标签对象
  var pDom=document.getElementById('p1');
  //console.log(pDom);
  console.dir(pDom);
  </Script>
</body>

结果显示：

其中，这么多信息我们可以看到有align这个属性，它的作用是控制文字显示在页面哪个部分

在以上代码中，我们新增align属性来演示

  pDom.align="center";

这时，它的属性就更新了

标签中原有的属性在对象中都能找到，并且都能通过对象.属性的方式来操作

class属性改名为className

console.log()能打印出来获取的标签对象（标签元素）

console.dir()能打印出标签的对象的细节

通常情况下我们用console.log()即可，但是要打印标签对象细节的时候必须使用console.dir()

getElementsByClassName

根据标签类值获取标签对象（元素）

格式：document.getElementsByClassName("类名")

特点：一次可以获取多个标签对象

<p class="word">俺从不写错字，但俺写通假字</p>

<div class="word">执子之手，将子拖走</div>

<h1 class="word">一觉醒来，天都黑了</h1>

因为不同标签它的class值可以是一样的，那我们用以下代码后面填word参数就能一次性获取三个标签对象

var pDoms=document.getElementsByClassName('word');

案例演示：

<body>
  <p class="word">俺从不写错字，但俺写通假字</p>
  <div class="word">执子之手，将子拖走</div>
  <h1 class="word">一觉醒来，天都黑了</h1>

 <script>
  //将三个标签数组全部获取到，并且保存到doms里面，所以这个doms是伪数组有三个单元
   var doms = document.getElementsByClassName("word");
   console.dir(doms);
  </Script>
</body>
</html>

演示：将p标签里的文字改为红色将div标签的文字改为绿色将h1的文字改为蓝色

<body>
  <p class="word">俺从不写错字，但俺写通假字</p>
  <div class="word">执子之手，将子拖走</div>
  <h1 class="word">一觉醒来，天都黑了</h1>

 <script>
  //将三个标签数组全部获取到，并且保存到doms里面，所以这个doms是伪数组有三个单元
   var color =["red","green","blue"];
   var doms = document.getElementsByClassName("word");
   console.dir(doms);
   for(var i=0;i<doms.length;i++){
     doms[i].style.color=color[i];
   }
  </Script>
</body>

在以上代码添加了循环，并定义了颜色值，颜色值与用于保存信息的doms值下标一样，所以设置循环，每次循环，将颜色赋给doms里的值

querySelector

查询选择器：

格式：document.querySelector("选择器")
css中的基本选择器，复合选择器都能使用
querySelector一次只能获取一个标签对象

示例代码:

<body>
  <h1 id="book">盗墓笔记</h1>
  <p class="title">鬼吹灯</p>
  <span>茅山后裔</span>

  <u1 class="music">
    <li>星星点灯</li>
    <li>大风车</li>
    <li id="new">百战成诗</li>
    </u1>
  <script>
    //用标签选择器获取span标签
    var span=document.querySelector('span');
    console.log(span);
  </Script>
</body>

我们进行第一个操作：查询span标签，输入以下代码，并成功查找到

<script>
var span=document.querySelector("span");
console.log(span);
</script>

第二个操作：查询id选择器的book信息

<script>
var h = document.querySelector('#book');
console.log(h);
</script>

第三个操作：找p标签，里面给一个类选择器.title打印出查询信息

var p = document.querySelector('.title');
console.log(p);

三个标签都找到了，基本选择器没有问题那么复合选择器呢？我们现在找百战成诗标签

外层是ul，我们可以用标签选择器，也可以用类选择器

var li = document.querySelector('.music #new');
console.log(li);

第四个操作：获取星星点灯等三个li标签

1.querySelector只能获取到一个标签

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

2.要获取多个标签，需要用到querySelectorAll

querySelector用法和querySelectorAll用法一样
querySelectorAll一次性能获取多个标签对象
格式：document.querySelectorAll("选择器")

var lis = document.querySelectorAll('ul>li');
console.log(lis);

可以看出以上也是一个类数组对象，用于表示文档树中的节点集合，NodeList对象包含了一组节点，这些节点通过DOM方法获取的。

例如document.getElementsByTagName()、document.querySelectorAll()等方法的返回值就是NodeList。

以上代码也能使用for循环将结果一一打印

var lis = document.querySelectorAll('ul>li');
console.log(lis);
for(var i=0;i<lis.length;i++){
  console.log(lis[i]);
}