引入

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

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

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

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

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

<ul>
<l1 id="li1">html</li>
<l1 id="li2">css</li>
<l1 id="li3">js</li>
</ul>
<script>
var li1 = document.getElementById("li1);
console.info(li1,typeof(li1));
</script>

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

 (图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中的元素

<li id="li1">html</li>                 <-------------->           li1

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

 <ul>
<li>red</li>
<li>blue</li>
</ul> <ul id="ul1">
<l1 id="li1">html</li>
<l1 id="li2">css</li>
<l1 id="li3">js</li>
</ul>
<script>
var lis = document.getElementsByTagName("li");
console.info(lis,typeof(lis));
</script>

你得到的结果可能是:

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

操作html标签之找到标签的更多相关文章

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

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

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

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

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

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

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

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

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

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

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

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

  7. Struts2标签库常用标签(转)

    struts2标签讲解 要使用Struts2的标签,只需要在JSP页面添加如下一行定义即可:<%@ taglib prefix="s" uri="/struts-t ...

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

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

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

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

随机推荐

  1. dedecms _ 当前位置问题的代码

    {dede:field name='position' runphp='yes'} $tc=" > "; $tf=split($tc,@me); $tn=count($tf) ...

  2. 根据反射生成SQL语句

    /** * 基础查询语句 * 返回类型的属性字符串Sql * @author: InkYi * 修改时间:2016年5月11日 - 上午10:06:00<br/> * 功能说明:<b ...

  3. 内核参数优化之2-1 tcp/ip 标志位报文解析

    以下内容纯属虚构,切勿轻易相信! 众所周知,tcp/ip三次握手和四次挥手,均由syn/ack/fin三个标志位报文决定,但是这三个标志位报文,并不是说在构建连接的时候只发送一次的,因为协议不知道网络 ...

  4. A + B Problem,hdu-1000

    A + B Problem Problem Description Calculate A + B.   Input Each line will contain two integers A and ...

  5. 开放GitHub的理由

    越来越多的程序把sourcecode和安装包托管到GitHub上,没有GitHub访问的网络太悲催了... 想通过Chocolatey(windows版的apt-get)装一个ConEmu都无法做到 ...

  6. iphone 拨打电话的 两种方法-备

    大家想不想在自己的应用中拨打电话呀?打电话可以用openURL:这个API, 如:[[UIApplication sharedApplication] openURL:[NSURL URLWithSt ...

  7. 宏汇编软件MASM51的使用

    单片机开发可以用手工汇编和机器汇编两种方法.采用手工汇编就是先编写出汇编程序,然后对照单片机汇编表手工将汇编程序翻译成机器码,最后将机器码一个一个地送入开发仿真器的RAM中去进行调试. 由于采用手工汇 ...

  8. 使用Keil软件编写汇编源程序应注意事项

    1)一定要使用微软的txt文本编辑器,否则键入逗号时编译通不过.应该是这个样('),不该是这个样(,). 2) 用数字做标号时,前面一定要加一个英文字母,否则编译通不过. 3) 有时编译通过的.asm ...

  9. 价格更低、SLA 更强的全新 Azure SQL 数据库服务等级将于 9 月正式发布

    继上周公告之后,很高兴向大家宣布更多好消息,作为我们更广泛的数据平台的一部分, 我们将在 Azure 上提供丰富的在线数据服务.9 月,我们将针对 Azure SQL 数据库推出新的服务等级.Azur ...

  10. 关于ognl.OgnlException: target is null for setProperty(null的解决方案

    在跑struts2的时候有时候会出现上面的错,特别是新手, 这种情况是在struts2高级的POJO访问时候出现的s 警告: Error setting expression 'user.passwo ...