html中如何找到成对标签,操作html标签之找到标签

引入

丰富多彩的html标签构成了网页。例如p,div,li,ul,a......……。它们都有自己默认的样式，且各不一样，例如h1标签就比p标签的margin要大一些。我们学习css的目的是为了改变它们自己的默认样式，而按我们自己通过css代码设置的样式去呈现出来。

那我们学习js的目的是什么呢？两个字 “交互“。谁与谁交互？html页面与用户进行交互。例如：当我们把鼠标移动到某个标签上时，让他突出显示；当我们把鼠标从注册的表单中的文本框上移出时，提示我们两次输入的密码不一致；等等。当然，通过js我们还可以做让用户操作起来更方便，或者让页面显示起来更漂亮的事情。

这一切的提前是：我们要能够操作html标签。

1.找到我们想要的标签：一切工作的开始。

方法一：给这个元素添加一个id，然后调用document.getElementById("元素的id名")。这是最简单最直接的方法

html

css

js

var li1 = document.getElementById("li1);

console.info(li1,typeof(li1));

你可能会在控制台中如下的结果 ：

 (图1)

这样就说明我们成功地找到了这个标签。存放这个标签的变量li1的类型是object。

[说明]

1).控制台打开的方法是：使用浏览器双击打开html页面后，右键，选择“审查元素”命令。然后你就慢慢找吧。

2).如果你的id名称写的不对，就找不到标签，li1的值就是null。

3).展开li#li1，你会发现一个宝藏。就好像把li1 解剖了，放在显微镜下一样，可以清楚地看到它的全部结构。关于这个部分的使用方法，在后面会介绍。这里只提两个: id：“li1” ，它表示说这个li 的id属性的值是li1；另一个是innerHTML:"html“,它表示说这个li的innerHTML属性值是“html“，也就是说这个li中的内容是html.

图2

方法二：通过标签名来找到元素。我们可以使用类似于： 标签.getElementsByTagName("标签名")这样的语法来找到我们需要的标签。讲到这个地方，我想我必须要把“标签”换个名字了，换成元素(或者节点)。因为在这个语境下，“标签“ 这个词已经不再合适了。我们可以这样来理解。

html中的标签                                                    dom中的元素

html                           li1

好，我们来看看如何中去通过TagName获取元素。

• red
• blue

html

css

js

var lis = document.getElementsByTagName("li");

console.info(lis,typeof(lis));

你得到的结果可能是：

看起来lis像是一个数组，因为它也被[]包起来了，并不是一个真正的数组，不过你基本上可以像使用数组一样去使用它。你可以通过：console.info(lis instanceof Array) 来验证它并不是一个数组。

操作html标签之找到标签(续)

为了方便我们快速地找到一些特殊的元素,js提供了几个有用的东东. 1.快速找到根元素:document.documentElement和document.body. 2.obj.parentNode: ...

CSS层叠样式表--找到标签

0 怎么学习CSS 1 CSS的四种引入方式 2 CSS的四种基本选择器 3 属性选择器 4 CSS伪类 5 CSS选择器优先级 6 CSS的继承性 怎么学习CSS 1.怎么找到标签(CSS选择器) ...

@Autowired标签与 @Resource标签 的区别

Spring不但支持自己定义的@Autowired注解,还支持由JSR-250规范定义的几个注解,如:@Resource. @PostConstruct及@PreDestroy. 1. @Autowi ...

第一篇-Html标签中head标签，body标签中input系列，textarea和select标签

第十四周课程(1-12章节) HTML 裸体 CSS   穿华丽衣服 Javascript 动起来 一 HTML (20个标签) 1.我们的浏览器是socket客户端 2.一套规则,浏览器认识的规则 ...

一、JSP标签介绍,自定义标签

一.JSP标签介绍 1. 标签库有什么作用 自定义标签库是一种优秀的表现层技术,之前介绍的MVC模式,我们使用jsp作为表现层,但是jsp语法嵌套在html页面,美工还是很难直接参与开发,并且jsp脚 ...

Django框架(七)—— 模板层：变量、过滤器、标签、自定义标签和过滤器

目录 模板层:变量.过滤器.标签.自定义标签和过滤器 一.模板层变量 1.语法 2.使用 二.模板层之过滤器 1.语法 2.常用过滤器 3.其他过滤器 三.模板值标签 1.for标签 2.if标签 3 ...

Struts2标签库常用标签(转)

struts2标签讲解 要使用Struts2的标签,只需要在JSP页面添加如下一行定义即可:

从零开始学spring源码之xml解析(二)：默认标签和自定义标签解析

默认标签: 上一篇说到spring的默认标签和自定义标签,发现这里面东西还蛮多的.决定还是拆开来写.今天就来好好聊聊这两块是怎么玩的,首先我们先看看默认标签: private void parseDe ...

传智播客JavaWeb day07、day08-自定义标签(传统标签和简单标签)、mvc设计模式、用户注册登录注销

第七天的课程主要是讲了自定义标签.简单介绍了mvc设计模式.然后做了案例 1. 自定义标签 1.1 为什么要有自定义标签 前面所说的EL.JSTL等技术都是为了提高jsp的可读性.可维护性.方便性而取 ...

随机推荐

storm基础系列之一----storm并发度概念剖析

前言: 学了几天storm的基础,发现如果有hadoop基础,再理解起概念来,容易的多.不过,涉及到一些独有的东西,如调度,如并发度,还是很麻烦.那么,从这一篇开始,力争清晰的梳理这些知识. 在正式学 ...

Eclipse Svn 取消某些文件或文件夹的版本控制

SVN提交时,我们有时候需要将一些文件忽略掉,例如:maven项目中的target文件夹,可以将这些文件或文件夹设置成ignore来忽略这些文件或文件夹 1． 将文件夹或文件从Eclipse中删除.记 ...

Luncene 学习入门

Lucene是apache组织的一个用java实现全文搜索引擎的开源项目. 其功能非常的强大,api也很简单.总得来说用Lucene来进行建立 和搜索和操作数据库是差不多的(有点像),Document ...

[转]How WebKit’s Event Model Works

原文:https://homes.cs.washington.edu/~burg/projects/timelapse/articles/webkit-event-implementation/ Fi ...

事务的ACID属性，图解并发事务带来问题以及事务的隔离级别

事务的概述 事务是指作为单个逻辑工作单元执行的一系列操作,要么完全地执行,要么完全地不执行. 事务处理可以确保除非事务性单元内的所有操作都成功完成,否则不会永久更新面向数据的资源.通过将一组相关操作组 ...

Python之进程 3 - 进程池和multiprocess.Poll

一.为什么要有进程池? 在程序实际处理问题过程中,忙时会有成千上万的任务需要被执行,闲时可能只有零星任务.那么在成千上万个任务需要被执行的时候,我们就需要去创建成千上万个进程么?首先,创建进程需要消耗 ...

MySQL优化之like关键字

1.%号不放最左边 无法使用索引了,开头是不确定的,MySQL也无法进行优化了,只能扫描表了. 2.使用覆盖索引 如果业务需要%就放开头我们也没办法,一般情况需求都是这样的,毕竟优化还是为业务服务的. ...

[Jmeter] 将参数从Jenkins传递给Jmeter

Configuration in Jmeter Configuration in Jenkins

OLEDB 命令转换组件的用法

在数据流任务组件中,OLEDB 命令转换组件对输入的每行数据调用TSQL,该组件能够把输入的数据作为参数,因此,该转换组件主要用于运行参数化的查询. 命令转换组件的配置十分简单,只有三个可编辑属性,位 ...