1 - 直接查找标签

// 方式1:获取元素
document.getElementsByTagName("标签名") document.getElementById("id值") document.getElementsByClassName("类名")


// 方式2:css选择器:
document.querySelector("css选择器") // 根据css选择符来获取查找到的第一个元素,返回标签对象(dom对象)
document.querySelectorAll("css选择器"); // 根据css选择符来获取查找到的所有元素,返回数组

2 - 导航查找标签

elementNode.parentElement           // 父节点标签元素

elementNode.children                // 所有子标签

elementNode.firstElementChild       // 第一个子标签元素

elementNode.lastElementChild        // 最后一个子标签元素

elementNode.nextElementtSibling     // 下一个兄弟标签元素

elementNode.previousElementSibling  // 上一个兄弟标签元素

JS_DOM操作之查找标签的更多相关文章

  1. 6、前端--DOM操作(查找标签、节点操作、获取值操作、class操作、样式操作、绑定事件、内置参数this)

    DOM操作之查找标签 前缀关键字>>>:document # 基本查找(核心) document.getElementById 根据ID获取一个标签 document.getElem ...

  2. Dom,查找标签和操作标签

    Dom,查找标签和操作标签 文档对象模型(Document Object Model,DOM)是一种用于HTML和XML文档的编程接口.它给文档提供了一种结构化的表示方法,可以改变文档的内容和呈现方式 ...

  3. JS BOM DOM对象 select联动 计时器 时间 css操作 节点(标签 ) 查找标签 {前端基础之BOM和DOM}

    前端基础之BOM和DOM 前戏 到目前为止,我们已经学过了JavaScript的一些简单的语法.但是这些简单的语法,并没有和浏览器有任何交互. 也就是我们还不能制作一些我们经常看到的网页的一些交互,我 ...

  4. DOM对象之查找标签&属性操作

    HTML DOM (文档对象模型) DOM(Document Object Model)是一套对文档的内容进行抽象和概念化的方法. JavaScript对DOM进行了实现,对应于JavaScript中 ...

  5. DOM标签操作与事件与jQuery查找标签

    目录 DOM之操作标签 创建标签对象 标签对象的属性 innerText与innerHTML 标签内部追加内容 属性操作 事件 常用事件 事件绑定 事件案例 jQuery简介 查找标签 基本选择器 属 ...

  6. jQuery查找标签--选择器,筛选器,模态对话框, 左侧菜单栏

    查找标签 选择器: 基本选择器(同css) id选择器 $("#id") 标签选择器 $('tagName') class选择器 $(".className") ...

  7. Dom对象总结介绍&事件介绍&增删查找标签

    1.dom有5个属性,属性内容如下 下面开始介绍Dom属性,一共有5个属性 1.document object:文档对象 2.element object:标签对象 3.test object:文本对 ...

  8. selenium常用操作,查找元素,操作Cookie,获取截图,获取窗口信息,切换,执行js代码

    目录: 1. 常用操作 2. 查找元素 3. 操作Cookie 4. 获取截图 5. 获取窗口信息 6. 切换 7. 执行JS代码 简介 selenium.webdriver.remote.webdr ...

  9. js数组操作find查找特定值结合es6特性

    js数组操作find查找特定值结合es6特性

随机推荐

  1. .net core连接Liunx上MS SQL Server

    场景 由于业务要求,需要对甲方的一个在SQL Server上的财务表进行插入操作.研究了半天,因为一个小问题折腾了很久. 过程 .net core端: 1. 利用EF,就需要的导入相关的Nuget包, ...

  2. Mybatis学习笔记导航

    Mybatis小白快速入门 简介 本人是一个Java学习者,最近才开始在博客园上分享自己的学习经验,同时帮助那些想要学习的uu们,相关学习视频在小破站的狂神说,狂神真的是我学习到现在觉得最GAN的老师 ...

  3. 一、Ocelot简单概述

    以下只是本人学习过程的整理 Ocelot官网:http://threemammals.com/ocelot 说明文档:https://ocelot.readthedocs.io/en/latest/ ...

  4. 给 Arm 生态添把火,腾讯 Kona JDK Arm 架构优化实践

    前言 Arm 架构以其兼具性能与功耗的特点,在智能终端以及嵌入式领域得到了广泛的使用,不断扩大其影响力.而在 PC 端以及数据中心,之前往往是 x86 架构在其中发挥着主要的作用.最近,随着人工智能. ...

  5. Mybatis源码解析2—— 实例搭建

    大家好,我是可乐. 上篇文章给大家撸了一遍用 JDBC 直接操作数据库的实例,还只是简单写了一个查询的接口,其代码量就已经很大了,并且可乐还给大家分析了直接使用 JDBC 带来的一些问题,总之是一种反 ...

  6. Golang语言系列-10-包

    包 自定义包 package _0calc import ( "fmt" ) /* [Go语言的包] 在工程化的Go语言开发项目中,Go语言的源码复用是建立在包(package)基 ...

  7. moco模拟接口具体操作

    1.get请求 [ { "description": "模拟一个没有参数的get请求", "request": { "uri&qu ...

  8. 手把手和你一起实现一个Web框架实战——EzWeb框架(三)[Go语言笔记]Go项目实战

    手把手和你一起实现一个Web框架实战--EzWeb框架(三)[Go语言笔记]Go项目实战 代码仓库: github gitee 中文注释,非常详尽,可以配合食用 本篇代码,请选择demo3 这一篇文章 ...

  9. DHCP服务-自动管理IP地址和分配固定IP

    dhcp服务 端口:67 配置文件:/etc/dhcp/dhcpd.conf 自动分配IP: 一. 安装服务:yum install dhcp 安装过程省略 二.首先,看到配置文件中啥也没有,他的配置 ...

  10. Pytest-Allure报告的Logo的完美定制

    --本次需求:如何把生成的pytest-allure报告的logo修改成自定义的logo? --步骤如下: --1.找到本地电脑安装的allure-2.13.2路径E:\allure-2.13.2\p ...