【前端笔记】一、DOM和BOM

最新推荐文章于 2024-03-13 11:11:16 发布

知识的芬芳和温柔的力量全都拥有的小王同学

最新推荐文章于 2024-03-13 11:11:16 发布

阅读量199

点赞数 1

CC 4.0 BY-SA版权

分类专栏：前端文章标签： DOM BOM

本文链接：https://blog.csdn.net/tensixchuan/article/details/118329267

前端专栏收录该内容

14 篇文章

订阅专栏

本文详细讲解了如何通过DOM操作在HTML中创建、查找和删除节点，以及如何利用BOM进行事件监听，如点击事件驱动背景颜色变化。涵盖了JavaScript操作DOM和BOM的基础实例。

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

DOM

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

常用节点操作

创建节点：document.createElement
添加节点：element.appendChild
删除节点：element.removeChild
查找节点：document.getElementById、document.getElementsByClassName、document.querySelector、document.querySelectorAll、document.getElementsByTagName()

举例：
在这里插入图片描述

<!--html页面-->
<html>
<head>
</head>
<body>
  <div id='div1'>
    <div id = 'div1-1'> div1-1</div>
    <div id = 'div1-2'> div1-2</div>
  </div>
</body>
</html>

/*css样式*/
* {
    margin: 0;
    padding: 0;
  }
  #div1 {
    width: 400px;
    height: 300px;
    display: flex;
    justify-content: space-around;
    align-items: center;
    background-color: rgba(0,122,204,0.7);
  }
  #div1 > div{
    width: 100px;
    height: 100px;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: rgba(0,122,204);
  }

查找结点

var element = document.getElementById('div1-1')  //根据id查找结点
element.innerText = 'div1-1节点'  //修改innerText属性

var element2= document.getElementById('div1-2')  //根据id查找结点
element2.innerText = 'div1-2节点'   //修改innerText属性

删除节点

var childElement1 = document.getElementById('div1-1')  //定位到要删除的节点div1-1
var childElement2 = document.getElementById('div1-2')  
var ParentElement = document.getElementById('div1')  //找到节点div1-1的父节点div1
ParentElement.removeChild(childElement1)  //移除子节点

在这里插入图片描述

创建节点

var parentElement=document.getElementById('div1')
var chlldElement3=document.createElement('div')
parentElement.appendChild(chlldElement3)
chlldElement3.innerText='新增节点div1-3'

在这里插入图片描述

DOM的事件

包括单击双击，键盘，滚轮，鼠标移入移出等

事件参数e是事件触发时，浏览器传给事件触发函数的一个参数对象，e里面包括了鼠标的坐标信息（鼠标在屏幕的坐标）、键盘的按键信息（键盘按了哪个键）等

js事件的冒泡指的是事件从子元素向父元素「渗透」的过程，给一个元素绑定点击事件，有addEventListener和onclick等多种方式，onclick只能给元素点击事件绑定一个事件，addEventerListener可以绑定多个。

eg：点击div1-1，div1变黄，点击div1-2，div1变红

找到div1-1，div1-2
监听div1-1，div1-2上的「点击」事件
写触发【点击】事件之后的逻辑
a. 找到div1
b. 改变div1的背景颜色

var element = document.getElementById('div1-1')
var element2=document.getElementById('div1-2')
element.onclick = function (e) {
  var parentEle = document.getElementById('div1')
  parentEle.style.backgroundColor = 'yellow'
}
element2.onclick = function (e) {
  var parentEle = document.getElementById('div1')
  parentEle.style.backgroundColor = 'red'
}

//点击div1-2，新增节点
var element1 = document.getElementById('div1-1')
var element2 = document.getElementById('div1-2')
var parentElement = document.getElementById('div1')
element1.onclick=function (e){//点击div1-1，删除div1-3
  var element3 = document.getElementById('div1-3')
  parentElement.removeChild(element3)
}

element2.onclick = function (e) {//点击div1-2，新增节点
  var childElement = document.createElement('div')
  childElement.innerText='新增节点'
  parentElement.appendChild(childElement)
}