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

相关文章

Java字符串操作技巧之语法、示例与应用场景分析

《Java字符串操作技巧之语法、示例与应用场景分析》在Java算法题和日常开发中,字符串处理是必备的核心技能,本文全面梳理Java中字符串的常用操作语法,结合代码示例、应用场景和避坑指南,可快速掌握字... 目录引言1. 基础操作1.1 创建字符串1.2 获取长度1.3 访问字符2. 字符串处理2.1 子字

SpringBoot集成Milvus实现数据增删改查功能

《SpringBoot集成Milvus实现数据增删改查功能》milvus支持的语言比较多,支持python,Java,Go,node等开发语言,本文主要介绍如何使用Java语言,采用springboo... 目录1、Milvus基本概念2、添加maven依赖3、配置yml文件4、创建MilvusClient

C#TextBox设置提示文本方式(SetHintText)

《C#TextBox设置提示文本方式(SetHintText)》:本文主要介绍C#TextBox设置提示文本方式(SetHintText),具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑... 目录C#TextBox设置提示文本效果展示核心代码总结C#TextBox设置提示文本效果展示核心代

Python 中的 with open文件操作的最佳实践

《Python中的withopen文件操作的最佳实践》在Python中,withopen()提供了一个简洁而安全的方式来处理文件操作,它不仅能确保文件在操作完成后自动关闭,还能处理文件操作中的异... 目录什么是 with open()?为什么使用 with open()?使用 with open() 进行

Linux ls命令操作详解

《Linuxls命令操作详解》通过ls命令,我们可以查看指定目录下的文件和子目录,并结合不同的选项获取详细的文件信息,如权限、大小、修改时间等,:本文主要介绍Linuxls命令详解,需要的朋友可... 目录1. 命令简介2. 命令的基本语法和用法2.1 语法格式2.2 使用示例2.2.1 列出当前目录下的文

Spring Security基于数据库的ABAC属性权限模型实战开发教程

《SpringSecurity基于数据库的ABAC属性权限模型实战开发教程》:本文主要介绍SpringSecurity基于数据库的ABAC属性权限模型实战开发教程,本文给大家介绍的非常详细,对大... 目录1. 前言2. 权限决策依据RBACABAC综合对比3. 数据库表结构说明4. 实战开始5. MyBA

CSS will-change 属性示例详解

《CSSwill-change属性示例详解》will-change是一个CSS属性,用于告诉浏览器某个元素在未来可能会发生哪些变化,本文给大家介绍CSSwill-change属性详解,感... will-change 是一个 css 属性,用于告诉浏览器某个元素在未来可能会发生哪些变化。这可以帮助浏览器优化

CSS去除a标签的下划线的几种方法

《CSS去除a标签的下划线的几种方法》本文给大家分享在CSS中,去除a标签(超链接)的下划线的几种方法,本文给大家介绍的非常详细,感兴趣的朋友一起看看吧... 在 css 中,去除a标签(超链接)的下划线主要有以下几种方法:使用text-decoration属性通用选择器设置:使用a标签选择器,将tex

Java编译生成多个.class文件的原理和作用

《Java编译生成多个.class文件的原理和作用》作为一名经验丰富的开发者,在Java项目中执行编译后,可能会发现一个.java源文件有时会产生多个.class文件,从技术实现层面详细剖析这一现象... 目录一、内部类机制与.class文件生成成员内部类(常规内部类)局部内部类(方法内部类)匿名内部类二、

C#如何动态创建Label,及动态label事件

《C#如何动态创建Label,及动态label事件》:本文主要介绍C#如何动态创建Label,及动态label事件,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录C#如何动态创建Label,及动态label事件第一点:switch中的生成我们的label事件接着,