dom-标签查找、属性文本操作、class\style操作、事件、标签增删改查

2024-08-31 22:32

本文主要是介绍dom-标签查找、属性文本操作、class\style操作、事件、标签增删改查,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

      • window对象
      • dom标签查找
      • 属性-文本节点操作
      • 操作class和style
      • 事件
      • 文档节点的增删改查

window对象

alert()            显示带有一段消息和一个确认按钮的警告框。
setInterval()      按照指定的周期(以毫秒计)来调用函数或计算表达式。
clearInterval()    取消由 setInterval() 设置的 timeoutsetTimeout()       在指定的毫秒数后调用函数或计算表达式。
clearTimeout()     取消由 setTimeout() 方法设置的 timeoutscrollTo()         把内容滚动到指定的坐标。confirm()          显示带有一段消息以及确认按钮和取消按钮的对话框。
prompt()           显示可提示用户输入的对话框。
open()             打开一个新的浏览器窗口或查找一个已命名的窗口。
close()            关闭浏览器窗口。

跑马灯效果

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>跑马灯示例</title><script>function run() {// 找到id值为i1的标签var ele = document.getElementById("i1");// 获取标签的文本内容,存到str变量var str = ele.innerText;// 把字符串第一位拿出来var firstStr = str.charAt(0);// 拼到最后组成新的字符串var newText = str.slice(1) + firstStr;// 赋值给标签的文本内容ele.innerText = newText;}var timmer = setInterval(run, 500);clearInterval(timmer);</script>
</head>
<body><h1 id="i1">课不翻车!哪吒老师讲</h1>
</body>
</html>

history对象

history.forward()  // 前进一页
history.back()  // 后退一页
history.go(n)  //  前进n页

location对象

location.href  获取URL
location.href="URL" // 跳转到指定页面
location.reload() 重新加载页面

dom标签查找

DOM标准规定HTML文档中的每个成分都是一个节点(node):

文档节点(document对象):代表整个文档
元素节点(element 对象):代表一个元素(标签)
文本节点(text对象):代表元素(标签)中的文本
属性节点(attribute对象):代表一个属性,元素(标签)才有属性
注释是注释节点(comment对象)

查找标签

document.getElementById                根据ID获取一个标签
document.getElementsByName         根据name属性获取标签集合
document.getElementsByClassName 根据class属性获取
document.getElementsByTagName    根据标签名获取标签合集

间接查找

parentElement 父节点标签元素
children  所有子标签
firstElementChild  第一个子标签元素
lastElementChild  最后一个子标签元素
nextElementSibling  下一个兄弟标签元素
previousElementSibling  上一个兄弟标签元素
// 注意节点和标签的区别,主要记上面的
parentNode  父节点
childNodes  所有子节点
firstChild  第一个子节点
lastChild  最后一个子节点
nextSibling 下一个兄弟节点
previousSibling  上一个兄弟节点

属性-文本节点操作

属性节点

attributes  获取所有标签属性
getAttribute()  获取指定标签属性
setAttribute()  设置指定标签属
removeAttribute() 移除指定标签属var s = document.createAttribute("age")
s.nodeValue = "18"
创建age属性,设置属性值为18
<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><style type="text/css">.democlass {color: red;}</style>
</head>
<body><h1>Hello World</h1>
<p id="demo">单击按钮来创建一个“类”属性值“democlass”插入到上面的H1元素。</p>
<button onclick="myFunction()">点我</button>
<script>function myFunction() {var h1 = document.getElementsByTagName("H1")[0];var att = document.createAttribute("class");att.nodeValue = "democlass"h1.setAttributeNode(att);}
</script></body>
</html>

文本节点
这里写图片描述

操作class和style

操作class类

className  获取所有样式类名(字符串)
.classList 获取所有样式类名
classList.remove(cls)  删除指定类
classList.add(cls)  添加类
classList.contains(cls)  存在返回true,否则返回false
classList.toggle(cls)  存在就删除,否则添加
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>class属性操作</title><style>.c1 {height: 300px;width: 300px;border-radius: 150px;background-color: red;}.c2 {background-color: yellow;}</style><script>function change() {// 找标签,改背景颜色var d1 = document.getElementById("d1");console.log(d1.className)d1.classList.toggle("c2");}</script>
</head>
<body><div id="d1" class="c1"></div>
<input type="button" value="切换" onclick="change();"></body>
</html>

指定CSS操作
JS操作CSS属性的规律:

obj.style.backgroundColor="red"

1.对于没有中横线的CSS属性一般直接使用style.属性名即可。如:


obj.style.margin
obj.style.width
obj.style.left
obj.style.position

2.对含有中横线的CSS属性,将中横线后面的第一个字母换成大写即可。如:

obj.style.marginTop
obj.style.borderLeftWidth
obj.style.zIndex
obj.style.fontFamily

事件

onclick        当用户点击某个对象时调用的事件句柄。
ondblclick     当用户双击某个对象时调用的事件句柄。onfocus        元素获得焦点。               //练习:输入框
onblur         元素失去焦点。               应用场景:用于表单验证,用户离开某个输入框时,代表已经输入完了,我们可以对它进行验证.
onchange       域的内容被改变。             应用场景:通常用于表单元素,当元素内容被改变时触发.(三级联动)onkeydown      某个键盘按键被按下。          应用场景: 当用户在最后一个输入框按下回车按键时,表单提交.
onkeypress     某个键盘按键被按下并松开。
onkeyup        某个键盘按键被松开。
onload         一张页面或一幅图像完成加载。
onmousedown    鼠标按钮被按下。
onmousemove    鼠标被移动。
onmouseout     鼠标从某元素移开。
onmouseover    鼠标移到某元素之上。
onmouseleave   鼠标从元素离开onselect      文本被选中。
onsubmit      确认按钮被点击。

文档节点的增删改查

createElement(name)  创建节点(标签)
appendChild() 末尾添加节点,并返回新增节点
insertBefore()  参照节点之前插入节点,两个参数:要插入的节点和参照节点
insertAfter()  参照节点之后插入节点,两个参数:要插入的节点和参照节点删查找到要删除的元素
获取它的父元素
使用removeChild()方法删除改第一种方式:使用上面增和删结合完成修改第二种方式:使用setAttribute();方法修改属性          使用innerHTML属性修改元素的内容查使用之前介绍的方法.

这篇关于dom-标签查找、属性文本操作、class\style操作、事件、标签增删改查的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/1125169

相关文章

C# WinForms存储过程操作数据库的实例讲解

《C#WinForms存储过程操作数据库的实例讲解》:本文主要介绍C#WinForms存储过程操作数据库的实例,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录一、存储过程基础二、C# 调用流程1. 数据库连接配置2. 执行存储过程(增删改)3. 查询数据三、事务处

Java使用Curator进行ZooKeeper操作的详细教程

《Java使用Curator进行ZooKeeper操作的详细教程》ApacheCurator是一个基于ZooKeeper的Java客户端库,它极大地简化了使用ZooKeeper的开发工作,在分布式系统... 目录1、简述2、核心功能2.1 CuratorFramework2.2 Recipes3、示例实践3

Java利用JSONPath操作JSON数据的技术指南

《Java利用JSONPath操作JSON数据的技术指南》JSONPath是一种强大的工具,用于查询和操作JSON数据,类似于SQL的语法,它为处理复杂的JSON数据结构提供了简单且高效... 目录1、简述2、什么是 jsONPath?3、Java 示例3.1 基本查询3.2 过滤查询3.3 递归搜索3.4

Python使用DrissionPage中ChromiumPage进行自动化网页操作

《Python使用DrissionPage中ChromiumPage进行自动化网页操作》DrissionPage作为一款轻量级且功能强大的浏览器自动化库,为开发者提供了丰富的功能支持,本文将使用Dri... 目录前言一、ChromiumPage基础操作1.初始化Drission 和 ChromiumPage

使用Python实现文本转语音(TTS)并播放音频

《使用Python实现文本转语音(TTS)并播放音频》在开发涉及语音交互或需要语音提示的应用时,文本转语音(TTS)技术是一个非常实用的工具,下面我们来看看如何使用gTTS和playsound库将文本... 目录什么是 gTTS 和 playsound安装依赖库实现步骤 1. 导入库2. 定义文本和语言 3

利用Go语言开发文件操作工具轻松处理所有文件

《利用Go语言开发文件操作工具轻松处理所有文件》在后端开发中,文件操作是一个非常常见但又容易出错的场景,本文小编要向大家介绍一个强大的Go语言文件操作工具库,它能帮你轻松处理各种文件操作场景... 目录为什么需要这个工具?核心功能详解1. 文件/目录存javascript在性检查2. 批量创建目录3. 文件

Redis中管道操作pipeline的实现

《Redis中管道操作pipeline的实现》RedisPipeline是一种优化客户端与服务器通信的技术,通过批量发送和接收命令减少网络往返次数,提高命令执行效率,本文就来介绍一下Redis中管道操... 目录什么是pipeline场景一:我要向Redis新增大批量的数据分批处理事务( MULTI/EXE

Python实现常用文本内容提取

《Python实现常用文本内容提取》在日常工作和学习中,我们经常需要从PDF、Word文档中提取文本,本文将介绍如何使用Python编写一个文本内容提取工具,有需要的小伙伴可以参考下... 目录一、引言二、文本内容提取的原理三、文本内容提取的设计四、文本内容提取的实现五、完整代码示例一、引言在日常工作和学

使用Python高效获取网络数据的操作指南

《使用Python高效获取网络数据的操作指南》网络爬虫是一种自动化程序,用于访问和提取网站上的数据,Python是进行网络爬虫开发的理想语言,拥有丰富的库和工具,使得编写和维护爬虫变得简单高效,本文将... 目录网络爬虫的基本概念常用库介绍安装库Requests和BeautifulSoup爬虫开发发送请求解

Oracle存储过程里操作BLOB的字节数据的办法

《Oracle存储过程里操作BLOB的字节数据的办法》该篇文章介绍了如何在Oracle存储过程中操作BLOB的字节数据,作者研究了如何获取BLOB的字节长度、如何使用DBMS_LOB包进行BLOB操作... 目录一、缘由二、办法2.1 基本操作2.2 DBMS_LOB包2.3 字节级操作与RAW数据类型2.