JavaScript语法基础之DOM基础

目录

1. DOM 基础

1.1. DOM 是什么?

1.1.1. DOM 对象

1.1.2. DOM 结构

1.2. 节点类型

1.3. 获取元素

1.3.1. getElementById()

1.3.2. getElementsByTagName()

1.3.3. getElementsByClassName()

1.3.4. getElementsByName()

1.4.如何去操作对象

修改属性(css)

1.5.如何动态的创建对象


1. DOM 基础

1.1. DOM 是什么?

1.1.1. DOM 对象

  • DOM全称Document Object Model(文档对象模型),它是由 W3C 定义的一个标准。
  • 我们有时候遇到鼠标移到某个元素上面时就改变颜色,或者动态添加元素或者删除元素等,其实这些效果就是通过DOM提供的方法来实现的。
  • 简单来说,DOM 里面有很多方法,我们通过它提供的方法来操作一个页面中的某个元素,例如:改变这个元素的颜色、点击这个元素实现某些效果、直接把这个元素删除等。
  • 一句话总结就是:DOM 操作,可以简单理解成“元素操作”。

1.1.2. DOM 结构

  • DOM采用的是树形结构,用树节点形式来表示页面中的每一个元素,我们先看下面一个例子:
  • <!DOCTYPE html> 
    <html>
    <head><meta charset="utf-8" /><title></title>
    <body><h1>Gok</h1><ui><li>Gok是一个……</li><li>Gok成立于……</li>
    </body>
    </html>
  • 对于上面这个 HTML 文档,DOM 会将其解析为如下图所示的树形结构。

  • 是不是很像一棵树呢?其实,这也叫做DOM 树。在这棵树上html 元素是树根,也叫根元素。
  • 接下来深入一层,我们发现有 headbody 这两个分支,它们位于同一层次上,并且有着共同的父节点(即 html),所以它们是兄弟节点。
  • head 有 2 个子节点:titlemeta(这两个是兄弟节点)。
  • body 有 3 个子节点:h1pp
  • 利用这种简单的家谱关系我们可以把各节点之间的关系清晰地表达出来。
  • 那么为什么要把一个HTML页面用树形结构表示呢?这也是为了更好地给每一个元素进行定位,以便让我们找到想要的元素。
  • 每一个元素就是一个节点,而每一个节点就是一个对象。
  • 也就是说,我们在操作元素时,其实就是把这个元素看成一个对象,然后使用这个对象的属性和方法来进行相关操作(这句话对理解 DOM 操作太重要了)。

1.2. 节点类型

  • JavaScript 中,节点也是分为很多类型的。
  • DOM 节点共有12种类型,不过常见的只有 3 种(其他的不用管)。
    • 元素节点(标签)
    • 属性节点(属性名)
    • 文本节点(文本)
  • 很多人看到下面这句代码,就认为只有一个节点,因为只有 div 这一个元素嘛。
  • 实际上,这里有 3 个节点:
<div id="wrapper">Gok</div>

1.3. 获取元素

获取元素,准确来说,就是获取元素节点(注意不是属性节点或文本节点)。

对于一个页面,我们想要对某个元素进行操作,就必须通过一定的方式来获取该元素。只有获取到了,才能对其进行相应的操作。

咦,这不跟 CSS 选择器相似吗?只不过选择器是 CSS 的操作方式,而 JavaScript 却有着属于自己的另一套方法。

JavaScript 中,我们可以通过以下 6 种方式来获取指定元素:

    • getElementById()
    • getElementsByTagName()
    • getElementsByClassName()
    • getElementsByName()
    • querySelector()、querySelectorAll()
    • document.title、document.body
  • 上面每一种方法都非常重要,我们要一个个地认真学透。
  • 请注意,JavaScript 是严格区分大小写的,所以在书写的时候,就不要把这些方法写错了。

1.3.1. getElementById()

  • JavaScript 中,如果想通过 id 来选中元素,我们可以使用 getElementById() 来实现。
  • getElementById 这个方法的名字看似很复杂,其实根据英文来理解就很容易了,也就是get element by id(通过 id 来获取元素)的意思。
  • 实际上,getElementById() 类似于 CSS 中的 id 选择器,只不过 getElementById()JavaScript 的操作方式。
  • 语法:
document.getElementById("id名")
  • 举例:
<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title></title><script>window.onload = function () {var oDiv = document.getElementById("div1");oDiv.innertext = " ";oDiv.innerhtml = "imag";};</script></head><body><div id="div1" style="color:pink"></div></body>
</html>
  • 这个例子的 JavaScript 代码在HTML代码的上面,如果没有 window.onload,浏览器解析到 document.getElementById("div1") 就会报错,因为它不知道id"div1"的元素究竟是哪位兄弟。
  • 因此我们必须使用 window.onload,使得浏览器把整个页面解析完了再去解析window.onload内部的代码,这样就不会报错了。

1.3.2. getElementsByTagName()

  • JavaScript中,如果想通过标签名来选中元素,我们可以使用 getElementsByTagName() 方法来实现。
  • 同样,getElementsByTagName()类似于 CSS 中的元素选择器。
  • 语法:
document. getElementsByTagName("标签名")
  • 举例:
<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title></title><script>window.onload = function () {var oUl = document.getElementById("list");var oLi = oUl.getElementsByTagName("li");oLi[2].style.color = "red";};</script></head><body><ul id="list"><li>HTML</li><li>CSS</li><li>JavaScript</li><li>jQuery</li><li>Vue.js</li></ul></body>
</html>

1.3.3. getElementsByClassName()

  • JavaScript 中,如果想通过 class 来选中元素,我们可以使用 getElementsByClassName() 方法来实现。
  • 同样,getElementsByClassName() 类似于 CSS 中的 class 选择器。
  • 语法:
document. getElementsByClassName("类名")
  • 举例:
<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title></title><script>window.onload = function () {var oLi = document.getElementsByClassName("select");oLi[0].style.color = "red";};</script></head><body><ul id="list"><li>HTML</li><li>CSS</li><li class="select">JavaScript</li><li class="select">jQuery</li><li class="select">Vue.js</li></ul></body>
</html>

1.3.4. getElementsByName()

  • 对于表单元素来说,它有一个一般元素都没有的 name 属性。如果想要通过 name 属性来获取表单元素,我们可以使用 getElementsByName() 方法来实现。
  • 语法:
document.getElementsByName("name名")
  • 举例:单选按钮
<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title></title><script>window.onload = function () {var oInput = document.getElementsByName("status");oInput[2].checked = true;};</script></head><body>你的最高学历:<label><input type="radio" name="status" value="本科" />本科</label><label><input type="radio" name="status" value="硕士" />硕士</label><label><input type="radio" name="status" value="博士" />博士</label></body>
</html>
  • 举例:复选框
<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title></title><script>window.onload = function () {var oInput = document.getElementsByName("fruit");for (var i = 0; i < oInput.length; i++) {oInput[i].checked = true;}};</script></head><body>你喜欢的水果:<label><input id =1 type="checkbox" name="fruit" value="苹果" />苹果</label><label><input type="checkbox" name="fruit" value="香蕉" />香蕉</label><label><input type="checkbox" name="fruit" value="西瓜" />西瓜</label></body>
</html>

1.4.如何去操作对象

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>操作DOM对象</title>
</head>
<body>
<div class="container">程咬金</div> 						==》container
<input type="text" name="userName" value="程咬金">			==》userName
<br/>
<button id="change">修改</button>							==》change
</body>
<script>// 1. 找对象var container = document.getElementsByClassName("container")[0];var change = document.getElementById("change");var userName = document.getElementsByName("userName")[0];// 2. 操作对象change.onclick = function () {// 改变纯文本container.innerText = "苏烈";// 修改超文本container.innerHTML = "<h1 style='color: red'>苏烈</h1>";// 修改value属性userName.value = "牛魔";}
</script>
</html>
修改属性(css)
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>操作DOM对象</title><style>.box{width: 100px;height: 100px;background-color: red;}.box2{width: 200px;height: 200px;background-color: blue;border-radius: 200px;}</style>
</head>
<body>
<div class="box"></div>
<br>
<button id="change">修改</button>
</body>
<script>// 1. 找对象var box = document.getElementsByClassName("box")[0];var change = document.getElementById("change");// 2. 操作对象change.onclick = function () {box.style.backgroundColor = "green";box.style.width = "200px";box.style.height = "50px";}
</script>
</html>

1.5.如何动态的创建对象

// 动态创建元素
document.createElement("标签名字");
// 追加元素: 父级追加子级
父级对象.append(子级对象);
// 获取父级对象
子级对象.parentNode;
// 删除对象
dom对象.remove();

案例:

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>DOM对象的动态创建</title><style>tr{text-align: center;cursor: pointer;}</style>
</head>
<body>
<div class="box"><label>姓名:</label> <input type="text" value="嬴政" name="userName"><br><br><label>年龄:</label> <input type="number" value="45" name="userAge"><br><br><label>性别:</label><input type="radio" name="userGender" value="男" checked> 男<input type="radio" name="userGender" value="女"> 女<br><br><input type="submit" id="add" value="添加">
</div>
<br>
<table style="width:500px ;border:1px"  id="data-table"><tr><th>姓名</th><th>年龄</th><th>性别</th><th>操作</th></tr>
</table>
<script>// 找对象var dataTable = document.getElementById("data-table");var userName = document.getElementsByName("userName")[0];var userAge = document.getElementsByName("userAge")[0];var userGenders = document.getElementsByName("userGender");var add = document.getElementById("add");// 操作对象add.onclick = function () {
// 获取值var userNameValue = userName.value;var userAgeValue = userAge.value;
// 获取性别的值var userGenderValue = userGenders[0].checked ? "男" : "女";
// 动态创建标签
// 创建行var tr = document.createElement("tr");
// 创建列var userNameTd = document.createElement("td");userNameTd.innerText = userNameValue;
// 给TD绑定双击事件userNameTd.ondblclick = function () {
// 先获取文本值var value = this.innerText;
// 清除文本this.innerText = "";
// 动态创建input输入框var input = document.createElement("input");input.value = value;
// 给input绑定失去焦点的事件input.onblur = function () {userNameTd.innerText = this.value;};this.append(input);};var userAgeTd = document.createElement("td");userAgeTd.innerText = userAgeValue;var userGenderTd = document.createElement("td");userGenderTd.innerText = userGenderValue;var doTd = document.createElement("td");
// 动态创建一个删除按钮var delBtn = document.createElement("button");delBtn.innerText = "删除";
// 给删除按钮绑定事件delBtn.onclick = function(){
// 删除的逻辑var delTr = this.parentNode.parentNode;
// 删除delTr.remove();};
// 将删除按钮追加到doTd中doTd.append(delBtn);
// 将td 追加到 trtr.append(userNameTd);tr.append(userAgeTd);tr.append(userGenderTd);tr.append(doTd);
// 将 tr 追加到 tabledataTable.append(tr);}
</script>
</body>
</html>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/web/50993.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Jenkins 定时触发策略

每天晚上 11 点执行一次&#xff0c;可以按照以下步骤进行。 复制代码 import jenkins import datetime import base64USERNAME bUFNXssaaX0NU\n PASSWORD bUFNXXssdds0Ndclass JenkinsMonitor:def __init__(self, jobs_to_monitor):self.jenkins_url "http://pe-dddd…

fastJSON工具类

1 总结 1&#xff1a; JSONObject&#xff1a; 理解为 Map 2&#xff1a;JSONArray &#xff1a; 理解为List<Map> 3&#xff1a;JSON.toJSONString()&#xff1b;会将时间转为时间戳 4&#xff1a;toJSONStringWithDateFormat 同一个字符串中 时间格式是统一格式 2 转成…

IP SSL证书的未来趋势:适应不断变化的安全挑战

随着网络攻击手段的不断进化和用户对隐私保护意识的增强&#xff0c;IP SSL证书作为保障网络安全的关键组件之一&#xff0c;也在不断地发展和完善。本文将探讨IP SSL证书的未来趋势&#xff0c;以及如何适应这些不断变化的安全挑战。 当前状况与挑战 网络安全意识提升&#…

ARM 裸机与 Linux 驱动对比及 Linux 内核入门

目录 ARM裸机代码和驱动的区别 Linux系统组成 内核五大功能 设备驱动分类 内核类型 驱动模块 驱动模块示例 Makefile配置 命令 编码辅助工具 内核中的打印函数 printk 函数 修改打印级别 ​编辑 打印级别含义 驱动多文件编译 示例 模块传递参数 命令行传递参数…

AND 运算符的优先级高于 OR

在 SQL 中&#xff0c;AND 运算符的优先级高于 OR。这意味着您的查询可能会不按预期执行。为了确保逻辑的正确性&#xff0c;您可能需要使用括号来明确指定运算符的优先级。 正确的&#xff1a;and后用括号把or括起来 SELECT * FROM student WHERE data_status 0 AND (name L…

python-docx 实现 Word 办公自动化

前言&#xff1a;当我们需要批量生成一些合同文件或者简历等。如果手工处理对于我们来说不仅工作量巨大&#xff0c;而且难免会出现一些问题。这个时候运用python处理word实现自动生成文件可极大的提高工作效率。 python-docx是python的第三方插件&#xff0c;用来处理word文件…

图像直方图比较

对于直方图的比较&#xff0c;我们可以使用 OpenCV 提供的函数 compareHist() 进行比较&#xff0c;从而得到一个数值&#xff0c;表示两个直方图的匹配程度&#xff08;相似性&#xff09;。 原理 对于两个直方图&#xff08; H 1 H_{1} H1​ 和 H 2 H_{2} H2​&#xff09…

【大数据】基础认知入门

目录 前言阅读对象阅读导航前置知识笔记正文一、什么是大数据1.1 定义1.2 特点1.3 数据结构1.4 补充总结 二、大数据能用来干什么2.1 应用方向2.2 应用场景&#xff08;简述&#xff09;2.3 总结 三、大数据一般性过程四、给自己的作业 感谢说在后面 前言 唉&#xff0c;最近有…

Kubectl命令、初识pod、namespace

文章目录 一、Kubectl简介基础命令1.基本信息命令2.创建和更新资源命令3.删除资源命令4. 查看日志和调试命令5. 端口转发和复制文件命令6. 部署管理命令7. 伸缩命令8. 配置和上下文管理命令9.常用命令 二、Pod简介核心概念pod常见状态调度和初始化阶段容器创建和运行阶段异常状…

Qt网络通信——TCP和UDP

一、TCP通信 TCP通信必须先建立 TCP 连接&#xff0c;通信端分为客户端和服务器端。 Qt 为服务器端提供了 QTcpServer 类用于实现端口监听&#xff0c;QTcpSocket 类则用于服务器和客户端之间建立连接。大致流程如下图所示&#xff1a; 1. 服务器端建立 1.1 监听——listen() …

PPP简介

介绍PPP特性的定义和目的。 定义 PPP&#xff08;Point-to-Point Protocol&#xff09;协议是一种点到点链路层协议&#xff0c;主要用于在全双工的同异步链路上进行点到点的数据传输。 目的 PPP协议是在串行线IP协议SLIP&#xff08;Serial Line Internet Protocol&#x…

【Android高级UI】将View或Layout裁剪为任意形状

需求 将View裁剪为指定形状 将Layout裁剪为指定形状&#xff0c;并且Children不能超过裁剪范围 应用 圆角图片异形图片圆角Layout 方案 通过ViewOutlineProvider裁剪控件范围 实现 fun View.getMeasureSize(): Size {val widthSpec View.MeasureSpec.makeMeasureSpec(…

代码随想录:动态规划6-10

62、不同路径 题目 一个机器人位于一个 m x n 网格的左上角 &#xff08;起始点在下图中标记为 “Start” &#xff09;。 机器人每次只能向下或者向右移动一步。机器人试图达到网格的右下角&#xff08;在下图中标记为 “Finish” &#xff09;。 问总共有多少条不同的路径…

Hadoop入门基础(三):Hadoop启动踩坑记录

一、机器ssh连接方式非默认22端口 报错&#xff1a; sbin/start-dfs.sh Starting namenodes on [doop253] doop253: ssh: connect to host doop253 port 22: Connection refused 解决方法&#xff1a; sudo vim /etc/ssh/ssh_config 添加如下内容&#xff08;注意替换自己服…

[Qt] 避免CMake编译的Qt程序单独运行时出现控制台窗口的解决办法

只需要在add_executable中加上WIN32即可 避免CMake编译的Qt程序单独运行时出现控制台窗口的解决办法

史上最全的软件工厂考试简答题教程

软件工程考试简答题 1. 有人认为软件开发时&#xff0c;一个错误发现得越晚&#xff0c;为改正它所付出的代价越大。提出你的观点并解释原因&#xff1f; &#xff08;1&#xff09;在软件开发的不同阶段进行修改付出的代价是很不相同的&#xff0c;在早期引入变动&#xff0c…

【Harmony OS 4.0】交互事件(手势事件)

1. 绑定手势方法 1.1 gesture&#xff08;常规手势绑定方法&#xff09; 1.2 priorityGesture&#xff08;带优先级的手势绑定方法&#xff09; 1.3 parallelGesture&#xff08;并行手势绑定方法&#xff09; 可以在父子组件上绑定。可以同时响应的相同手势。当父组件绑定了…

如何清理win备用内存?备用内存过大怎么办?

下载这个软件RamMap 运行以后 选择Empty-Empty Standby List就行了 参考&#xff1a;https://www.zhihu.com/question/263768043 另外&#xff0c;禁用服务中的SystemMain&#xff0c;应该会停止占用备用内存&#xff0c;但是需要重启。 所以没办法只好创建一个任务计划&…

openai whisper使用

whisper使用 介绍 Whisper是一种通用的语音识别模型。它是在大量不同音频数据集上训练的&#xff0c;也是一个多任务模型&#xff0c;可以执行多语言语音识别、语音翻译和语言识别。 GitHub&#xff1a;https://github.com/openai/whisper 论文链接&#xff1a;https://arx…

注册Github账号详细过程

目录 一、准备工作 二、注册步骤 一、准备工作 在注册GitHub账号之前&#xff0c;请确保您已经准备好以下信息&#xff1a; 一个有效的电子邮箱地址&#xff1a;用于接收验证邮件和GitHub的后续通知。 用户名&#xff1a;确保该用户名在GitHub上是唯一的&#xff0c;且符合…