操作指南：DOM获取规则

1、DOM（Document Object Model 文档对象模型）
     
    一个web页面的展示，是由html标签组合成的一个页面，dom对象实际就是将html标签转换成了一个文档对象。可以通过dom对象中js提供的方法，找到html的各个标签。通过找到标签就可以操作标签使页面动起来，让页面动起来。
    以chrom为例，按F12选择console在filter框中输入document，可以通过document来定位元素

2、JS获取DOM元素的8种方法

   

    假如一个网页的源代码如下所示

        <div class="test">要取的内容</div>

    如果你想取到div里面的内容，怎么写？

    用DOM方式这样获取：

 

        div[class=test]

    这是最简单是示例了。再比如   

        <div id="test">要取的内容</div>       

    用DOM方式这样获取：   

         div[id=test]   

    要是元素不是一个div，而是一个span，如下：

        <span id="test">要取的内容</span>   

    也很简单，用DOM方式这样获取：

        span[id=test]   

    稍微复杂一点的结构，如下

        <div class="test"><span id="mytest">要取的内容</span></div>   

    用DOM方式这样获取：

        div[class=test] span[id=mytest]

4、规则的简写   


      每次都输入div[class=test]或者span[id=test]这样的东西，太麻烦了。整理上面的几个例子，所以我们可以简写：

完整的写法	简写
div[class=test]	div.test
div[id=test]	div#test
span[id=test]	span#test
div[class=test] span[id=mytest]	div#test span#mytest

注意： div[class=aa bb] 像这样，一个class有两个值，这种情况下不能简写。

5、一些高级的写法

过滤	描述
属性	匹配具有指定属性的元素。如 div[id] 表示通过id属性 查找所有的
!属性	匹配不具有指定属性的元素。 如 div[!id] 表示 查找所有没有id属性的
[属性=value]	匹配具有指定属性值的元素。如 div[id=test] 表示查找id=test的div元素
[属性!=value]	匹配不具有指定属性值的元素。 如 div[id!=test] 表示查找id不等于test的div元素
[属性^=value]	匹配包含特定前缀的值的指定属性的元素。如 div[id^=test] 表示查找id前缀为test的div元素
[属性$=value]	匹配包含特定后缀的值的指定属性的元素。如 div[id$=test] 表示查找id后缀为test的div元素
[属性*=value]	匹配具有指定属性的元素,且该属性包含了一定的值。如 div[id*=test] 表示查找id包含test的div素

6、使用DOM获取用户名