当前位置：网站首页>DOM 基础操作

DOM 基础操作

2022-08-01 23:46:00 【柒小莫】

文章目录

前言

本文是博主的一些笔记跟想法，如果觉得本文有点东西请个博主点个关注，你的支持是我更新的动力，先赞后看养成习惯。
在这里插入图片描述

以下是本篇文章正文内容

一、DOM 简介

1.1 什么是 DOM

一个完整的 JavaScript 实现由以下 3 个不同部分组成：

  • 核心（ECMAScript）：语言核心部分，描述了该语言的语法和基本对象。

  • 文档对象模型（Document Object Model，DOM）：网页文档操作标准，描述处理网页内容的方法和接口。

  • 浏览器对象模型（BOM）：客户端和浏览器窗口操作基础，描述与浏览器进行交互的方法和接口。

文档对象模型（Document Object Model，简称 DOM），是 W3C 组织推荐的处理可扩展标记语言（HTML或者XML）的标准编程接口。W3C 已经定义了一系列的 DOM 接口，通过这些 DOM 接口可以改变网页的内容、结构和样式。

官方语言： 文档对象模型（Document Object Model，简称DOM），是W3C组织推荐的处理可扩展置标语言的标准编程接口。它是一种与平台和语言无关的应用程序接口(API),它可以动态地访问程序和脚本,更新其内容、结构和www文档的风格(HTML和XML文档是通过说明部分定义的)。文档可以进一步被处理，处理的结果可以加入到当前的页面。DOM是一种基于树的API文档，它要求在处理过程中整个文档都表示在存储器中。另外一种简单的API是基于事件的SAX，它可以用于处理很大的XML文档，由于大，所以不适合全部放在存储器中处理。

在这里插入图片描述

  • 文档：一个页面就是一个文档，DOM 中使用 document 表示
  • 元素：页面中的所有标签都是元素，DOM 中使用 element 表示
  • 节点：网页中的所有内容都是节点（标签、属性、文本、注释等），DOM 中使用 node 表示

DOM 把以上内容都看做是对象

二、获取元素

2.1 如何获取页面元素

DOM在我们实际开发中主要用来操作元素。
我们如何来获取页面中的元素呢?获取页面中的元素可以使用以下几种方式:

  • 根据 ID 获取
  • 根据标签名获取
  • 通过 HTML5 新增的方法获取
  • 特殊元素获取

2.2 根据 ID 获取

使用 getElementById() 方法可以获取带有 ID 的元素对象。

<form action="">
	<input type="text" id="num" /><br>
	<input type="button" value="查看结果"/>
</form>
<script type="text/javascript"> //获取到id为num的input标签 document.getElementById('num') </script>

·通过id获取是比较简单快捷的方法·

2.3 根据标签名获取

使用 getElementsByTagName() 方法可以返回带有指定标签名的对象的集合。

<form action="">
	<input type="text" id="num" /><br>
	<input type="button" value="查看结果"/>
</form>
<script type="text/javascript"> //获取到id为num的input标签 document.getElementsByTagName('input')//会获取到所有的input标签 </script>

注意：

  • 因为得到的是一个对象的集合，所以我们想要操作里面的元素就需要遍历。
  • 得到元素对象是动态的

2.4 通过 HTML5 新增的方法获取

document.getElementsByClassName(‘类名’)；// 根据类名返回元素对象集合
document.querySelector('选择器'); // 根据指定选择器返回第一个元素对象
document.querySelectorAll('选择器'); // 根据指定选择器返回

这里就说一下querySelector 与querySelectorAll

  1. querySelector返回满足条件的第一个元素（node），而querySelectorAll返回满足条件的所有元素

  2. 在都没有满足条件的元素情况下：querySelector返回null，而querySelectorAll返回空的数组[ ]。

<div id="box">
	<h2 class="box-text">h2</h2>
	<p class="box-text">p</p>
</div>
	<button type="button" onclick="show()">点我</button>
<script> function show(){
       var x= document.getElementById('box') var arr = x.querySelectorAll('.box-text') for(var i=0; i<arr.length; i++){
       arr[i].innerHTML='改变了！' } } </script>

在这里插入图片描述
在这里插入图片描述

2.5 获取特殊元素（body，html）

1.获取body元素

doucumnet.body // 返回body元素对象

2.获取html元素

document.documentElement // 返回html元素对象

三、事件基础

JavaScript 使我们有能力创建动态页面，而事件是可以被 JavaScript 侦测到的行为。

简单理解： 触发— 响应机制。

网页中的每个元素都可以产生某些可以触发 JavaScript 的事件，例如，我们可以在用户点击某按钮时产生一个事件，然后去执行某些操作。

3.1事件三要素

  • 事件源 （谁）
  • 事件类型 （什么事件）
  • 事件处理程序 （要做什么）
var btn = document.getElementById('btn');
btn.onclick = function() {
    
 alert('你好吗'); 
};

3.2 执行事件的步骤

  • 获取事件源
  • 注册事件（绑定事件）
  • 添加事件处理程序（采取函数赋值形式）

3.3常见的鼠标事件

注：以下图片的事件只是常见的并不代表所有

在这里插入图片描述
案例

以下案例用到了 经过触发 离开触发 点击触发 三个事件

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css"> img{
       display: block; margin: 0 auto; cursor: pointer; } </style>
		<script> function change(r){
      //形参 var imgobj = document.getElementById("img") //判断事件里面的实参 if(r=='horse'){
       imgobj.src = "img/horse.jpg" }else if(r=='dog'){
       imgobj.src= "img/dog.jpg" }else{
       imgobj.src= "img/mokey.jpg" } } </script>
	</head>
	<body>
		<img src="img/dog.jpg" id="img" onmouseover="change('horse')" onmouseout="change('dog')" onclick="change('mokey')">
	</body>
</html>

四、操作元素

avaScript 的 DOM 操作可以改变网页内容、结构和样式，我们可以利用 DOM 操作元素来改变元素里面的内容 、属性等。注意以下都是属性

4.1 常用元素的属性操作

innerText、innerHTML 改变元素内容
src、href
id、alt、title

案例

<body>
	<a href="https://www.sohu.com/" id="link" title="sohu">搜狐</a>
</body>
<script> window.onload=function(){
       var liobj=document.getElementById("link") liobj.href="https://www.baidu.com" liobj.title='百度' liobj.innerHTML='百度' liobj.className='link' } </script>
	

<div id="box">
			我是div原来的文字
		</div>
		<script>
			var box =document.getElementById("box")
			
			box.onmouseover=function(){
    
				this.innerHTML='<font color="red">我是处理过的</font>'
			}
			box.onmouseout=function(){
    
				this.innerText="<font color='red'>我是div原来的文字</font>"
			}
		</script>

4.2 样式属性操作

我们可以通过 JS 修改元素的大小、颜色、位置等样式。

element.style 行内样式操作
element.className 类名样式操作

注意：
1.JS 里面的样式采取驼峰命名法 比如 fontSize、 backgroundColor
2.JS 修改 style 样式操作，产生的是行内样式，CSS 权重比较高

在这里插入图片描述

原网站

版权声明
本文为[柒小莫]所创，转载请带上原文链接，感谢
https://blog.csdn.net/weixin_71170351/article/details/126107262

边栏推荐

猜你喜欢

随机推荐