选取DOM对象

最新推荐文章于 2023-11-30 09:00:00 发布

好事总会发生在下个转弯

最新推荐文章于 2023-11-30 09:00:00 发布

阅读量162

点赞数

分类专栏：前端文章标签： js

本文链接：https://blog.csdn.net/drawlessonsfrom/article/details/114272048

版权

前端专栏收录该内容

73 篇文章 1 订阅

订阅专栏

document对象由HTML元素构成，HTML元素用于描述网页的结构，一个元素包含起始标签和结束标签以及标签内的内容。起始标签可以包含属性，属性通常描述该元素的更多信息，全局属性适用于每个元素，例如class、id、title属性。属性有名称和值，值通常包含在一对双引号中。

用于选取单个元素的方法有getElementById()、querySelector()，用于多个元素选择的方法有getElementsByClassName()、getElementsByTagName()和querySelectorAll()。

document对象在浏览器窗口载入Web页面时建立，包含了页面的属性（如title）、页面事件（如load、click）和方法（如getElementById），使用document对象可以访问或修改用户在页面上看到的内容，并根据用户与页面的交互方式进行相应。其中title属性就是head标签内的title标签值。lastModified属性是页面最后修改时间。

1、getElementById

函数后的圆括号设置要选取元素的id属性值，id属性值必须放在单引号或双引号里，getElementById返回带有指定id属性值的元素节点对应的对象，这个对象对应着document对象里的一个独一无二的元素，比如document.getElementById(“btn-alter”)。

注：getElementById支持的浏览器最低版本为IE5.5、Opera、所有版本的Chrome、Firefox和Safari。

2、getElementsByClassName

getElementsByClassName能够通过元素头标记中的class属性的类名来访问元素，该方法只接受查找的类名作为参数，语法格式为document.getElementsByClassName(“class”)。查找带有多个类名的元素时，通过在类名之间使用空格来分隔类名，匹配与类的指定顺序无关，与是否全部匹配无关，只要包含了指定的类名就匹配，该方法返回一个具有相同类名的元素数组。

注：getElementsByClassName支持的浏览器最低版本为IE9、Opera10、所有版本的Chrome4、Firefox3和Safari4。

3、getElementsByTagName

getElementsByTagName方法返回指定标签的元素节点对应的对象数组，函数名后的圆括号设置要获取的元素标签名称，每个对象分别对应着文档里有着给定标签的一个元素。

注：getElementsByTagName支持的浏览器最低版本为IE6、Opera10、所有版本的Chrome、Firefox3和Safari4。

4、querySelector和querySelectorAll

querySelector和querySelectorAll的参数须是符合CSS选择器的字符串。querySelector()能够获得第一个匹配的节点。querySelector()和querySelectorAll()都是DOM对象节点的属性，document.querySelectorAll()可以查询整个HTML文档，而el.querySelectorAll()在子节点中进行查询。
获取页面id属性为slide的元素：

document.querySelector("#slide");

或者使用

document.querySelectorAll("#slide")[0];

querySelectorAll()处理大量组合查询时效率更高，用法为：

document.querySelectorAll("div.wrap,div.meau");

注：querySelector和querySelectorAll支持的浏览器最低版本为IE8、Opera10、所有版本的Chrome、Firefox3.5和Safari4。

5、获取兄弟元素

先获取此元素的父节点的所有子节点，因为所有子节点也包括此元素自己，所以要从结果中去掉自己，再将符合条件的兄弟元素加入元素集合数组并返回。

function siblings(elm){
    var a = [];
    var p = elm.parentNode.children;
    for(var i=0,pl=p.length;i<pl;i++){
        if(p[i]!==elm)
            a.push(p[i])
    }
    return a;
}

还有另外一种看起来比较奇特的方法：先找到此元素的父节点的第一个子节点，然后循环查找此节点的下一个兄弟节点，一直到查找完毕。如jQuery里面获取兄弟节点的代码如下：

function siblings(elm){
    var a = [];
    var n = elm.parentNode.firstChild;
    for(;n;n=n.nextSibling){
        if(n.nodeType===1&&n!=elm)
            a.push(p[i])
    }
    return a;
}

6、addEventListener

要给一个对象指定一个或多个事件处理程序时，就不能使用属性（如onload）来完成，而必须使用方法addEventListener。对对象调用addEventListener来注册一个事件处理程序，如document.addEventListener(“plusready”,plusReady,false)，表示对document对象添加plusready事件（第一个参数），第二个参数plusReady指向事件处理程序的引用，第三个参数false指定事件是否向上传递给父元素。