DOM01方法类获取元素节点

什么是DOM
DOM-->Document Object Model(文档对象模型)
DOM定义了 表示和修改文档所需的方法，
DOM是用来操作xml和html的一类对象的集合
DOM不修改css样式表，可以间接通过行间修改

DOM的基本操作--查看元素节点
1.document.getElementById()
2.document.getElementsByTagName()
3.document.getElementsByName()
4.document.getElementsByClassName()

1.document.getElementById() 少用，因为不能太依赖id选择器，他一般是顶级框架的存在，在css中一般用css选择器

    <div id="only">
        <p></p>
        <p></p>
    </div>

    <script>
        var div = document.getElementById('only');
    </script>

image.png

因为div元素是通过id查找的，而id是一一对应，所以getElement不加s

2.document.getElementsByTagName() 通过标签查找，返回的是一个类数组，这种获取元素节点的方法最主流，最常用

    <div id="only">
        <p></p>
        <p></p>
    </div>

    <script>
       //var div = document.getElementById('only');
        var p = document.getElementsByTagName('p');
    </script>

返回的是一个类数组
类数组看着像数组，但他是对象不是数组，也没有数组的方法，但是可以当做数组来用，需要自己添加方法。
类数组的基本形态：属性名为索引（数字），有length属性，可以给他添加push()和splice()

        obj = {
            '0': p,
            '1': p,
            'length': 2,
            'push' : Array.prototype.push,
            'splice' : Array.prototype.slice
        }

接下来在控制台查看p

image.png

你要查看p中的第一个值时：

image.png
所以当你用document.getElementsByTagName()获取到的元素是唯一的，那也是存在在一个类数组中的元素，所以你想直接使用类数组中的元素时，需要指定下标

        var p = document.getElementsByTagName('p')[0];

3.document.getElementsByName()，只有部分标签name可生效（表单，img，iframe），不是在所有浏览器中都能使用，开发一般不用

    <input name="fruit">

    var input = document.getElementsByName('fruit')[0];

image.png

4.document.getElementsByClassName()，缺点：ie9以下不能用

        <p class="text"></p>

        var text = document.getElementsByClassName('text')[0];

5.querySlector()和querySletorAll()，通过css选择器获取元素，在ie8以下不能使用，最重要的一点是，用这方法选出来的元素不是实时的，是静态的，所以一般不用

    <div id="only">
        <p class="text"></p>
        <p></p>
    </div>
    <script>
        var p = document.querySelector('div p.text');
        var text = document.querySelectorAll('div p.text')[0];
    </script>

querySelectorAll()返回的是类数组，需要加下标

image.png

获取的元素不是实时的展示：

    <div></div>
    <div class="demo"></div>
    <div></div>
    <script>
        var demo = document.querySelectorAll('div');
        var div = document.getElementsByClassName('demo')[0];
    </script>

image.png