JavaScript基础篇

最新推荐文章于 2025-08-13 18:53:35 发布

Manon103

最新推荐文章于 2025-08-13 18:53:35 发布

阅读量195

点赞数 1

CC 4.0 BY-SA版权

文章标签： JavaScript html css

本文链接：https://blog.youkuaiyun.com/qq_41840688/article/details/93875648

本文回顾了JavaScript的基础知识，重点介绍了DOM（文档对象模型）的操作，包括节点的获取、创建、添加、删除，以及事件的绑定与触发。通过实例演示了如何使用DOM API对网页元素进行动态控制，同时探讨了传统事件绑定与W3C标准事件绑定的区别。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

简介

实习了三个月，主要都在用一些框架，因此对js基础略有遗忘，今日特地写下这篇文章，用来回忆基础，并加深印象。

一、DOM（Document Object Model）

通过HTML DOM，我们可以对html页面的dom元素进行操作。
当网页被加载时，浏览器会创建网页的文档对象模型(DOM)。
DOM把整个界面映射为一个多层节点结构，由此形成DOM树。

DOM树:

<html>
	<head>
		<title></title>
	</head>
	<body>
		<p></p>
	</body>
</html>

对DOM节点进行操作
通过DOM创建的表示文档的树形图，我们便可以获得控制和操作页面结构和内容的主动权。通过DOM提供的API，我们便可以删除、添加、修改或者替换任何节点。
- 获取DOM节点

<div class="classDiv">通过类名获取节点</div>
<div id="idDiv">通过id获取节点</div>

// 通过类名获取节点，获得一个数组，通过下标得到想要的元素
var classDiv= document.getElementsByClassName('classDiv')[0];	
// 通过id获取节点
var idDiv = document.getElementById('idDiv');
// 通过标签名获取节点，获得一个数组，通过下标得到想要的元素
var divList = document.getElementsByTagName('div');
// 通过querySelector获取节点，返回查找到的第一个元素
var queryDiv = document.querySelector('div')
// 通过querySelectorAll获取节点，返回节点列表
var queryAllDiv = document.querySelectorAll('div');

创建节点

var paragraph = document.createElement('p');
paragraph.innerText = '我是一个p标签';

添加节点

// 通过appendChild插入节点
document.getElementById('idDiv').appendChild(paragraph );
// 通过insertBefore插入节点
document.getElementById('idDiv')

删除节点

<div id="parentNode">
	<p id="childNode">我是子节点</p>
</div>

var parentNode = document.getElementById('parentNode');
var childNode= document.getElementById('childNode');
parentNode.removeChild(childNode);

二、事件

事件是js和html实现交互的工具，我们可以在节点上定义特定的行为来规定事件的触发。以下举几个例子。

点击事件

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>test</title>
  <style>
    .test1{
      width:100px;
      height:100px;
      background-color:#efacde;
    }
  </style>
</head>
<body>
  <div class="test1">
    点我变色xixi
  </div>

  <script>
    var test1 = document.getElementsByClassName('test1')[0];
    // 传统事件绑定，操作样式
    test1.onclick = function(){
      test1.style.backgroundColor = 'blue';
    }
    // W3C标准的事件绑定
    test1.addEventListener('click',function(){
      test1.style.color = '#ffffff';
    })
  </script>
</body>
</html>

那传统的事件绑定和标准的有什么区别呢？

传统事件绑定重复绑定事件时，后绑定的事件会覆盖以前的事件。标准事件绑定不会覆盖，而是依次触发。
传统的事件绑定不支持事件流，即其传播方式只能是冒泡模式，标准事件绑定支持事件流，且其传播方式可以是冒泡模式或捕获模式。

其他鼠标事件都可以在菜鸟教程或者是W3C上找到，在此不再赘述。

三、属性操作

使用getAttribute(属性名)获取属性，若无此属性，则返回null，
使用setAttribute(属性名，属性值)来设置属性。
使用removeAttribute(属性名)来移除属性。

下面的示例用来实现当鼠标移动到一张图片时，在下方展示该图片。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>test</title>
  <style>
    .container{
      width:400px;
    }
    .img{
      width:200px;
      float:left;
    }
    .container::after{
      content: '';
      display: block;
      clear: both;
    }
    .show{
      width: 500px;
      margin:20px auto;
    }
    .img3{
      width: 100%;
    }
  </style>
</head>
<body>

  <div class="container">
    <img class="img" src="./img/lunbo1.jpg" alt="">
    <img class="img" src="./img/lunbo2.jpg" alt="">
  </div>
  <div class="show">
    <img class="img3" src="" alt="">
  </div>

  <script>

    var img = document.getElementsByClassName('img');
    var img3 = document.getElementsByClassName('img3')[0];

    for(var i=0;i<img.length;i++){
      img[i].addEventListener('mouseenter',function(){
        img3.setAttribute('src',this.getAttribute('src'));
        return false;
      })
    }
  </script>
</body>
</html>