返回顶部
首页 > 资讯 > 前端开发 > VUE >JS中DOM元素有哪些
  • 242
分享到

JS中DOM元素有哪些

2024-04-02 19:04:59 242人浏览 泡泡鱼
摘要

小编给大家分享一下js中DOM元素有哪些,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!DOM  文档对象模型js有如下

小编给大家分享一下js中DOM元素有哪些,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!

DOM  文档对象模型
js有如下功能
javascript 能够改变页面中的所有 html 元素
JavaScript 能够改变页面中的所有 HTML 属性
JavaScript 能够改变页面中的所有 CSS 样式
JavaScript 能够对页面中的所有事件做出反应

(JS只能操作行内样式,不能操作内嵌样式和外部样式)
如何查找HTML元素

1:var x=document.getElementById("a");
通过ID查找元素,如果找到ID="a"的元素,就以对象x的形式返回,如果没有找到,则x为null
2:通过标签名查找元素
var x=document.getElementsByTagName("")[]
3:通过class类元素名称查找元素
var x=document.getElementsByClassName("");
4:getElementsByName() 方法可返回带有指定name的对象的集合
5
var element = document.querySelector(selectors)
返回文档中匹配指定的选择器所匹配到。其中:

selectors是一个字符串,包含一个或是多个 CSS 选择器,多个以逗号分隔
element,返回值是一个element对象(DOM元素)。当没有返回值时,则返回null

6:
var elementList = document.querySelectorAll(selectors);
selectors是一个字符串,包含一个或是多个 CSS 选择器,多个以逗号分隔
elementList,返回值是一个nodeList元素列表。

属性操作
getAttribute:语法:元素节点.getAttribute(元素属性名),功能获取元素节点中指定属性属性值
setAttribute:语法:元素节点.setAttribute(元素属性名),功能创建或者改变元素节点的属性
removeAttribute:语法:removeAttribute(元素属性名),功能删除元素中指定元素
DOM改变HTML元素
document.write直接向HTML输出内容
改变HTML内容  innerHTML ,innertext。二者区别innerHTML可以解析标签,而innertext不能,如果所选节点内部有标签就会直接将其输出
DOM事件(添加方式,可以直接添加到行内事件,还可以用事件处理器调用一个函数)
当用户点击鼠标时  onclick'
onchange 事件
onload 和 onunload 事件会在用户进入或离开页面时被触发,onload 事件可用于检测访问者的浏览器类型和浏览器版本,并基于这些信息来加载网页的正确版本。
onmouseover 和 onmouseout 事件可用于在用户的鼠标移至 HTML 元素上方或移出元素时触发函数。
onmousedown, onmouseup 以及 onclick 构成了鼠标点击事件的所有部分。首先当点击鼠标按钮时,会触发 onmousedown 事件,当释放鼠标按钮时,会触发 onmouseup 事件,最后,当完成鼠标点击时,会触发 onclick 事件。
监听事件:
例如点击按钮时候触动:
element.addEventListener(event, function, useCapture);
第一个参数是事件的类型 (如 "click" 或 "mousedown").
第二个参数是事件触发后调用的函数。
第三个参数是个布尔值用于描述事件是冒泡还是捕获。

冒泡和捕获
在div中插入p元素,给p元素一个点击事件,如果是冒泡,会从内部向外触发,先触发p元素,然后再触发div元素
如果是捕获,就会先触发外部元素,然后再触发内部元素。点击p就会先触发div再触发p元素
默认值为false时,就会触发冒泡事件 默认值为true时,会触发捕获事件

以上是“JS中DOM元素有哪些”这篇文章的所有内容,感谢各位的阅读!相信大家都有了一定的了解,希望分享的内容对大家有所帮助,如果还想学习更多知识,欢迎关注编程网VUE频道!

--结束END--

本文标题: JS中DOM元素有哪些

本文链接: https://lsjlt.com/news/83643.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

猜你喜欢
  • JS中DOM元素有哪些
    小编给大家分享一下JS中DOM元素有哪些,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!DOM  文档对象模型js有如下...
    99+
    2024-04-02
  • Vue中获取DOM元素的方法有哪些
    本文小编为大家详细介绍“Vue中获取DOM元素的方法有哪些”,内容详细,步骤清晰,细节处理妥当,希望这篇“Vue中获取DOM元素的方法有哪些”文章能帮助大家解决疑惑,下面跟着小编的思路慢慢深入,一起来学习新知识吧。一、通过 $refs 获取...
    99+
    2023-07-05
  • Dom节点vs元素有哪些区别
    这篇文章主要介绍Dom节点vs元素有哪些区别,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!文档对象模型(DOM)是一个将HTML或XML文档视为树形结构的接口,其中每个节点都是文档的一个对象。DOM还提供了一组方法来...
    99+
    2023-06-15
  • js中怎么实现遍历dom元素
    小编给大家分享一下js中怎么实现遍历dom元素,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!javascript是一种什么语言javascript是一种动态类型、...
    99+
    2023-06-14
  • js中dom和bom有哪些区别
    这篇文章给大家分享的是有关js中dom和bom有哪些区别的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。JavaScript的特点1.JavaScript主要用来向HTML页面添加交互行为。2.JavaScript...
    99+
    2023-06-14
  • js获取html的元素方法有哪些
    JavaScript获取HTML元素的方法有以下几种:1. getElementById():通过元素的id属性获取元素。例如:do...
    99+
    2023-08-09
    js html
  • html有哪些元素有哪些
    HTML是一种标记语言,用于创建网络页面。HTML包含很多元素,这些元素可以帮助开发人员创建出具有结构和样式的页面。在此,我们将介绍一些常用的HTML元素。标题(element h1 ~ h6)标题元素用于定义页面中的标题。h1标记表示最高...
    99+
    2023-05-21
  • HTML元素有哪些
    这篇文章主要介绍“HTML元素有哪些”,在日常操作中,相信很多人在HTML元素有哪些问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”HTML元素有哪些”的疑惑有所帮助!接下来,...
    99+
    2024-04-02
  • HTML有哪些元素
    这篇文章主要讲解了“HTML有哪些元素”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“HTML有哪些元素”吧!Audio标签可以播放一个音频,例如音乐或其他音...
    99+
    2024-04-02
  • canvas 元素有哪些
    canvas元素有矩形、圆形、直线、路径、文本、图像等。详细介绍:1、矩形,使用矩形元素绘制矩形,通过设置矩形的位置、宽度和高度来绘制;2、圆形,使用圆形元素绘制圆形,通过设置圆形的中心点坐标和半径来绘制;3、直线,使用直线元素绘制直线,通...
    99+
    2023-08-18
  • html中有哪些行内元素和块状元素
    这篇文章将为大家详细讲解有关html中有哪些行内元素和块状元素,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。html行内元素有:a、b、br、code、em、font、i、img、input、span、s...
    99+
    2023-06-06
  • JS删除数组中某个元素的方式有哪些
    本篇内容主要讲解“JS删除数组中某个元素的方式有哪些”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“JS删除数组中某个元素的方式有哪些”吧!第一种:删除最后一个元素slice 删除 va...
    99+
    2023-07-05
  • HTML中内联元素有哪些
    这篇文章给大家分享的是有关HTML中内联元素有哪些的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。   内联元素(html规范中的概念)英文:inline element,其中文...
    99+
    2024-04-02
  • html5中有哪些布局元素
    小编给大家分享一下html5中有哪些布局元素,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!html5布局元素有:1、header...
    99+
    2024-04-02
  • html中有哪些行内元素
    html中有哪些行内元素?相信很多没有经验的人对此束手无策,为此本文总结了问题出现的原因和解决方法,通过这篇文章希望你能解决这个问题。html行内元素有:a、b、u、span、img、input、strong、select、sub、sup、...
    99+
    2023-06-14
  • 怎么在JS中改变DOM元素的文本内容
    这篇文章主要介绍怎么在JS中改变DOM元素的文本内容,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!HTML表单内容:<!DOCTYPE html><html lang="...
    99+
    2023-06-14
  • DOM中如何获取元素
    这篇文章将为大家详细讲解有关DOM中如何获取元素,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。概述DOM (Document objectModal) :文档对象模型。DOM:是浏览器提供的(浏览器特有)...
    99+
    2023-06-27
  • 有哪些html行元素
    这篇文章主要讲解了“有哪些html行元素”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“有哪些html行元素”吧! html行元素...
    99+
    2024-04-02
  • HTML块元素有哪些
    这篇文章主要介绍了HTML块元素有哪些,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。 大多数 HTML 元素被定义为块级元素或内联元素;...
    99+
    2024-04-02
  • HTML的元素有哪些
    本文小编为大家详细介绍“HTML的元素有哪些”,内容详细,步骤清晰,细节处理妥当,希望这篇“HTML的元素有哪些”文章能帮助大家解决疑惑,下面跟着小编的思路慢慢深入,一起来学习新知识吧。<html&g...
    99+
    2024-04-02
软考高级职称资格查询
推荐阅读
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作