枯燥的js DOM选择器与节点

document代表整个文档

ID极少使用
document.getElementById()//元素id在ie8以下的浏览器，不区分id大小写

getElementsByTagName()//标签名（div，li等）
getElementsByName()//需注意，只有部分标签name可生效（表单form，表单元素input等,img，iframe）
getElementsByClassName()//类名->ie8和ie8以下的ie版本没有，

分割线-----------------------------
.querySelector()//css选择器在ie7和ie7以下的版本中没有
.querySelectorAll()//css选择器在ie7和ie7以下的版本中没有
缺点：非动态的获取标签

<div></div>
    <div class="demo"></div>
    <script>
       var div = document.querySelector('div');
        var demo = document.getElementsByClassName('demo')[0];
        var newDiv = document.createElement('div');
        document.body.appendChild(newDiv);
    </script>

此时div只展示两个，并没有新增的newDiv。

节点

parentNode-> 父节点

（最顶端的为#document,且一次一个）

<div class="demo">
        <strong></strong>
        <span>123</span>
    </div>
    <script>
        var div = document.querySelector('div');
        var demo = document.getElementsByClassName('demo')[0];
        var span = document.getElementsByTagName('span')[0];

此时，span.parentNode 就会显示整个div

childNodes ->子节点们

直系子节点和文本节点
所以上述代码中在这里插入图片描述

firstChild 第一个子节点

在这里插入图片描述

lastChild 最后一个子节点

nextSibling 后一个兄弟节点

previousSibling 前一个兄弟节点

基于元素节点数的遍历

parentElement ->返回当前元素的父元素节点（IE不兼容）

children -> 只返回当前元素的元素子节点
在这里插入图片描述
firstElementChild 返回第一个元素节点。
lastElementChild
nextElementSibling/previous下一个上一个元素节点

节点的属性

nodeName：元素的标签名，以大写形式表示，只读

nodeValue ：Text节点或Comment（注释）节点的文本内容，可读写。（只有这两个有）

attributes：Element 节点的属性集合

！！！！nodeType：该节点的类型，只读（返回类型数字）

节点的类型

元素节点 ----------1
属性节点 ----------2
文本节点 ----------3
注释节点 ----------8
document ---------9
DocumentFragment ----------11