操作html标签之找到标签

引入

　　丰富多彩的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) 来验证它并不是一个数组。