• DOM 基础操作

    文章目录

    前言

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

    以下是本篇文章正文内容

    一、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>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8

    ·通过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>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8

    注意：

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

    2.4 通过 HTML5 新增的方法获取

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

    • 1
    • 2
    • 3

    这里就说一下querySelector 与querySelectorAll

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

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

    <div id="box">
	<h2 class="box-text">h2h2>
	<p class="box-text">pp>
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>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14

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

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

    1.获取body元素

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

    • 1

    2.获取html元素

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

    • 1

    三、事件基础

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

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

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

    3.1事件三要素

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

    • 1
    • 2
    • 3
    • 4

    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>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30

    四、操作元素

    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>
	

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    <div id="box">
			我是div原来的文字
		</div>
		<script>
			var box =document.getElementById("box")
			
			box.onmouseover=function(){
				this.innerHTML='我是处理过的'
			}
			box.onmouseout=function(){
				this.innerText="我是div原来的文字"
			}
		</script>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13

    4.2 样式属性操作

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

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

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

    在这里插入图片描述

  • 相关阅读:
    带宽优化新思路：RoCE网卡聚合实现X2增长
    自动化测试之路 —— Appium使用教程
    已经安装了python如何与anaconda共存？
    Kotlin内置函数let、run、apply的区别
    如何计算质心
    给docker容器中的mysql做定时数据备份
    【初识JavaSe语法笔记起章】——标识符、关键字、字面常量、数据类型、类型转换与提升、字符串类型
    JS高级：storage存储-正则表达式
    某综合性能源集团绩效考核设计项目纪实
    链路追踪Skywalking应用实战
  • 原文地址：https://blog.csdn.net/weixin_71170351/article/details/126107262