DOM(1)

news2024/12/24 9:29:45
  1. DOM(文档对象模型):处理可扩展标记语言(HTML或XML)的标准编程接口,可以改变网页的内容、结构和样式。
  2. DOM树:                                                                                                                                  (1)文档:一个页面就是一个文档,DOM中使用document表示                                            (2)元素:页面中所有标签都是元素,DOM中使用element表示                                            (3)节点:网页中的所有内容都是节点(标签、属性、文本、注释等),DOM中使用node表示                                                                                                                                               
  3. 获取元素:                                                                                                                                 (1)根据ID获取:使用getElementById()方法获取带有ID的元素对象                                              ① 文档页面从上往下加载,所以先得有标签,因此script写在标签下面                                    ②参数 id是大小写敏感的字符串                                                                                                ③返回的是一个元素对象                                                                                                          ④console.dir打印返回的元素对象 更好的查看属性和方法                                       (2)根据标签名获取:getElementsByTagName()方法返回带有指定标签名的对象的集合               ①返回的是获取过来元素对象的集合,以伪数组形式存储的                                                     ②得到的是一个对象的集合,想要操作里面的元素需要遍历                                                     ③得到的元素对象是动态                                                                                                           ④还可以获取某个元素(父元素)内部所有指定标签名的子元素(父元素必须是单个对象(必须指明是哪个元素对象),获取时不包括父元素自己                                                                                      语法:      element.getElementsByTagName('标签名')                                     ⑤如果页面中只有一个这个元素,返回的还是伪数组的形式; 如果页面中没有这个元素,返回的是空的伪数组                                                                                                           (3)通过HTMML5新增的方法获取                                                                                                   ①语法:document.getElementsByClassName('类名');  (根据类名返回元素对象的集合)                                                                                                                                                       ②语法:document.querySelector('选择器');  (根据指定选择器返回第一个元素对象,里面选择器要加引号,类选择器'.box'、id选择器'#box'、标签选择器'li')                                     ③语法:document.querySelectorAll('选择器');  (根据指定选择器返回所有元素对象集合)                                                                                                                                         (4)获取特殊元素(body、html):                                                                                                 ①获取body元素:document.body;  (返回body元素对象)                                                     ②获取html元素:document.documentElement; (返回htmll元素对象)
  4. 事件基础:                                                                                                                                  (1)事件:触发--响应机制                                                                                                      (2)事件三要素:事件源、事件类型、事件处理程序                                                              (3)事件源:事件被触发的对象,例如按钮                                                                            (4)事件类型:如何触发,可以通过鼠标点击(onclick)、鼠标经过、键盘按下等              (5)事件处理程序:通过一个函数赋值方式完成                                                                    (6)执行事件的步骤:                                                                                                                    ①获取事件源=>注册事件(绑定事件)=>添加事件处理程序(采用函数赋值形式)        (7)常见的鼠标事件:                                                                                                                   
  5. 操作元素:                                                                                                                                 (1)改变元素内容:                                                                                                                        ①element.innerText:从起始位置到终止位置的内容,但它不识别html标签,同时空格和换行也会去除                                                                                                                                    ②element.innerHTML:起始位置到终止位置的全部内容,包括识别html标签,同时保留空格和换行                                                                                                                              (2)修改元素属性: element.属性=重新给值  (属性:src、href、id、alt、title)                (3)表单元素的属性操作:(属性:type、value、checked、selected、disabled)             (4)样式属性操作:                                                                                                                         ①element.style.属性:行内样式属性                                                                                        ②element.className:类名样式操作 (className会直接更改元素类名,覆盖原先类名,因为行内样式权重较高)                                                                                                                注:JS里面的样式采取驼峰命名法,如backgroundColor,JS修改style样式操作,产生的是行内样式的CSS权重比较高                                                                                                       注:隐藏元素:display:none    显示元素:display:block      获得焦点:onfocus      失去焦点:onblur                                                                                                                                      注:表单里面的信息通过修改value得到改变                                                                                                                                                                                                                        

                                                              

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

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

相关文章

ubuntu18 网络问题

在/etc/netplan/*.yaml配置文件中: renderer的值可以是networkd,或者是NetworkManager 它俩的其中一个区别为: networkd在图像界面,networking setting中不显示网卡配置。 版权简介: 从Ubuntu 18.04.2版本开始&…

腾讯云4核8G轻量服务器12M支持多少访客同时在线?并发数怎么算?

腾讯云轻量4核8G12M轻量应用服务器支持多少人同时在线?通用型-4核8G-180G-2000G,2000GB月流量,系统盘为180GB SSD盘,12M公网带宽,下载速度峰值为1536KB/s,即1.5M/秒,假设网站内页平均大小为60KB…

网络安全:网络攻击原理与方法.

网络安全:网络攻击原理与方法. 网络攻击:是损害网络系统安全属性的危害行为。危害行为导致网络系统的机密性、完整性、可控性、真实性、抗抵赖性等受到不同程度的破坏。 目录: 常见的危害行为有四个基本类型: 网络攻击模型&…

项目实践 | 行人跟踪与摔倒检测报警

项目实践 | 行人跟踪与摔倒检测报警 小白学视觉 7月7日 原文地址:项目实践 | 行人跟踪与摔倒检测报警 1.简介 本项目的目的是为了给大家提供跟多的实战思路,抛砖引玉为大家提供一个案例,也希望读者可以根据该方法实现更多的思想与想法&…

为什么Uber从PostgreSQL换成了MySQL

说明:本文翻译自Why Uber Engineering Switched from Postgres to MySQL 引言 Uber的早期架构包括一个用Python编写的单一后端应用程序,它使用Postgres进行数据持久化。从那时起,Uber的架构发生了重大变化,转向了微服务和新数据…

比例放大器设置接线US-DAS1/US-DAS2

US-DAS1、US-DAS2比例放大器接线定义 1 CMD 指令 2 CMD- 指令- 3/4/5 N.C. 不接 6 ENA 使能 7 VREF_5V 参考电压5V 8 VREF_0V 参考电压0V 9 SOL_A 电磁铁A 10 SOL_A- 电磁铁A- 11 PWR 电源 12 PWR- 电源- 13 SOL_B- 电磁铁B- 15 RS485_A - 16 RS485_B -

LeetCode-盛最多水的容器-11题

LeetCode-盛最多水的容器-11题 题目中要求计算最大面积,即需要选择对应的长和宽。 最终解决方法:使用对撞指针 对撞指针的概念:是指在数组的两个端引入两个指针,左指针不断向右移动,右指针不断向左移动。最终到达两个…

Spring AOP切入点表达式

先来认识两个概念吧(其实Spring AOP实现功能增强的方式就是代理模式) 目标对象(Target):原始功能去掉共性功能对应的类产生的对象,这种对象是无法直接完成最终工作的代理(Proxy):目标对象无法直接完成工作,…

【学术搬砖】第一期

“一期一会” —— 珍惜我们遇见的论文,把和每个论文的相遇,当做一种缘分。我们会定期推荐若干优质学术论文,并分享一段总结,非常欢迎提出任何建议和想法。 【NeurIPS2022】ShufflfleMixer: An Effificient ConvNet for Image Su…

R -- 时序分析

brief 横截面数据对应着某个时间点的数据。 纵向的数据对应着一系列时间点的数据&#xff0c;某个变量随着时间的变动被反复测量。 研究纵向数据&#xff0c;也许会得到“时间”的答案。 描述时间序列 生成时序对象 x <- runif(20)ts(x) ts(x,frequency 12) ts(x,frequen…

python整合Django框架初试

1.安装 以下是安装Django的步骤&#xff1a; 确认Python已经安装&#xff1a;在终端&#xff08;Mac/Linux&#xff09;或命令提示符&#xff08;Windows&#xff09;中输入python -V&#xff0c;如果出现Python版本号&#xff0c;则已经安装Python&#xff1b;如果未安装&…

Nginx配置与应用

Nginx 是开源、高性能、高可靠的 Web 和反向代理服务器&#xff0c;而且支持热部署&#xff0c;几乎可以做到 7 * 24 小时不间断运行&#xff0c;即使运行几个月也不需要重新启动&#xff0c;还能在不间断服务的情况下对软件版本进行热更新。性能是 Nginx 最重要的考量&#xf…

PCL源码剖析 -- 欧式聚类

PCL源码剖析 – 欧式聚类 参考&#xff1a; 1. pcl Euclidean Cluster Extraction教程 2. 欧式聚类分析 3. pcl-api源码 4. 点云欧式聚类 5. 本文完整工程地址 可视化结果 一. 理论 聚类方法需要将无组织的点云模型P划分为更小的部分&#xff0c;以便显著减少P的总体处理时间…

centos7.6部署ELK集群(三)之logstash7.7.0部署

32.5. 部署logstash7.7.0&#xff08;在主节点上操作&#xff09; 32.6.1. 下载logstash7.7.0 Logstash 官方下载地址&#xff1a;https://www.elastic.co/cn/downloads/logstash 32.6.2. 解压至安装目录 tar –xvf logstash-7.7.0.tar.gz -C /vmdata/ 32.6.3. 修改logstas…

逍遥自在学C语言 位运算符 “|“ 的5种高级用法

前言 在上一篇文章中&#xff0c;我们介绍了&运算符的高级用法&#xff0c;本篇文章&#xff0c;我们将介绍| 运算符的一些高级用法。 一、人物简介 第一位闪亮登场&#xff0c;有请今后会一直教我们C语言的老师 —— 自在。 第二位上场的是和我们一起学习的小白程序猿 —…

JAVA入坑之异常处理

目录 一、程序错误 二、异常 2.1概述 2.2产生原因 2.3Java 异常层次结构 Error Exception 2.3.1非受检异常 2.3.2受检异常 三、异常处理机制 3.1概述 ​编辑 调用栈Call Stack 3.2异常类型的实现 3.3异常处理的关键字&#xff1a; 3.3.1try-catch Block ​编辑 …

推荐系统概述

1.推荐系统的意义 随着移动互联网的飞速发展&#xff0c;人们已经处于一个信息过载的时代。在这个时代中&#xff0c;信息的生产者很难将信息呈现在对它们感兴趣的信息消费者面前&#xff0c;而对于信息消费者也很难从海量的信息中找到自己感兴趣的信息。推荐系统就是一个将信息…

git使用常见问题(提交代码,合并冲突)

文章目录Git提交代码步骤git pullgit statusgit addgit commitgit pushgit代码冲突合并问题方法一&#xff1a;放弃本地代码方法二&#xff1a;合并代码常用命令以及参数git add 将文件添加到仓库&#xff1a;git diff 比较文件异同git log 查看历史记录git reset 代码回滚版本…

Matlab-神经网络43个案例

神经网络简介 人工神经网络是在现代神经科学的基础上提出和发展起来的&#xff0c;旨在反映人脑结构及 功能的一种抽象数学模型。自 1943 年美国心理学家 W. McCulloch 和数学家 W. Pitts 提 出形式神经元的抽象数学模型—MP 模型以来&#xff0c;人工神经网络理论技术经过了 …

Java企业级开发学习笔记(2.1)MyBatis实现简单查询

该文章主要为完成实训任务&#xff0c;详细实现过程及结果见【http://t.csdn.cn/zi0wB】 文章目录零、创建数据库与表一、基于配置文件方式使用MyBatis基本使用1.1 创建Maven项目 - MyBatisDemo1.2 在pom文件里添加相应的依赖1.3 创建与用户表对应的用户实体类 - User1.4 创建用…