DOM获取元素的方法

DOM获取元素的方法：

DOM：document object model 文档对象模型，提供一些属性和方法可以让我们去操作DOM元素；

获取方法：
document.getElementById //一个元素对象
[context].getElementsByTagName //元素集合
[context].getElementsByClassName //元素集合
document.getElementsByName //节点集合
document.documentElement //获取整个HTML对象
document.body //获取整个BODY对象
document.head //获取整个HEAD对象
[context].querySelector //一个元素对象
[context].querySelectorAll//获取元素集合

…

1.getElementById

此方法的上下文只能是document
一个HTML页面中元素的ID理论上是不能重复的。
//1.如果页面中的ID重复了，我们获取的结果是第一个ID对应的元素对象。
//2.在IE7及更低版本浏览器中，会把表单元素的name值当作id来识别使用。
//（项目中尽量不要让表单的name和其他元素的id相同。）

New Web Project

    <div id="box1">01</div>
    <div id="box2">02</div>
    <div id="box1">03</div>
    <script>
        console.log(document.getElementById('box1'));
        //1.如果页面中的ID重复了，我们获取的结果是第一个ID对应的元素对象。
        //2.在IE7及更低版本浏览器中，会把表单元素的name值当作id来识别使用。
        //（项目中尽量不要让表单的name和其他元素的id相同。）
        
    </script>
</body>

//需求2： New Web Project

//需求3

New Web Project

        <script>
            //把当前页面中所有ID叫做box1的都获取到。
            //
            var allList=document.getElementsByTagName('*');
                result=[];
                
                for(var i=0;i<allList.length;i++){
                    var item=allList[i];
                    item.id==='box1'?result.push(item):null;
                }
                console.log(result);
        </script> 
</body>

2.getElementsByTagName

1.上下文是可以自己来指定的；
2.获取到的结果是一个元素集合（类数组集合）；

1.获取的结果是集合，哪怕集合中只有一项，我们想要操作的是这一项（元素对象），需要先从集合中获取出来，然后再操作。
…JavaScript

...

3.getElementsByName

通过元素的NAME属性值获取一组元素（类数组：节点集合NodeList）
它的上下文也只能是document

IE浏览器只能识别表单元素的name属性值，所以我们这个方法一般都是用来操作表单元素的。

4.document.documentElement/ document.body

获取HTML或者BODY（一个元素对象）
…
javascript
document.documentElement.clientwidth||document.body.clientwidth//=获取当前浏览器窗口可视区域的宽度（当前页面一屏幕的宽度）
//=>clientHeight是获取高度
5.querySelector/querySelectorAll
在IE6~8下不兼容，而且也没有什么特别好的办法处理它的兼容，所以这两个方法一般多用于移动端开发使用。
querySelector：获取一个元素对象；
querySelectorAll：获取的是一个元素集合。
只要是CSS支持的选择器，这里大部分都支持。

DOM获取元素的方法

猜你喜欢