javaScript:DOM元素的获取(静态/动态获取)

这篇具有很好参考价值的文章主要介绍了javaScript:DOM元素的获取(静态/动态获取)。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

目录

一.dom元素获取的意义与使用场景 

使用场景(绝大多数js操作都需要dom操作)

总结/疑问解答! 

二.DOM元素获取的常用方法(重点)

获取dom元素(动态)

document.gerElementbyId()

document.gerElementsBytagName()

document.gerElementsByclassName()

document.gerElementsByname()通过name属性查找元素

获取dom元素(静态)

1.querySelector(css选择器) 新方法,ie低版本不支持,返回的是符合选择器的第一个元素对象

2.querySelectorAll(css选择器) 返回的是符合选择器的所有元素对象

3.特点(重点)

4.注意

静态和动态的区别

相关代码


一.dom元素获取的意义与使用场景 

DOM 元素获取在 JavaScript 中具有重要的意义和作用。它使我们能够动态地与网页中的元素进行交互,并根据用户的操作或特定的逻辑来修改页面的外观和行为。

作用/意义(了解即可)

  1. 操作和修改元素内容:通过获取 DOM 元素,我们可以修改元素的文本内容、HTML 结构或其他属性。这使得我们可以根据需要动态地修改页面,例如更新文本、插入新的元素或更新图片等。
  2. 添加和删除元素:通过获取 DOM 元素及其父元素,我们可以动态地添加新的元素到页面中,或删除现有的元素。这对于创建动态内容、响应用户操作或实现交互性的网页非常有用。
  3. 修改元素样式:通过获取 DOM 元素的引用,我们可以修改元素的 CSS 样式,包括颜色、尺寸、位置等。这使得我们可以根据特定条件或用户操作来改变元素的外观,从而实现更好的用户体验或动态效果。
  4. 添加事件监听器:通过获取 DOM 元素,我们可以为元素添加事件监听器,以便在用户执行特定操作时触发相应的 JavaScript 代码。这使我们能够实现响应式的交互,并处理用户的点击、鼠标移动、键盘输入等事件

使用场景(绝大多数js操作都需要dom操作)

  • 动态网页:当需要根据用户的操作或特定的逻辑来动态更新网页内容或行为时,DOM 元素获取非常有用。例如,表单验证、菜单导航、动画效果等。
  • 单页应用程序(SPA):在使用 JavaScript 框架(如React、Angular、Vue.js)开发单页应用程序时,通过获取 DOM 元素来操作和更新页面是必要的。例如,根据路由切换组件、更新数据、渲染视图等。
  • 动态表单验证:当需要验证表单输入的有效性,并基于验证结果提示用户时,通过获取 DOM 元素来检索表单字段,并应用相应的验证逻辑非常有用。
  • 注意DOM 元素获取是一项强大的功能,但在处理大量元素时可能会影响性能。因此,在使用过程中要注意使用正确的选择器,并避免不必要的DOM操作,以提高网页的性能和响应速度。

总结/疑问解答! 

   dom操作其实在前面的文章中已经用到很多次了,但是一直没有系统性的总结,接下来的几篇文章,主要来总结dom操作以及dom操作相关的案例(小游戏),比如说:选字游戏,连连看,打地鼠,多球碰撞,随机抽签,无缝轮播,原生js绘制时钟等等。

二.DOM元素获取的常用方法(重点)

获取dom元素(动态)

获取dom元素

document.gerElementbyId()

document.gerElementsBytagName()

document.gerElementsByclassName()

document.gerElementsByname()通过name属性查找元素

ie下只针对于input元素起作用

在标准浏览器下,可以适用于任何标签

注意:gerElementsByname()的调用对象只能是 document

以上几种方法在前面的文章中都有讲到,所有在这里面不做过多的讲述,详情可以翻阅往期的笔记。下面是文章链接javaScript:如何获取html中的元素对象_js 获取html对象_小姚学前端的博客-CSDN博客

获取dom元素(静态)

1.querySelector(css选择器) 新方法,ie低版本不支持,返回的是符合选择器的第一个元素对象

 let age = document.querySelector('input[name="age"]')  //里面是属性选择器
   console.log(age);
 //通过id名获取
   let cao = document.querySelector('#cao')
   console.log(cao);

2.querySelectorAll(css选择器) 返回的是符合选择器的所有元素对象

//获取所有的div
   let divs = document.querySelectorAll('div')
   console.log(divs);
    //通过类名获取
   let qiao = document.querySelectorAll('.qiao')
   console.log(qiao);
   //同时使用多个选择器
   let ele = document.querySelectorAll('input,div')
   console.log(ele);
   //选择所有的li元素
   let lis = document.querySelectorAll('li')
   console.log(lis);
   //获取list1下面所有的li元素
   let lis1 = document.querySelectorAll('#list1>li')
   console.log(lis1);

3.特点(重点)

特点:

    1.传入的参数是选择器,通过选择器检索出具体元素

    2.他的调用对象只能是 document

    3.querySelector(css选择器) === querySelectorAll(css选择器)[0]

    4.都支持多个选择器,如果使用多个选择器, 用逗号分开

4.注意

以上两个方法是静态方法,所有选择器都支持   

静态和动态的区别

       动态获取的元素集合在以后的操作中随着操作的增删和修改而改变,静态获取的元素

集合,不会随着以后的操作而改变

   //静态和动态的区别
   let list1 =document.getElementById('list1')
   //创建一个li标签
   let cli = document.createElement('li')
   //使用标签名获取li标签,动态方法
   let myLi = document.getElementsByTagName('li')
   //使用静态方法获取li标签
   let ulSon = document.querySelectorAll('li')
   //给创建的标签添加字符串
   cli.innerHTML = '桃树';
   //把创建的标签添加到html
   list1.appendChild(cli);
   console.log(myLi,ulSon); //输出后的结果,动态的包含新创建的标签,静态的不包含

javaScript:DOM元素的获取(静态/动态获取),javascript,javascript,开发语言,ecmascript文章来源地址https://www.toymoban.com/news/detail-708735.html

相关代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>获取dom元素</title>
</head>
<body>
    <input type="text" name="user" placeholder="输入用户名" ><br>
    <input type="text" name="age" placeholder="输入用户年龄" ><br>
     <div name="user">不许玩原神</div>

     <div class="qiao" id="cao">铜雀春深锁二乔</div>
     <div class="qiao">小荷才露尖尖角</div>

     <ul id="list1">
        <li>松树</li>
        <li>杨树</li>
        <li>梧桐树</li>
        <li>石榴树</li>
        <li>梨树</li>
     </ul>
     <ul id="list2">
        <li>松树2</li>
        <li>杨树2</li>
        <li>梧桐树2</li>
        <li>石榴树2</li>
        <li>梨树2</li>
     </ul>
</body>
</html>
<script>
    /*
    获取dom元素
    document.gerElementbyId()
    document.gerElementsBytagName()
    document.gerElementsByclassName()

    document.gerElementsByname()通过name属性查找元素
    ie下只针对于input元素起作用
    在标准浏览器下,可以适用于任何标签
    注意:gerElementsByname()的调用对象只能是 document

    以上4个方法都是 动态方法

    querySelector(css选择器) 新方法,ie低版本不支持,返回的是符合选择器的
    第一个元素对象
    querySelectorAll(css选择器) 返回的是符合选择器的所有元素对象

    以上两个方法是静态方法,所有选择器都支持
     
    特点:
    1.传入的参数是选择器,通过选择器检索出具体元素
    2.他的调用对象只能是 document
    3.querySelector(css选择器) === querySelectorAll(css选择器)[0]
    4.都支持多个选择器,如果使用多个选择器, 用逗号分开

    静态和动态的区别
    动态获取的元素集合在以后的操作中随着操作的增删和修改而改变,静态获取的元素
    集合,不会随着以后的操作而改变
    */
   let user = document.getElementsByName('user')
   console.log(user);

   let age = document.querySelector('input[name="age"]')  //里面是属性选择器
   console.log(age);

   let inputs = document.querySelector('input')
   console.log(inputs);
   
   //获取所有的div
   let divs = document.querySelectorAll('div')
   console.log(divs);
    //通过类名获取
   let qiao = document.querySelectorAll('.qiao')
   console.log(qiao);
   //通过id名获取
   let cao = document.querySelector('#cao')
   console.log(cao);

   //同时使用多个选择器
   let ele = document.querySelectorAll('input,div')
   console.log(ele);
   
   //选择所有的li元素
   let lis = document.querySelectorAll('li')
   console.log(lis);
   //获取list1下面所有的li元素
   let lis1 = document.querySelectorAll('#list1>li')
   console.log(lis1);

   let myLi = document.getElementsByTagName('li')
   console.log(myLi);

   let ulSon = document.querySelectorAll('li')
//    ulSon[0].className='abc'
   myLi[0].className='abc'

   //静态和动态的区别
   let list1 =document.getElementById('list1')
   let cli = document.createElement('li')
   cli.innerHTML = '桃树';
   list1.appendChild(cli);
   console.log(myLi,ulSon);

</script>

到了这里,关于javaScript:DOM元素的获取(静态/动态获取)的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • JS javascript 点击鼠标 鼠标事件 获取元素 获取元素Xpath

    js代码,鼠标在页面点击时,记录元素的Xpath 代码:  

    2024年02月15日
    浏览(47)
  • javaScript与vue获取元素的方法

    目录 javaScript 1 根据ID获取 2 根据标签名获取 3 通过HTML5新增的方法获取 vue获取元素及兄弟元素,父级元素 get 获得 element 元素 by 通过 返回的是一个元素对象 document.getElementById(\\\'ID\\\'); get 获得 element 元素 by 通过 Tag标签 Name名字 返回带有指定标签名的对象的集合 以伪数组的形式

    2024年02月08日
    浏览(42)
  • javaScript:如何获取html中的元素对象

    目录 前言: 方法 1.通过id获取元素 2.通过标签名获取元素 3.通过类名class获取元素  获取body的方法 1.document.getElementsByTagName(\\\'body\\\')[0] 2.document.body 相关代码          通过获取HTML中的元素对象,JavaScript可以对网页进行动态交互、更新、响应用户操作、处理表单数据、动态加载

    2024年02月13日
    浏览(41)
  • JavaScript 中获取数组最后一个元素3种方法及性能

    当需要从 JavaScript 中的数组中获取最后一个元素时,有多种选择,本文将提供 3 种可用方法。 1. 数组 length 属性 length 属性返回数组中元素的数量。从数组的长度中减去 1 得到数组最后一个元素的索引,使用它可以访问最后一个元素。从长度中减去 1 的原因是,在 JavaScript 中

    2024年02月06日
    浏览(50)
  • JavaScript基础(27)_内联样式的获取和修改、获取元素当前显示的样式

    内联样式的获取和修改 获取元素的内联样式: 修改元素的内联样式: 注意: 1、如果CSS的样式名中含有-,这种名称在JS中是不合法的,会被认为是运算符-,因此,需要将这种样式名修改为 驼峰命名法 ,去掉-,然后将-后的字母 大写 。 2、内联样式有较高的优先级,所以通

    2024年01月18日
    浏览(50)
  • JS中常用的的选择器,JavaScript获取HTML标签元素

    getElementById是JavaScript中的一个DOM方法,用于根据元素的id属性获取HTML文档中的元素。该方法接受一个字符串参数,即元素的id属性值,并返回具有该id属性值的元素。如果没有找到匹配的元素,则返回null。 以下是一个示例,演示如何使用getElementById获取页面中的元素: 在这个

    2024年02月04日
    浏览(55)
  • 一文读懂JavaScript DOM节点操作(JavaScript DOM节点操作详解)

    一、什么是节点 DOM模型是树状结构模型,二组成这棵树的就是一个个点,在网络术语中称之为节点。 节点是一个模型中最基本的组成单位。DOM模型是由一个个节点组成的,DOM节点也有其不同的类型。 二、节点类型 DOM节点分为5种类型: 文档节点(就是整个HTML文档,也就是

    2024年01月22日
    浏览(46)
  • 什么是DOM?(JavaScript DOM是什么?)

    1、DOM简洁 W3C DOM标准被分为三个不同的部分: 核心DOM:针对任何结构化文档的标准模型 XML DOM:针对XML文档的标准模型 HTML DOM:针对HTML文档的标准模型 DOM的设计是以对象管理组织(OMG)的规约为基础的,可以用于任何编程语言,DOM以基于对象的方式来描述整个文档,让我们

    2024年01月20日
    浏览(33)
  • 【javaScript】DOM编程入门

    概念:DOM(Document Object Model)编程就是使用document对象的API完成对网页HTML文档进行动态修改,以实现网页数据和样式动态变化的编程 为什么要由DOM编程来动态修改呢?我们就得先理解网页的运行原理: 如上图,程序员编写的html文件存储在服务器端,而用户使用的浏览器则由u

    2024年04月09日
    浏览(34)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包