js dom选择器

dom选择器。

我们知道document表示文档，我们就是通过document里面的方法选择标签。

1：document.getElementById();

通过选择Id选择器，来选择标签。

 
123 
        
 456
        

image.png

目标很明确，选择了id='demo'的div

注意：元素在ie8以下的选择器，不区分id的大小写，而且也能匹配name属性的元素（也就是如果有name='demo'）那么也会被匹配。

2：document.getElementsByTagName()

通过标签名来选择标签。

 
123 
        
 456
        
            
        
        

image.png

直接可以把所有的div标签全部选择出来。这里注意我们返回的是一个类数组名，我们可以像数组一样调用每一个div

我们应该注意到这样带getElements的s的就是把一类都选出来，注意返回的是类数组。

这个很常用。

3：document.getElementsByName()

通过name属性来选择标签。

 
123 
        
 456
        
            
        
        

image.png

这个方法对表单，img,iframe比较好，其他的你想想，你给加一个name干嘛了。

4：document.getElementsByClassName()

通过Class选择器来选择标签。

123 
        
 456
        
            
        
        

image.png

注意ie8和ie8以下的没有这个方法。

以上的几种方法都是实时性的，也就是标签变了，那么选择器选择的标签也会马上改变。举个栗子

123 
 456

我们通过标签名选择到了俩个选择器，通过id选择器选择到了一个选择器。

我们如下操作:

image.png

我们把div2去掉(remove)，那么div1里面也没有了。嘻嘻现在理解实时性了吧。

下面俩种没有实时性的标签，功能很强大，但是没有实时性就很尴尬了，就没有那么厉害了，不常用。

看如下代码

  

            123
        
        

            
                456
            
        

我们要选择下面一个strong标签怎么办？

1：document.querySelector();

可以让我们像css一样，选择标签。

image.png

就这样轻易的选择到了。

2：document.querySelectorAll()

和上面一样,但是选择所有的返回的是类数组

image.png

ie7以下的浏览器没有这两种方法。

因为没有实时性的缘故，应用并不好。

被选择出来的标签，里面上有很多方法和属性，下面来介绍一下。

节点遍历树.

1:childNode

返回的是当前标签的父亲节点。

image.png

看的很清楚了吧，一层一层的直到document

2:childNodes

孩子节点们（注意是直系的）

你们猜一下，div有几个孩子节点。是不是三个啊？

image.png

image.png

这里的节点注意不只是css的节点，还有html的节点。

节点类型:文本节点，属性节点，元素节点，注释节点，document,documentFragment

我们注意到:比如

和之间有“空格”这个是文本节点咯，在html里面可是分隔符咯。

是不是加了四个文本节点。

image.png

3:firstChild

第一个儿子节点

 

            123
            
            
            
        
        

div的第一个儿子节点是撒？

image.png

3：lastChild

最后一个儿子节点，
4：nextSibling下一个兄弟节点，perviousSibling上一个兄弟节点

1：parentElement

直接父母元素节点

2：children

直接孩子元素节点

3:firstElementChild||lastElementChild

返回第一个||最后一个元素节点

4:nextElementSibling||perviousElementSibling

下一个||上一个兄弟元素节点
节点的四属性

1：nodeName(元素的标签名，只可以读）

2:nodeValue(只有Text节点和Comment节点（注释节点）有，可以写）

image.png

3：nodeType(节点的类型)

通过返回值来确定节点类型

元素节点返回1 属性节点返回2 文本节点返回3 注释节点返回8 document返回9

documentFragment返回11

image.png

我们封装一个函数来把一个节点树中的元素节点都保存下来。

4：attributes(元素节点属性的集合）

image.png

mo'和id='cyl'